Social Media Icons

How to add social media icons to the bottom of every page on your site.

We use the embedded content list to write the social media icon script to every page on the site, so if you don't have an embedded content list on your site you'll need to create that first. See the embedded content list tutorial here for information on how to create it and what it does.

Create the social media icons list

Go the the menu and select View All Site Content
Click on the create button at the top of the page
Select the list template called Social Media Icons. Name the list "Social Media Icons" and click Create.

Add the data

Click the Add item button or the green + sign to add a new item to your Social Media Icons list.
A new, blank entry will appear in the list. Choose an icon from the drop-down menu in the icon column, and add the URL of your corresponding social media profile to the Web address field. Click on the floppy disk icon on the left to save the entry. Repeat for each social media icon you want to add.

Make the social media information apear on the site

The information that you've entered into your list will not appear on the website until you do the following:

Go the the menu and select View All Site Content
Scroll down to the list section and click on the "Embedded Content" list. If that list doesn't exist you'll need to create it, see the Embedded Content tutorial.)
Create a new entry in the embedded content list. In the Embedded Content field add the following:
<script type="text/javascript">insertSocialMediaIcons();</script>
Save the embedded content entry and check to see that your social media icons are displaying on the bottom right hand side of your site.

[Add how to delete a link]

ADVANCED:

Add more social media icon options to the social media list.

If you create your social media icon list but find that the icon you want isn't available you can add it as an option.

How the script for the social media icons works is it looks at the icon field in the Social Media Icons list and it takes whatever word it finds in there and looks for a file with the same name in this folder. So, if I select Facebook from the icon drop-down, the word "Facebook" is written into that field. When the code is written out to display the social media icons whatever image the code finds in this folder called "Facebook.png" will be put on the page.

So, to add a new icon we must make sure the image file exists in the icons folder, and we need to add the name as an option to the Social Media Icons list.

The icons folder already contains a large number of social media and site icons that are not part of the default list. There's a pretty good chance that the image you want has already been created and is in that folder. Look through the folder to see if the new icon you want is there. If it isn't there you'll need to create the icon and add it to that folder (or ask someone with the correct permissions to add it for you.) Make note of the file name.

Next we need to edit the Social Media Icon list options. Go to your Social Media icon list and select List Settings from the list tab of the list tools ribbon menu.

On the list settings page scroll down to the Columns section and click on "Icon".

This takes you to a page where you can edit properties for the Icon column of the list. The icon column is a choice type and we can specify what the options are. Find the box labeled "Type each choice on a separate line:" (about halfway down the page). Click inside of it and add the file name of the new icon you want to add, but without the file extension.

Example:

Let's say I want to add a Vimeo icon to link to a Vimeo account because my department hosts their videos on Vimeo instead of YouTube.

First I'll check to see if the icon already exists in the icons folder. It does.

And, the icon looks good.

So now I go to my Social Media Icons list and click "Edit Properties". In the columns section of the properties page I click on Icon. On the column properties page for icon I go to the list of choices and add "Vimeo" to the end of the list.

Click OK

Now when I add an entry to the Social Media Icons list Vimeo is one of the options I can select.

If you need a new social media icon added to the folder please contact Dawn Anthes.

NOTE

When you create a list of any kind from a list template, that list in that site is a separate entity from the list template. If I update the list template to add another column or more options, that change will not propigate to all of the existing lists created from that template. You will only see the change in new lists created from that template after you make the change.