Follow me. Stalk me. Let’s be friends. Linking to your social media on your blog helps you gain repeat business, solidify your brand, and increase social media numbers that you might later use to impress people.
Table of Contents
Interested in Free Font + Icons?
But how do you add social media buttons to your blog?
Good thing you asked that. Sorry it just seemed the perfect moment to sound like a door-to-door salesperson from 1957.
Some WordPress plugins allow you to upload your own image files, but the easiest way to do it is to code it. It’s easy code.
WordPress Plugins
First let’s get this out of the way. If coding scares you, or you want something more robust with more things like sharing buttons… here’s my recommended plugins…
Add to Any
It’s free. It lets you use custom images. It also can be used for Blogger, Drupal, Free WordPress, etc.
Easy Social Share
This goes about $22, and it offers a lot of social media options and wonders.
Further Reading: 30+ Best Social Media Plugins for WordPress
HTML Add Social Follow Buttons
Step 1: Open up Notepad
Open up Notepad or some kind of place to write your code that doesn’t format. The problem with formatting is that it changes the ” and the ‘ marks and ruins the code’s ability to code.
Step 2: Upload your Images and List the URLs
Then upload the images you want to use to your blog. Copy and paste the Image URL to Notepad. Just list them for now. To find the image URL, in WordPress, it shows that on the right of the image in the media library. It will be something like http://www.yourblog.com/nameofyourimage.jpg or it might end in a .png. In blogger, upload the image, insert into a post, set the size to the original size, right click, and Copy Image Address. Then paste into Notepad.
Step 3: List Social Media URLs
Go to each social media account’s page you want linked to, and copy and paste the address into Notepad.
Step 4: Go into Notepad and Code
You can copy and paste this into Notepad. Then adjust the web addresses.
<a href= "http://www.facebook.com" target="_blank"> <Img Src="http://www.image.jpg" width= "25 px"></a>
The code is really broken down into two parts:
- The link.
- The Image.
I would copy and then paste as many times as you have links. So if you got 5 social media links, paste that 5 times into notepad.
Copy the Facebook link, highlight from quotation to quotation in the top line’s address without highlighting the quotation marks, and paste. Then copy the Facebook image, highlight from quotation to quotation in the second line’s address without highlighting the quotation marks, and paste.
Repeat for each social media account.
You may end up playing with the width’s pixel size to get the perfect size for your purposes.
But in the end, it should look like it does up there, but with the right web addresses in between the quote marks.
Step 5: Put the Code on your Site
Blogs: Go to your blog’s layout or appearance where you would insert a widget or gadget. Create a new HTML or Text Widget. Copy and paste your code into it. Save and Save.
Websites: If you don’t have a blog, wherever you enter your html code is where you would paste this.
Step 6: Save Your Code
If you already have it in Notepad now, save it so you can go back to it later. It’s a thousand times easier if you can go back to it later for when you create new pages, create a new blog or site, or just want to update with new images.
Troubleshooting
You can test what you’re doing on W3’s Try It EditorW3 Schools: You are in essence listing out images as a link. This is a great tutorial on html for images.
Make sure in your code for every a , there’s an End A /a .
And for every < , there’s a closing > .
Make sure you have quotation marks before and after every link.
Make sure you have a wordCommand= “crapInQuotes.com” in between all the < >s
Check out these other methods
How to Create Social Media Buttons
How to Create a Sticky Social Bar (like I have on this site on the left)
Fancier How to Add Social Media Icons to Your Site with easy animations
