COS-General

How To Create A Custom Follow Me Module

Last updated: December 13, 2016

In order to create custom Follow Me module you'll have to gather a few things first.

  • The list of social media accounts you wish to connect with.
  • The URL associated with each of the accounts
  • The icons you wish to use for each account.
  • Determine the desired layout of the icons

The choices are unlimited when it comes to social media icons. I recommend finding an icon set that is made up of png files and to double check that there is an icon for each of the social networks you wish to connect with. There are 2 ways to do this, horizontally or vertically.

Horizontal Follow Me Module

Step 1:

Upload your custom icon files to file manager.

Step 2:

Navigate to Content > Design Manager > Edit the template in which you would like to add your custom social icons to > Add a new Custom HTML module. You can make this module global after it is complete, so that you can reuse it throughout your site. Please note that Global Modules cannot be added to Global Groups.

Step 3:

Click the gear on your Custom HTML module > Edit Options > Copy and paste the code below into your Custom HTML module for each of the networks you wish to connect, replacing the filler text with the appropriate information. To get the file URL of your custom social images uploaded to the File Manager, check out this article. Be sure to leave the quotation marks (" ") in place.

<!--Name of Social Network--> <a href="URL of Account on Social Network"><img src="URL of icon from File Manager" alt="Alt Text to be displayed in event that the image doesn't load"></a>

Step 4:

If you wish to make the module Global, click on the cog in the top right corner of the module and select the "Make Global" option.

Vertical Follow Me Module

Step 1:

Upload your custom icon files to file manager.

Step 2:

Navigate to Content > Design Manager > Edit the template in which you would like to add your custom social icons to > Add a new Custom HTML module. You can make this module global after it is complete, so that you can reuse it throughout your site. Please note that Global Modules cannot be added to Global Groups.

Step 3:

Click the gear on your Custom HTML module > Edit Options > Copy and paste the code below into your Custom HTML module in order to create an unordered list. Add additional line items as necessary for each of the networks you wish to connect, replacing the filler text with the appropriate information. To get the file URL of your custom social images uploaded to the File Manager, check out this article.

<ul> <li><a href="URL of Account on Social Network"><img src="URL of icon from File Manager" alt="Alt Text to be displayed in event that the image doesn't load"></a></li> <li><a href="URL of Account on Social Network"><img src="URL of icon from File Manager" alt="Alt Text to be displayed in event that the image doesn't load"></a></li> <li><a href="URL of Account on Social Network"><img src="URL of icon from File Manager" alt="Alt Text to be displayed in event that the image doesn't load"></a></li> </ul>

Step 4:

Icons will appear as a bulleted list. To remove the bullets add the class follow-me to the CSS declarations on the module. Then add to the following statement to the css file in the template builder.

.follow-me ul{ list-style: none; }

Step 5:

If you wish to make the module Global, click on the cog in the top right corner of the module and select the "Make Global" option.