It is no wonder with the explosion of Social Media Networkings, which are called web 2.0 as well in recent years.
Google, Facebook, Twitter, Flickr, Digg, and etc.
Many of them have become a very important part of our lives.
By adding social media buttons to your blog, your readers will easily share your posts with their friends. And it will truly enhance their experience and definitely boost your blog’s traffic.
Adding social media buttons to Blogger is not as hard as you imagine.
There are only three simple steps:
1. Open Blogger template and find out where to add social media buttons.
Go to Blogger’s Dashboard, find “Layout” section, then click on “Edit HTML” link.
After that, click on “Expand Widget Templates” checkbox.
Now find (CTRL + F) following line:
<div class='post-footer'>
2. Immediately after that line, add these codes:
<div class='post-footer-line post-footer-line-0'>
<b:if cond='data:blog.pageType == "item"'>
Share This:
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' src='REPLACE YOUR IMAGE URL HERE'/></a>
<a expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' rel='external nofollow'><img alt='Digg' src='REPLACE YOUR IMAGE URL HERE' /></a>
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' src='REPLACE YOUR IMAGE URL HERE'/></a>
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Delicious' src='REPLACE YOUR IMAGE URL HERE'/></a>
<a expr:href='"http://twitter.com/home?status=Check this Out: " + data:post.url + " | " + data:post.title' rel='external nofollow' target='_blank'><img alt='Twitter' src='REPLACE YOUR IMAGE URL HERE'/></a>
</b:if>
</div>
3. Just replace “REPLACE YOUR IMAGE URL HERE” with your own social media icons’ url.
Click “SAVE TEMPLATE” button and refresh your blog page to see the effect.
Frequently Asked Questions.
Q: Where can I find free social media icons?
A: Visit my picasa album which is a category about social media buttons.
Q: I want to show these social media buttons not only below my posts, but also in my homepage.
A: Just remove line “<b:if cond=’data:blog.pageType == "item"’>” and “</b:if>” in that codes.
Q: Can I move these social media buttons position?
A: Yes, You can.
In Blogger’s “Edit HTML” textbox, added codes are just above “<div class=’post-footer-line post-footer-line-1′>”, you can move those codes to where above “<div class=’post-footer-line post-footer-line-2′>” or “<div class=’post-footer-line post-footer-line-3′>”.
THE Stephanie
It seems like this is the exact code I need, but when I try to install it, I keep getting this error:
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The reference to entity "t" must end with the ';' delimiter.
I've tried to correct the error, but can't seem to find the problem within the code. Can you help?
Pep
@ THE Stephanie
The reason why you got that error is the HTML code should be "&t=" not "&t=".
But after I posted this code, "&" is auto replaced by browser to "&".
However, I have modified my code and tested it on a temp blog. It works!
Sorry for my carelessness.
medicthree
I have the code installed on medicthree.com but nothing shows up…
Apparently only when the post is opened up does it show.
Pep
@medicthree
Pls reffer the second question in "Frequently Asked Questions".
John"Spanky"Stokes
Hello Pep, great tutorial! Everything works awesome except the icons are floating a little high for my liking, is there a way to bump them down a little bit? Thanks,
the site is http://www.spankystokes.com
Pep
You can add some css code (such as style=”padding-top:2px”) to adjust the height.
Susan
Where do you add this code? Mine shows up on the blog when I put it on.
Pep
If the icons show up, just add some codes to img tags, like below:
<img alt=’Twitter’ style=’padding-top:2px’ src=’REPLACE YOUR IMAGE URL HERE’/></a>
You can also replace 2px with any other height size.
John"Spanky"Stokes
Oh and how do I get the twitter button to work, yours does not work either
Pep
It works on my site
ViVi ✯ Bibzee
Great stuff you got there! Thanks!
Pep
Anna
I entered all the code and this seemed to work perfectly, except for the display of icons – I had only empty boxes where these shd have appeared – I linked to your picasa – I know nothing about code and I’m sure my error was simple but I don’t know how to diagnose it – any suggestions?
Pep
You should replace “REPLACE YOUR IMAGE URL HERE” in the code to your own icons’ url, such as “http”//xxx.xxx.com/facebook.gif”
Yadira
Yay! That rocks! Thank you so much!
Pep
You are welcome:)
Gilliom-Monsieur Bandit
Hello,
I just finished adding social media buttons to my blog with the help of your tutorial. It took me two afternoons to get it done, because I know hardly anything about all this and the theme I use was giving me some trouble (it kept adding a red border around every image (every icon), which I didn’t want… When I finaly managed to figure out how to get rid of that, the rest was a breeze.)
Thank you very much for your tutorial. Best one I could find!
If you want to see the results, check out: http://monsieurbandit.blogspot.com/
Cheers!
Gilliom
Pep
Hello Gilliom,
I’m glad my post could help.
Eric
hi your code really helps! though it took me quite some time to finish it
any way thanks!
Pep
You are welcome
Sally
I added all the code and I don’t have any error messages, but nothing showed up. I copied the location of the picasa icons, I’m not sure it that’s the problem but it’s not working at all. There’s not even a space where it should be. How do I make this work?
Pep
By default, these buttons will only show up in the post page. Did you only check the result in home page?
Sally
I did just check the home page. I tested it and if I make a new post it shows up, but not on the home page which is what comes up if you go to my blog. I don’t even know how to get to the post page unless I just made the post. Is there a way I can make it be on the home page?
Sally
How can I get rid of button I’ve added?
Pep
Just remove the code you added
Gaurav N
The official Blogger sharing buttons are also available now. follow http://abtevrythng.blogspot.com/2010/07/adding-bloggers-official-sharing.html which shows how to enable them at the correct place. on top right of the post
Pep
Thank you for your sharing.
mike
I’ve downloaded an icon pack and the buttons look great, but where would I find each button’s URL?
Pep
If you downloaded an icon pack, you have to upload them to your host or other web albums, such as Picasa first.
mike
Oh, I thought i could use them on my blogger blog.
Pep
You can, but you should upload your own icons first.