Adding Facebook Social Plugins to your Blogger Blog

Facebook is all the rage these days and adding it to your blog is a good way to drive extra traffic and make your site more "social".

However, it's not very simple for new blogger to add the various Facebook social plugins to your site.

This guide will hopefully change all that!

Details after the cut



1) First we need to get a Facebook API key. To do this we go here and register our site. You must have a Facebook account.

http://developers.facebook.com/setup/



2) We fill out the form as shown below.

Fill out the name of your blog and then the URL/LINK eg

http://tvtechgirl.blogspot.com/

Make sure you have the http:// and the trailing /



Then click Create

3) This will take you to your Applications Settings Screen. If all goes well you should see a screen like this.



Make a note of your API ID.

Under this you will see a snippet of Code. Save this for later.



4) Now we need to make some change to your Blogger Template. Goto Design, Edit HTML



5) Now we need to add the following to your Template

xmlns:fb='http://www.facebook.com/2008/fbml'

At the very top of your blogs template you will see some code like this.

<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

You need to add the following inside the last > part

xmlns:fb='http://www.facebook.com/2008/fbml'

so that your code looks like this

<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml'>



Press the Save button to Save your Template.

6) Next we need to add the Facebook Script to our code. In Step 3) you were given some example code. Copy the Code as shown below. Only Copy the Highlighted parts



7) Now we need to paste this code into your Blogger Template. Goto Design, Edit HTML



Locate the opening <BODY> Tag, it should look like <BODY> or <body class='loading'>

Paste the code immediatly after it as shown below.



Press Save.

8) Ok, if you have made it this far, your blog is now ready to install the Facebook Social Plugings that you want.

9) First we go to the Facebook Social Plugins Page and decide which Plugin you want to install.

http://developers.facebook.com/plugins



10) For the purposes of this FAQ I'll be installing the Recommendations Plugin but the instructions are VERY similar for all of the others.

11) Click the Recommendations Plugin. You will be taken to the following screen.



12) Fill out the Form, use your blogs link as the Domain, and configure your settings. When ready click the GET CODE Button.



13) When you click the Get Code button, you will get a popup.



14) Copy the XFBML code eg for me it's

<fb:recommendations site="http://tvtechgirl.blogspot.com/" height="400" font="arial"></fb:recommendations>

15) Now We need to add this code as a Widget. Goto Design, Page Elements and click the Add Gadget link.



16) Select HTML/Javascript Widget.



17) Put in a title and copy the XFBML Code into your Widget.



18) Press Save and View your blog, you should now have a nice Facebook Recommendations Widget.



You can add other widgets the same way starting back from Step 9 and repeat the process.

I hope you have found this useful.

Any questions, ask in the comments.
Posted by at
Labels: , , , ,

29 comments:

  1. Wow Tbn3 July 2010 at 14:25

    awesome..
    thanks Sharon

    ReplyDelete
  2. Voleibolpardillo8 July 2010 at 12:39

    I can´t do the first step, don´t knw why?

    ReplyDelete
  3. TheSpoilerGirl8 July 2010 at 12:41

    What link are you putting in the box?

    Make sure you have the http:// and the trailing /

    ReplyDelete
  4. Riyu Kh23 July 2010 at 09:45

    I can only see header. nothing more. whats d problem

    ReplyDelete
  5. Ash Srivastava25 August 2010 at 07:16

    I see that the blog title 'TV Tech Girl' shows up in every recommended post. Is there a way to remove the Blog title in the recommendation plugin?

    ReplyDelete
  6. Ash Srivastava25 September 2010 at 08:34

    Thanks! But I am afraid if I take it out of my template then Google will not Index it with those words. I guess for now I will leave it in. Thanks for your help.

    ReplyDelete
  7. Repentersprite2 October 2010 at 18:04

    like this :
    <html expr:dir='data:blog.languageDirection'

    ReplyDelete
  8. Repentersprite2 October 2010 at 18:07

    i can not add ur code:
    xmlns:fb='http://www.facebook.com/2008/fbml'
    i use old template blogger.my blog cant save the html code,is it the problem?

    ReplyDelete
  9. Melita Harmon24 October 2010 at 01:19

    Hi I am stuck on step 7. I don't see the body opener at all. I am using the "Simple" template by Josh Peterson. Please help!

    ReplyDelete
  10. Melita Harmon27 October 2010 at 01:16

    Do you think I can email you my HTML so you could see? By the way I have an about gadget on my layout and "show on this blog" is checked but it doesn't show on the blog. Do you know anything about that too? Thank you for being such a big help!

    ReplyDelete
  11. Melita Harmon27 October 2010 at 05:53

    Thanks again, I sent it to you from my gmail acct. The subject is Melita Harmon-Blog Help.

    ReplyDelete
  12. Increase RSS27 October 2010 at 17:12

    awsome post thank you

    ReplyDelete
  13. Venu Prakash3 November 2010 at 09:58

    awesome post Sharon. Thanks :)

    ReplyDelete
  14. Brigit Hegarty29 November 2010 at 16:14

    HI, I have done exactly as you instruct but it comes up with this message...
    'We were unable to save 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 that all XML elements are closed properly.
    XML error message: Element type "html" must be followed by either attribute specifications, ">" or "/>"....'

    Do you have any suggestions please?

    Thanks

    Brigit

    ReplyDelete
  15. Philip Ortega9 December 2010 at 12:08

    Can you please tell me how to display all facebook users who already liked my webpage. That's because after I followed all the instruction you mention above my button got back to zero, meaning the like buton won't display 100 facebook users who had liked me? Can you please help me?

    ReplyDelete
  16. Mr Ait Ahmed21 December 2010 at 19:30

    thankssssssss
    www.psoutiles.blogspot.com

    ReplyDelete
  17. Mr Ait Ahmed21 December 2010 at 19:31

    ould you add haw to add live streami in blogger like this blog
    www.tvgoo.blogspot.com

    ReplyDelete
  18. Themarieltan31 December 2010 at 19:56

    hi! how do the like button works? is it if you press the like button on a single post it automatically likes everything else? how do you place them?

    ReplyDelete
  19. Syasya17 March 2011 at 09:17

    how do i verify my account ?

    ReplyDelete
  20. Hamza Malik28 March 2011 at 22:00

    Hey Sharon,

    I'm also using Facebook plugins but I don't use the API key or anything :S

    E.g. I'm using the recommendations for my blog but all I did was enter the domain URL of my blog and Facebook gave me the recommendations box.

    Any benefits of registering your blog as an app on Facebook then? Because I can get all the plugins without doing that.

    Oh and if you wanna check it out, head to either http://thetrueperspective.com or http://fizzwire.thetrueperspective.com to see my recommendations box and like buttons that I'm using.

    ReplyDelete
  21. TheSpoilerGirl28 March 2011 at 22:13

    Hamza,

    I don't think all plugins require the API but it's certainly needed
    when you use the XML FB Schema code.

    ReplyDelete
  22. Hamza Malik29 March 2011 at 11:50

    What's the XML FB Schema code? Explain please?

    ReplyDelete
  23. jeromedeguzman2 May 2011 at 08:57

    Social attraction and efficiency are the best words to describe disqus and how useful is it for SEO specially.

    SEO company in the Philippines

    ReplyDelete
  24. TheSpoilerGirl18 May 2011 at 12:56

    You're welcome

    ReplyDelete
  25. Anonymous21 July 2011 at 21:27

    Excellent info, thanks!! For a novice like me, I've managed to add two Facebook plugins to my blog, a Like one and a Recommendations one. Lifesaver, thanks again!!

    ReplyDelete
  26. shedsafe26 July 2011 at 17:02

    have an about gadget on my layout and "show on this blog" is checked but it doesn't display on the blog. Do you understand any thing about that too? Thank you for being such a large-scale help!

    ReplyDelete
  27. Holly Renee5 August 2011 at 02:58

    Thank you so much for this post! I've tried everything to get that stupid button box to work on my blog, but it wouldn't. After reading your post, it finally worked. Thanks a bunch!

    ReplyDelete
  28. Anonymous20 September 2011 at 07:57

    i followed the instruction i created an application, but it doesnt lead me to the snippet code, i cant locate it either.. help.. thanks

    ReplyDelete
  29. Unknown6 December 2011 at 22:03

    THANK YOU THANK THANK YOU :D Couldnt do this with out you i been trying for months.. Ohh Thank you x

    http://lolitasfashionideas.blogspot.com/

    ReplyDelete

Subscribe to: Post Comments (Atom)