A little flavour of what's in store...

Friday, September 07, 2007

How to add Facebook social bookmarking icon and script to your Blogger articles

SEO Tip - How to add Facebook social bookmarking icon and script to your Blogger articles:

I was determined to discover how to achieve this, given the popularity explosion over Facebook. Testament to this is the fact that the BBC now add a similar bookmarking function on all their online news stories.

It's taken a while to get it working by a lot of trial and error, but now that it works, I'm determined to share 'how to' with you.

I've had to create images of the code just to avoid a lot of tedious open and close bracket typing so watch out when typing in the code yourself.

Firstly, you'll need to go to your template in Blogger and edit template. Back up your present version first (just in case) and then expand widgets to show all the code.

Next you'll need to scroll down the code until you find 'quick edit pencil' (see example below).


Enter the additional lines of code as shown.

Next, you'll need to enter this script after the close bracket:


Finally, you'll need to close bracket the span e.g. /span (inside open and close brackets)

Now all you need to do is replace the line - http://purple13.blogspot.com with your own blogs URL.

Save changes - it should validate ok. If it doesn't, go back and check you've not missed a bracket etc and try again.

That's it. An easy way to add a Facebook social bookmarking widget to your individual blog articles.

Comments and links to appreciated. Feel free to use the image url or create your own.

Like this SEO tip? Jump to the last SEO article on this blog - click here

26 comments:

Jarrod Hayes said...

Brilliant!

Jarrod Hayes said...

Can you speculate on how I can get this to bookmark the URL of the post rather than just the blog?

Fabulous Photo Gifts said...

Hi Jarrod
Thanks for stopping by - I'm glad you were able to find (kind of) what you were looking for.

It took me ages to track down this how to so my first thought was just to share it. If I was looking, then so were others!

I'm no closer to getting my 'fix-it' to bookmark specific articles though. You could try posting a question in the discussion forums on Blog Catalog - its a pretty helpful bunch I've found. I just haven't had a moment to ask myself!! (too busy with the photo gifts this time of year).

Good luck and don't forget to share if you find out.

Linda Margaret said...

Thank you. I plan to try this when I get back from Poland. Very nice of you to share.

gdb said...

i've been trying to do this for weeks.......thanks

Unknown said...

While hunting for this i discovered a url to do specific blogs.

a href="http://www.facebook.com/sharer.php?u=xURIx&t=xTITLEx"/>

replacing xURIx and xTITLE with the blog entry details.

You might be able to fit htis in somewhere and get some automativ way to fill in those details.

Thanks for sharing....i have a long journey ahead getting many of the similar service buttons.

Unknown said...

Hey, I've tried to add in this code with minimal success. I'm not experienced in HTML, so my difficulties are likely do to that lack of experience, but it would be great if someone could be more specific about where to add the new code (in relation to the quickedit pencil) as well as maybe post a copy and paste-able version of the complete code.

I think spacing and stuff might be an issue for me too. Can you be clear about that?

I know where to sub-in my own blog's address, so that's fine if you leave yours in when you post all the code.

Thanks so much for the how-to! Any help is greatly appreciated.

Marketplace Chaplains Europe said...

To link to the url of a post rather than the generic blog; use the following code Jarrod...

http://www.facebook.com/sharer.php?u=<$BlogItemPermalinkURL$>&title=<$BlogItemTitle$>

Hope that helps!
Jonathan
http://www.mchap.co.uk

Fabulous Photo Gifts said...

Hi Mchap

Thanks for stopping by and leaving such a helpful comment.

Regards

Jonathan - Fabulous Photo Gifts.

P.S Did you know this is one of the most visited posts i've ever written - thank you to everyone who visits - I hope you found it useful.

Justin said...

Thanks for the post. I've been entering in the code just like you said. I even did a view source on your blog and copy, pasted and edited, but 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 "url" must end with the ';' delimiter.

Below is exactly how it is in my template editor. I can't find the errors?

Any ideas??

(I took out the first bracket "<" of each line of code and replaced it with "~" so it would all show up in the post.)

~!-- quickedit pencil -->
~b:include data='post' name='postQuickEdit'/>
~/span>
~span class='submitbuttons'>
~a href='http://www.facebook.com/sharer.php?u=http://jyoungmusic.blogspot.com'> ~img alt='Facebook' border='0' src='http://i188.photobucket.com/albums/z116/wandadog13/blog_icons/facebook.gif'/> ~/a>
~/span>
~/div>

Ted said...

This is brilliant advice. Thanks a lot!

Fabulous Photo Gifts said...

Hi Ted - thanks for stopping by.

Hope that helps - I tend to post such articles as and when I discover how to do these things myself.

One big learning curve eh?

Cheers - Jonathan.

Fabulous Photo Gifts said...

Hi Justin

Sorry - In such matters I'm a cut and paste man myself. If I can't get it to work, then I usually go back to the very beginning and start again.

Double check you're not missing a character in your icon urls or a closing " speech mark.

They're the usual culprits.

Anyone else help Justin out here?

Jonathan.

Sandy Montgomery said...

Can you make it so that the script can be copied and pasted? I can't do it the way it is at the moment. I tried typing it in just as written but it didn't work.

Do I include the numbers and the dash before each line?

Fabulous Photo Gifts said...

Hi Sandy

I don't think you need to include the line numbers - the dashes are just the line wrap-around (as I recall).

It wasn't possible to do a copy and paste because I found that certain script characters weren't interpreted properly.

If you're struggling, you might try to use a service like 'share it' which places one all-sharing button on your posts.

Good luck and let me know how you get on.

Perhaps see you over on Twitter? http://twitter.com/fabphotogifts

Cheers - Jonathan

Anonymous said...

Greetings,

I have a question for the webmaster/admin here at purple13.blogspot.com.

Can I use part of the information from this post above if I give a link back to this website?

Thanks,
Harry

Fabulous Photo Gifts said...

Hi Harry

Please feel free (with a link back).

Thanks for stopping by

Jonathan

Anonymous said...

Hello there,

Thanks for sharing the link - but unfortunately it seems to be down? Does anybody here at purple13.blogspot.com have a mirror or another source?


Cheers,
Jules

Fabulous Photo Gifts said...

Hi Jules

The post was written a long time ago.

If you're using Blogger, then the new templates / admin panel have a new option for adding bookmarking / sharing links with each post.

The 'share' buttons only show up when someone actually clicks on that posts title - not when it's in the main page of latest posts.

I've started being a lot more careful when publishing links on twitter and facebook etc that the link is to the article and not just the blog main page.

Hope that helps.
JOnathan

Anonymous said...

Greetings,

Thanks for sharing the link - but unfortunately it seems to be down? Does anybody here at purple13.blogspot.com have a mirror or another source?


Thanks,
Harry

Netanya Carmi said...

I changed the code successfully - was VERY proud of myself as I've never done anything like this before - but like the previous poster said, the image has been deleted from Photobucket. I didn't understand your response to pp (Jules) about what to do instead. Please clarify.
Thank you!

Anonymous said...

Hey,

Thanks for sharing this link - but unfortunately it seems to be down? Does anybody here at purple13.blogspot.com have a mirror or another source?


Thanks,
James

Anonymous said...

Hi,

This is a inquiry for the webmaster/admin here at purple13.blogspot.com.

Can I use part of the information from this blog post above if I provide a backlink back to this site?

Thanks,
Thomas

Fabulous Photo Gifts said...

Hi Everyone.

Sorry if links are broken - it's an old post.

Try your own images (if it's image links).

As far as sharing, that's what it's all about - please feel free to share / link to etc - a link back to here would be very nice of you all.

Good luck and glad you found it useful.

Jonathan.

Anonymous said...

Hi,

I have a message for the webmaster/admin here at purple13.blogspot.com.

May I use some of the information from this post right above if I give a link back to this website?

Thanks,
Daniel

Fabulous Photo Gifts said...

LISTEN VERY CAREFULLY - I WILL SAY THIS ONLY ONCE....

PLEASE FEEL FREE TO USE ANYTHING FROM THIS POST - JUST PROVIDE A LINK TO THIS BLOG AS THE SOURCE.

MANY THANKS.

JONATHAN.