How to Add Social Media Icons to Your WordPress Blog
NOTE: This tutorial shown here is for WordPress blogs only.
Just recently, I added three social media icons (Google +, Twitter and LinkedIn) on the right sidebar so that anyone can connect with me. For the longest time, I couldn’t figure out how to add these icons on the sidebar — until now.
Here are the steps to add these icons on the right sidebar. One tip before doing this: Save yourself some time by having all your social media URLs or domains listed on a separate Word document (including “http://”). When you’re ready to link the icon, you can easily copy and paste URLs from one spot to another without opening separate web pages.
- Customize the social media icons. The logos for Facebook, Twitter, LinkedIn and Google Plus are available to use from their respective sites. They all have specific guidelines for their logos so make sure to follow their brand standards. For this example, the icon size shown on my site is 76×76 px (you can go larger if needed). The icons can be saved as a JPEG, GIF or PNG.
- Add a new post. Go to Posts from the left navigation and select “Add New.” On the Title field, I would title my post as “Social Media Icons – DO NOT Publish” so that I make sure that I don’t publish this post by accident. I use this post for the icons’ HTML code.
- Upload the icons by going to “Add Media” then upload the files. Once they are uploaded, make sure that each icon is “Left” aligned so that the icons are next to each other. Select these files and click “Insert to Post.”
- Link the icons. Go to the “Visual” tab to view the social media icons. Click on one of them and select the “Edit Image” button. Copy URL from the document, go to “Link” field under Advance settings, paste the URL on the field and click Save. Repeat this for the other icons.
- Once you’re done linking, then “Save Draft”, but DO NOT publish.
- Under the “Text” tab, select and copy the entire HTML code.
- Go to “Appearances” from the left navigation bar, then Widgets.
- Click and drag the “Text” widget to the right sidebar.
- Paste the HTML code and save the widget.
- Preview the page. The icons should be able to show on the right sidebar. Make sure links go to the correct social media sites.
This tutorial also applies to other images, such as logos and banner ads.
yvenia.com 