How to Add Social Media Icons

One of the best things you can do for your blog is to add social media icons.  This is one of the “tasks” that I struggled with the most when starting my blog back in June 2012.  I couldn’t figure out how to do it for nothing.  It seemed every tutorial on the web was different or confusing. I was so frustrated, for awhile I didn’t even HAVE social media icons.  But, never fear.  Today, I am going to show you how to easily add social media icons to your blog or website – both Blogger and WordPress!

WordPress for Those Not Afraid to Code

1. Download the social media icons you need, saving them to your desktop.
2. In your WordPress dashboard, click the media button then add new.  Click select files.  (Note: disable automatic watermarking prior to this step.)
3. Highlight your social media icons.  To select more than one, click with the mouse, then hold CTRL and click the next one.
4. Once the pictures have uploaded, click into the picture to locate the image link.
5. Highlight this link, then copy and paste it into a blank document.
6. In your WordPress dashboard, click appearance then widgets.
7. Add a new HTML/text widget to your sidebar or footer.
8. For each social media icons, copy the code below and update with your social media information  (you can also use HTML coding to customize these, such as centering them.)

<a href=”YOUR SOCIAL MEDIA LINK” target=”_blank”><img src=”URL OF ICON PICTURE” alt=”SOCIAL MEDIA ICON NAME“/></a>

For example, my Twitter code looks like this:

<a href=”http://www.twitter.com/minivandreams” target=”_blank”><img src=”https://www.citygirlfarmlife.com/wp-content/uploads/2013/09/twitter.png” alt=”Twitter“/></a>

Easy-Peasy WordPress for the Code-Shy

1. Download the social media icons you need, saving them to your desktop.
2. Open a new post.
3. Upload your social media icons, like you would for regular photos.
4. Adjust the look of them – (i.e. center, remove spaces, etc).
5. Click the picture, then click the link in the toolbar.
6. Add your social media link (i.e. http://www.facebook.com/yourusername)
7. Continue adding links to each social media icon.
8. Click the text editor tab at the top of your post.
9. Highlight the entire code, right click then click copy.
10. In the WordPress Dashboard, click Appearance then widgets.
11. Add a new HTML/text widget to your sidebar or footer.
12. Right click in the field and click paste.
13. Click save.

Blogger

1. Download the social media icons that you need and save them to your desktop.
2. Open the Blogger dashboard.
3. Open a new post.  Title it “SOCIAL MEDIA ICONS DO NOT DELETE” or something similar.
4. Upload your social media icons into the post, like you would for regular photos.
5. Adjust the look of them – (i.e. remove spaces, center, etc).
6. Click the picture, then click link in the tool bar.
7. Add your social media link (http://www.twitter.com/yourusername)
8. Continue for each social media icon.
9. Click Save.
10. Click into the HTML tab of your post.
11. Highlight the text, right click and click copy.
12. Close the post without publishing (just save it).
13. Go to layout on your dashboard and click add a gadget.
14. Choose the HTML/JavaScript gadget.
15.  Right click in the content area and click paste.
16.  Click save.
17.  Verify the location on your sidebar by clicking view blog.  Move if necessary.

For social media icon installations, I highly recommend double checking your links by logging out of your admin profile and visiting your site or having a friend check for you.

[php snippet=9]