Blogger Tutorial: Add Social Bookmark butons to footer
I was talking with Jane from PetRescuerCentral.blogspot.com and she was interested in adding Social Network buttons to the bottom of her blogspot posts.
Us lucky Wordpress users can just add Sociable but in Blogger you need to do it with code, as far as I am aware… please correct me if I am wrong.
I wrote this tutorial a while ago but it was a little out of date so I have updated it.
——————————————————————–
Social Bookmarking sites are becoming a popular and successful way for people to bring traffic to their blogs.
After reading and starting to use Digg and Stumbleupon I decided I wanted my post footer to display the links for people to promote my posts using some of these sites.
A quick search on the web revealed a few tutorials but after trying various things I just could not get it to work. Eventually by modifying some code that I found and pure guess work it is now up and running with my Blogger Blog and it was pretty easy!
So I thought I would show you how you can add these useful links to your Blogger Post Footer.
Here goes…..
- Log into www.blogger.com and click on Layout for the blog you want to add this to
- Click on Template and then Edit HTML
- Make sure the first thing you do is Download Full Template and save it in a convenient place
- Make sure Expand Widget Templates is checked
- Then either scroll down the HTML text, or if you have Firefox us the Edit>Find in this page tool to find the text class=’post-footer-line post-footer-line-3′
- Hit return a few times to create a few lines of space (it makes it easier to see where to paste your code).
- Copy and paste this code below into the space you created:
<span class=’socialbookmarking’>
<small>Share This Post</small><BR/>
<a expr:href=’"http://www.stumbleupon.com/refer.php?url=" + data:post.url + "&title=" + data:post.title’ target=’_blank’><img alt=’Stumble This’ border=’0′ src=’http://www.feedforall.com/stumbleupon.gif’/></a>
<a expr:href=’"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title’ target=’_blank’><img alt=’Digg This’ border=’0′ src=’http://www.feedforall.com/digg.png’/></a>
<a expr:href=’"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title’ target=’_blank’><img alt=’Add To Del.icio.us’ border=’0′ src=’http://www.feedforall.com/delicious.png’/></a>
<a expr:href=’"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title’ target=’_blank’><img alt=’Add To Reddit’ border=’0′ src=’http://www.feedforall.com/reddit.gif’/></a>
<a expr:href=’"http://furl.net/storeIt.jsp?u=" + data:post.url + "&t=" + data:post.title’ target=’_blank’><img alt=’Add To Furl’ border=’0′ src=’http://www.feedforall.com/furl.png’/></a>
<a expr:href=’"http://www.technorati.com/faves?add=" + data:post.url + "&t=" + data:post.title’ target=’_blank’><img alt=’Fav This With Technorati’ border=’0′ src=’http://www.feedforall.com/technorati.gif’/></a>
<a expr:href=’"http://myweb2.search.yahoo.com/myresults/bookmarklet?u=" + data:post.url + "&t=" + data:post.title’ target=’_blank’><img alt=’Add To Yahoo MyWeb’ border=’0′ src=’http://www.feedforall.com/yahoo.png’/></a>
<a expr:href=’"http://slashdot.org/bookmark.pl?url=" + data:post.url + "&t=" + data:post.title’ target=’_blank’><img alt=’Add To Slashdot’ border=’0′ src=’http://www.feedforall.com/slashdot.gif’/></a>
</span>
These are just a few of the networks available. If you really want more then please let me know which ones and I will work out and add the code.
- Hit Preview to test that it’s viewing correctly and then Save Template and it should be working.
Easy customizations for your bar
- If you want to remove any of the Bookmarking sites them simply find the block of HTML and delete it.
- Also if you want to rearrange the order of the icons you can simply cut and paste these blocks of HTML and stack them in the order you want.
- If you have an alternate image that you would like to use for any of the icons then find the line src= for the correct service and change the url in the ‘image url’ to point to your new image url.
I hope this tutorial has been helpful.Please feel free to comment…..
….. and if it crosses your mind then maybe you could submit this article to Stumbleupon, Digg It or submit to one of the other sites in my footer bar.
Thanks to FeedForAll.com for the social bookmark icons.
Popularity: 93% [?]
Related posts:
- Social Bookmarking Footer - Tutorial for Blogger (Actually works!) Social Bookmarking sites...
- Still in Vermont, thinking about my future… I am still in Vermont...
- I found this interesting...
- Help……. Social Bookmarking ****UPDATE**** Woo Hoo,...
May 29th, 2008 at 7:53 pm
So, I tried it, followed your instructions to a T and got this error when I hit preview:
We were unable to preview your template
Please correct the error below, and submit your template again.
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Open quote is expected for attribute “{1}” associated with an element type “class”.
Here is my code for that section:
Share This Post
Many thanks!
May 29th, 2008 at 9:11 pm
Hey there,
Sorry about this. I will try and look into it tomorrow and send you an email with the amended code.
July 3rd, 2008 at 2:53 am
I also get the error trying to paste the code. Have you found a solution? Email me if so please. Thanks for a great site.
July 3rd, 2008 at 2:09 pm
Sorry Guys!!! I forgot to be honest….. I will try and address this tomorrow and see what it is doing wrong.
I think Blogger was updated soon after I posted this, or maybe I mis copied the code from it’s original place.
I’ll email you both individually when I have a solution.
July 4th, 2008 at 9:22 am
Hi Forest Park,
Enjoy the 4th. I look forward to seeing the corrected code!
~the GURU
July 26th, 2008 at 4:26 pm
Any news of updates?
~the GURU
July 27th, 2008 at 10:22 am
Hey Murf, Jonas and Small Biz Guru…
I am really really sorry for the delay in this, I totally forgot about it twice!!
I have finally updated the code and tested it on a blogspot blog and it now work…. so just follow the tutorial again and it should be ok..
Any problems at all email forest.parks@gmail.com….
again, I am sorry for taking so long.
July 27th, 2008 at 2:57 pm
Word Forest!
No worries. Good things come to those who wait!
Thank you.
I hope it works.
~the GURU
July 27th, 2008 at 3:05 pm
Forest,
This is the message I got:
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Open quote is expected for attribute “{1}” associated with an element type “class”.
~the GURU
July 27th, 2008 at 3:15 pm
Hey guru, I have sent you an email… not sure why this is still wrong
August 1st, 2008 at 5:01 pm
Hey, I was so happy to find your code through a google search, but very sad that I got the same error message.
(Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Open quote is expected for attribute “{1}” associated with an element type “class”.)
Any ideas of why that is? If you have a solution I would be eternally grateful.
August 6th, 2008 at 3:58 pm
Hey I tried this too but it wont work
my website is http://www.yourfreeitouch.blogspot.com
August 16th, 2008 at 8:41 am
Alright guys. Ive been researching this for quite some time. I used Forest Parks’s script to get it working.
Here is the trick. When you copy and paste the script the quotes gets changed and the editor in blogger changes the quotes to a left opening quote. You need to manually edit it.
Contact me for more
August 19th, 2008 at 3:09 pm
Hey Tapan,
Thanks for addressing this issue.
The comments on this post keep going to my Spam so I will try and keep an eye on them.
August 21st, 2008 at 8:14 pm
Hey ,
Do you know how to generate a script which shows the number of diggs or stumble on an article. Check these out for example here: http://frugaldad.com/2008/08/21/how-to-go-broke-being-frugal/
Thanks
Tapan
September 12th, 2008 at 11:18 am
Has anyone gotten this to work on Blogger? If so could I get the recent code?
September 17th, 2008 at 12:24 pm
Hi Efferri, I don’t know why mine isn’t working but there are some help in these comments….
Hey Tapan, I’m sorry I am not sure how to do that, I know you can get a digg this button for blogger which shows the amount of diggs. Just do a search for digg button for blogger.
October 8th, 2008 at 12:58 pm
I am indeed getting the same error but I dont understand:”When you copy and paste the script the quotes gets changed and the editor in blogger changes the quotes to a left opening quote. You need to manually edit it” Sorry, I don’t see the change so I don’t know what to manually edit Left opening quote?
October 8th, 2008 at 1:02 pm
Hey maddogg…. Tapan solved the issue he says:
“Alright guys. Ive been researching this for quite some time. I used Forest Parks’s script to get it working.
Here is the trick. When you copy and paste the script the quotes gets changed and the editor in blogger changes the quotes to a left opening quote. You need to manually edit it.
Contact me for more :)”
I think if you open the two docs you will see the ” appearing as something else at certain points in the code…. I don’t know whey this does not happen to me! I think it’s because I use a mac!