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
- Download the social media icons you need, saving them to your desktop.
- In your WordPress dashboard, click the media button then add new. Click select files. (Note: disable automatic watermarking prior to this step.)
- Highlight your social media icons. To select more than one, click with the mouse, then hold CTRL and click the next one.
- Once the pictures have uploaded, click into the picture to locate the image link.
- Highlight this link, then copy and paste it into a blank document.
- In your WordPress dashboard, click appearance then widgets.
- Add a new HTML/text widget to your sidebar or footer.
- 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
- Download the social media icons you need, saving them to your desktop.
- Open a new post.
- Upload your social media icons, like you would for regular photos.
- Adjust the look of them – (i.e. center, remove spaces, etc).
- Click the picture, then click the link in the toolbar.
- Add your social media link (i.e. http://www.facebook.com/yourusername)
- Continue adding links to each social media icon.
- Click the text editor tab at the top of your post.
- Highlight the entire code, right click then click copy.
- In the WordPress Dashboard, click Appearance then widgets.
- Add a new HTML/text widget to your sidebar or footer.
- Right click in the field and click paste.
- Click save.
Blogger
- Download the social media icons that you need and save them to your desktop.
- Open the Blogger dashboard.
- Open a new post. Title it “SOCIAL MEDIA ICONS DO NOT DELETE” or something similar.
- Upload your social media icons into the post, like you would for regular photos.
- Adjust the look of them – (i.e. remove spaces, center, etc).
- Click the picture, then click link in the tool bar.
- Add your social media link (http://www.twitter.com/yourusername)
- Continue for each social media icon.
- Click Save.
- Click into the HTML tab of your post.
- Highlight the text, right click and click copy.
- Close the post without publishing (just save it).
- Go to layout on your dashboard and click add a gadget.
- Choose the HTML/JavaScript gadget.
- Right click in the content area and click paste.
- Click save.
- 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]
I’m working on a complete redesign of my site so I will bookmark this to remind me how to include the icons. Great job – very clear and concise!
Let me know if you need help! I might be able to save you the tears I have cried over the last two years…