Todays tutorial will show you how to add social media links beneath each blog post on blogger. Add the links in button or text form. This is a handy way of letting your readers know how to contact you, without them having to search around for ways to follow.
How to add social media icons or text links under each post
- Template > Edit HTML > and click the “Format Template” button. This used to be “expand widget templates” before the Blogger update. Click into the HTML box, press CTRL F on a PC or CMD F on a MAC and search for the following code. It may appear twice in your template, typically you’re looking for the one further down, you’ll know by the numbering on the side.
<data:post.body/> - Under this
<data:post.body/>paste the following<div class='sociallinks'> </div> - Now you add your links between
<div class='sociallinks'>and</div>. You can choose to use images to create buttons or use simply text links.Adding Social Media Icons – Image/Button Link
<a href="LINK URL" target="_blank"><img src="IMAGE URL" border="0" alt="DESCRIPTIVETEXT"/></a>Adding Social Media Links – Text Link
<a href="LINK URL" target="_blank" title="TITLE OF LINK">URL TEXT</a>
How to style the Social Media Links
Go to the Template Designer by clicking on Template > Customize > Advanced > CSS. Adding code here will add it before /b:skin in your main HTML.
Add the following code
.sociallinks { }Here you can style it however you wish. You can add borders, a background color, change the font or align it to the right (a), left (b) or centre (c) of the post area.
a) .sociallinks {text-align: right;}
b) .sociallinks {text-align: left;}
c) .sociallinks {text-align: center;}
31 responses to “Add social media links beneath each blog post”
arrrrrrrrrrrrgh, I cant find this in my HTML
Try just searching for
data:post.body, sometimes it can find just the text better 🙂 xI’ve tried searching this too, but I still can’t find it. Only data:post but as soon as I add ‘.body’ I have no results…
Try searching for
post-body entry-contentorpost.body. Unless you’ve altered the original template it should be there.When I try to insert the social links in, I am unable to save my template and this is the error I get from blogger: “Could not load template preview: Error parsing XML, line 1570, column 215: The element type “img” must be terminated by the matching end-tag “”” and it highlights my first social media link button url. When I try to include the tag at the end, my buttons do not appear. Help? ):
Hello lovely, thank you for commenting to tell me. I looked back over the code and realised I’d left out a piece of code.
I’ve edited it in the tutorial so it should work now, sorry about the inconvenience xx
I have pinned this article I think I’ll be sitting down later in the week to go through your blog and set myself some homework!! It’s great to see such a good Irish blog doing tutorials like this.
Awh thank you. Let me know if you need any help with anything x
Hiya! Great blog I have read and used tons of posts! Quick question, I have already got my social media links, however would you be able to create a post on how to add social media ‘share’ links or buttons at the bottom of each post, so for example a facebook like button, a twitter tweet button, a tumblr share button, and a bloglovin follow button?
I would really really appreciate it and im sure many other bloggers would too! Thank you x x x
Here you are – http://xomisse.com/blog/add-custom-share-links-blog/
Thanks for sharing this – really useful!
I am wondering if there is a way to add text to go along with the social media links? I would like to end each of my posts with something like, “You are warmly welcome to join us on Facebook (linked to FB), Google +, etc… and have each social media text linked to their appropriate locations. Your tutorial shows me how to add the links, but how do I add the extra text?
Thanks for any help you can offer!
Jackie
Yes of course, just add the text around the code so for example
Join us on <a href="FACEBOOK URL" target="_blank" title="Facebook">Facebook</a> or on...Hi dear, I’ve added in the code but it did not show up in my blog page.
Would greatly appreciate if you can take a quick look.
Thank you!
Hello! I can’t see the code in your template, make sure you’re adding it to the second
<data:post.body/>Thank you so much for this post, but I’m having a difficult time with the code. When I input the code with my info the code says I must add a ( > ) or ( /> ) to the beginning of each ( <a ). When I do this, the code is showing up on the web page. Please take a look and see if you can help me solve this problem. THANK YOU SO MUCH!
Hello Kristin, there’s some errors showing. Go into your template again and make sure the code looks like
<a href="LINK URL" target="_blank"><img src="IMAGE URL" border="0" alt="DESCRIPTIVETEXT"/></a>, edit it to look like that making sure all characters (brackets, semi-colons, etc) are there and correct 🙂Thank you so much for the help! You are amazing! It has worked! And thank you for this tutorial that has also helped me learn how to center it all!
Ellie,
Thank you so much for the tutorial! I was able to successfully add my social media buttons to the bottoms of my posts. There was just one thing I’m not sure how to do. I see in the comment above what you said about how to add text before the buttons, but when I do that, it moves the buttons so that they’re no longer centered. How should I make the code to have something like “Follow Curly Girl Kitchen” centered above the buttons?
There’s a couple of ways like adding it outside of the div, but the easiest would be to add it inside the div wrapped in paragraph tags and center it. Then it will be above the buttons.
I like the round social media icons with the counter at the end of your post. Can you point me to where you found it, and how to prevent it from showing on the homepage?
Hello, they’re Jetpack Sharing for WordPress so they aren’t available for Blogger but this post will help you add share icons to Blogger posts and this post will show you how to hide them on the homepage.
Hi,
I’d like to firstly say how appreciative I am for this tutorial. It is simply and informatively written, unlike the many I have sieved through today.
An issue, well not an issue per se, I have encountered is the distance between the individual icons. Is there no way in adjusting the distance so the icons are more distanced? I have tried applying various margin/padding values but to no avail.
Thank you in advance.
Iram
Hello, thank you so much! You can adjust the spacing by using
.sociallinks a {padding: 0px 20px;}Hello! I have been trying to get this to work and for some reason they won’t show up on my blog.
Hello Mae, make sure the position of the icons is correct, double check the numbering on the side to make sure you’re getting the right instance.
Hi Elaine! Thank you so much for this helpful tutorial. I was wondering if there’s a way to block these social media icons from appearing on my post (individual) pages?
Hello Kelsey, yes there is! Check out this tutorial 🙂
Hello Elaine! Do you happen to know if there’s “like” or “heart” button available for Blogger. I would like to replace the clumsy reaction check box with something more beautiful. Just don’t know how. Thank you in advance. 🙂
Maria
Hey Maria, will have a look into this for you and add it to the list of tutorials okay 🙂
Thank you so much. Looking forward to it. 🙂