ADS

Advertissment / Recommendations

How to add Facebook connect to Blogger (deprecated)

All of you know that seems impossible to add Facebook connect to Blogger especially when you can’t upload file or even creating full HTML customized pages. or to implant Facebook connect to your website, you need to upload or create a cross-domain communication channel file called “xd_receiver.htm” under your domain, and I said Blogger don’t let you to do that . So how can we add it ?

Connect_white_large_long
To add Facebook connect into your blogs, you need to put a few snippets of  code in your template and create an application on Facebook. Those operations will take a couple of minutes then you are ready to write your own codes. (Visit Facebook Developer for more information).

Create an application

we start with the creation of a new application :
  1. Go to http://www.facebook.com/developers/createapp.php to create a new application.
    Set up a new application
  2. Enter a name for your application in the Application Name field (The same name of your Blog). And agree Facebook terms then “save changes”.
    Application Name
  3. Take note of the API Key, you'll need this shortly.
  4. Click the Connect tab. Set Connect URL to “Your_Blog.blogspot.com”. now “save changes”
    Connect URL 


Adding a few snippets of code to your template

Blogger-HTML-Edit1

Now go to your Blog Dashboard> Layout > Edit HTML :

  1. Look for this tag in the top of your template code source :

    <html 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' >

    and add the code : “ xmlns:fb='http://www.facebook.com/2008/fbml' ” 

    <html 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'>

  2. Put the following code just before </head> tag :

    <script src='http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php' type='text/javascript'/>

    PIC for step 1 & step 2
  3. Put the following code just before </body> tag : (Updated) 

    <script type='text/javascript'>
    //<![CDATA[
           FB.init("YOUR_API_KEY_HERE", " ");
    //]]>
    </script> 

    PIC for step 3
  4. Save changes. now you are ready to add Facebook connect to your blog.
    PIC for step 4


Add Facebook connect

Login-Button :
<fb:login-button autologoutlink="True" length="short" background="white" size="large"></fb:login-button>
Profile Picture :
<fb:profile-pic uid="loggedinuser" facebook-logo="true" linked="false"></fb:profile-pic>
User Name :
<fb:name uid="loggedinuser" useyou="false"/></fb:name>
Live Stream Box :
<fb:live-stream event_app_id="YOUR_APPLICATION_ID" width="400" height="500">
Comments Box :
<fb:comments width='480'/>
Fan Box :
<fb:fan profile_id="YOUR_PAGE_ID" stream="1" connections="10" width="300"></fb:fan>
For more help please visit http://wiki.developers.facebook.com/. as you can see it work correctly in my blog. try it out in your blogs on Blogger and don’t forget please to leave a link to your blog  to share your experience with Facebook Connect with other readers.

Related posts:

54 comments:

  1. Khalil HammamiJanuary 6, 2010 at 7:55 PM

    My New Blog "Electrcité SF" (FR) just launched. I used Facebook connect, take a sight http://electricitesf.blogspot.com/

    ReplyDelete
  2. JinJanuary 12, 2010 at 2:54 PM

    What shud i do if i'm using template :/

    ReplyDelete
  3. Khalil HammamiJanuary 26, 2010 at 2:47 PM

    Hi Sidharth,

    I recommend to add disqus http://disqus.com/ then go to "general" under your account on diqus and select twitter and facebook

    there is no need of knowing code it very simple enjoy it!

    ReplyDelete
  4. kokoyadiJanuary 29, 2010 at 5:04 PM

    i try to add facebook cocoyadi http://www.facebook.com/?ref=home#/pages/cocoyadi/273732909420?ref=nf

    in http://cocoyadi.blogspot.com/

    but can't do that pls. help me

    ReplyDelete
  5. Khalil HammamiJanuary 29, 2010 at 5:20 PM

    Go here if you want to add Fan Box of yur page on facebook in your blog http://www.facebook.com/facebook-widgets/fanbox.php

    or just flow steps just above

    and here a video how to add FB connect

    http://www.box.net/shared/94975c0zqm

    ReplyDelete
  6. Eduardo BurgosJanuary 29, 2010 at 9:10 PM

    Mmmm... se ve muy bien... Gracias.

    ReplyDelete
  7. DurichiewallFebruary 9, 2010 at 1:40 AM

    Thanks for sharing. I'll give it a try

    ReplyDelete
  8. HariharakumarFebruary 9, 2010 at 11:41 AM

    Good work but then when i comment using Facebook connect the comments are not stored in Blogger comment database, so that the comments remain permanently in Blogger blog posts.

    What ever you said may work as temporary solution unless Blogger itself comes with a feature like that to include facbook comments in blogspot blogs.

    Thanks that was a nice work-around to comment on blogspot blogs using facebook comment

    ReplyDelete
  9. christosFebruary 12, 2010 at 1:43 AM

    this article is SO AMAZING!!!! i really couldnt feagure out what to do with the crossdomain file. i wish facebook developer could explain it in such a simple away.can you please explain how to add a share button? i have added one that shows up the title of the article but not the content

    ReplyDelete
  10. Khalil HammamiFebruary 14, 2010 at 10:41 PM

    yes that's true they are stored in Facebook and to store them in Blogger you have to write some codes to get them from FB then send them to blogger

    that why I'm using Disqus you can use you profile on facebook to comment using the key your application on FB and synchronize them with Blogger

    ReplyDelete
  11. Facebook ApplicationsFebruary 19, 2010 at 1:48 PM

    If some one don't like to use Disqus ?

    ReplyDelete
  12. Khalil HammamiFebruary 19, 2010 at 2:11 PM

    at that use another comment system , use Blogger original comment system with no facebook or write your own code to synchronize your comment :)

    ReplyDelete
  13. Facebook ApplicationsFebruary 22, 2010 at 7:42 AM

    Thanks Khalil

    ReplyDelete
  14. AyushMarch 15, 2010 at 2:48 AM

    Hi there
    Your tutorial is amazing. All the widgets (ie. log-in box, connect button, live stream box) work just fine on my website, except the comments box. And it is the comments box that i wish to implement. My blog is at http://blog.thematchreferee.com

    Are you able to help? Please?

    ReplyDelete
  15. Diana RoseMarch 25, 2010 at 2:03 AM

    yes, this is the same question that i desperately look for an answer, please..help us

    ReplyDelete
  16. wmgeekApril 1, 2010 at 3:52 PM

    work flawlessly in my facebook clone video sharing site. It make my facebook clone even looks like a facebook template. Nice tutorial indeed! Please have a look and tell me what else can i add to make it looks like one (although i haven't finish my design) :)
    http://fbvids.com


    Cheers~

    ReplyDelete
  17. tyler78April 24, 2010 at 9:26 AM

    Great tutorial really. Thank you. Ive added comment box. Ive checked the box says "let me know when a comment added."(something like that)

    But when someone adds a comment, i didnt get any mail or message. Is that normal? What can i do to get notification when a comment added. I had to remove the comment box because of that. If there is way to do this, I'm gonna put this back on.

    ReplyDelete
  18. Khalil HammamiApril 24, 2010 at 10:36 AM

    thanks tyler.

    that's normal because the notification are desactivated facebook for all applications.

    ReplyDelete
  19. Gazali AhmadApril 29, 2010 at 10:16 AM

    Works like a charm. Finally got the Fan box too work using your code instead of the one provided by Facebook. It even got my Page_ID wrong.
    Good work and thank you very much.

    ReplyDelete
  20. Alex de BrantesMay 11, 2010 at 6:26 PM

    I keep getting an API Key error. I want to implement FB Login on my page, and it seems to be an epic fail at the moment. http://www.debrantes.blogspot.com

    ReplyDelete
  21. warnet69May 13, 2010 at 8:24 PM

    what should i do when it say "Canvas Page URL can only contain lowercase letters, dashes, and underscores"
    thanks

    ReplyDelete
  22. warnet69May 13, 2010 at 8:27 PM

    what does should i do when it say "Canvas URL" what that mean..
    thanks

    ReplyDelete
  23. onixroom.blogspot.comMay 28, 2010 at 11:21 AM

    How if i want to show my friends list to my blogger?

    ReplyDelete
  24. cindenianJune 9, 2010 at 1:11 AM

    Help me please.. why dont work on my blog. I'm using google chrome 5.0.
    http://cindenian.blogspot.com/

    ReplyDelete
  25. Khalil HammamiJune 9, 2010 at 6:46 AM

    sorry I'm little busy right now I have some exams to finish I will write soon as possible about the new way to add it very easy please check this link it will help you http://developers.facebook.com/docs/reference/plugins/login

    ReplyDelete
  26. SushilessonJune 11, 2010 at 6:51 PM

    Thank you for the info, I will come back to site again!
    http://sushiqueen.co.uk

    ReplyDelete
  27. TERMINATOR T0010July 9, 2010 at 12:44 AM

    GANIAL PERO Y PARA IDIMOAM ESPAÑOL? SPANISH?

    ReplyDelete
  28. TERMINATOR T0010July 9, 2010 at 12:44 AM

    IDIOMA ESPAÑOL? SPANISH

    ReplyDelete
  29. Harish KumarJuly 20, 2010 at 12:52 PM

    very super simple tips thank you .....it worked on my site navilog.co.cc

    ReplyDelete
  30. Mar-the-GreatJuly 27, 2010 at 11:29 PM

    I TRIED TO ADD THE COMMENT BOX BUT IT DOESN'T WORK..

    ReplyDelete
  31. Alexander SafiullinAugust 9, 2010 at 9:13 PM

    dAS

    ReplyDelete
  32. Dietrich DukeAugust 14, 2010 at 5:21 AM

    Facebook Connect pulls up a smallbox with Page not Found inside. Using Blogger and have moved the connect around the page to make sure it wasn't something in the code.

    All matches what you have on the site, but it for some reason doesnt work.

    http://morebreadplz.blogspot.com

    Thanks

    ReplyDelete
  33. Khalil HammamiAugust 14, 2010 at 5:42 AM

    thanks Duke. this way to add FB connect it still working but it is the old way and you know facebook is making changes all the time there is a new way to add it so easy and better

    I will write about very soon please stay in touch

    ReplyDelete
  34. Dietrich DukeAugust 14, 2010 at 1:42 PM

    ok. I look forward to the write up. Would love to get this goin asap :)

    thanks again

    ReplyDelete
  35. Khalil HammamiAugust 15, 2010 at 1:14 PM

    check it http://khammami.blogspot.com/2010/08/how-to-add-facebook-social-plugin-to.html

    ReplyDelete
  36. MarkcoreSeptember 21, 2010 at 7:23 AM

    I followed the directions and everything works but xmlns:fb='http://www.facebook.com/2008/fbml' is visable at the top of my page now how do I fix this?

    ReplyDelete
  37. william doustOctober 17, 2010 at 9:40 AM

    thanks for your tips and help - will look to implement in near future and so will follow you on twitter - many thanks ;-)

    ReplyDelete
  38. UungferiNovember 18, 2010 at 6:11 AM

    wow,..... nice information,.... thanks for share

    ReplyDelete
  39. mohammed hassanJanuary 4, 2011 at 11:42 AM

    محمد حسن

    ReplyDelete
  40. cadeaux pokerJanuary 18, 2011 at 11:16 AM

    i don't know if is my browser but your pics doesn't load very well.

    ReplyDelete
  41. sonamMarch 22, 2011 at 6:13 PM

    this doesnt work....

    ReplyDelete
  42. Far AwayApril 13, 2011 at 2:03 PM

    why i doesn't have the CONNECT tab?

    ReplyDelete
  43. Elvis SaraviaJuly 7, 2011 at 6:36 PM

    i tried the following nothing worked

    ReplyDelete
  44. Zergou Chikour SallahJuly 12, 2011 at 3:35 PM

    don't work for me
    i don't know why

    ReplyDelete
  45. Alz AlcantaraJuly 29, 2011 at 8:33 PM

    varia en proporcion

    ReplyDelete
  46. Justin ArokiarajOctober 14, 2011 at 5:18 AM

    Hi dude I tried out posting the codes that you gave me but when I am trying to click on the face book button I get this following error. 
    "Sorry, the page you were looking for in the blog My dear kutty pisasu does not exist."Can you help me out

    ReplyDelete
  47. Khalil HammamiOctober 14, 2011 at 6:28 AM

    Hi Justin
    this method not working anymore because it is the old one , facebook change their platform all the time

    use the way to add facebook plugin to your blog
    http://khammami.blogspot.com/2010/08/how-to-add-facebook-social-plugin-to_15.html 

    ReplyDelete
  48. Facebook Apps developmentMarch 19, 2012 at 7:34 AM

    Wow this site is really awesome and informational to me, i am also gonna share this site to my friends.

    ReplyDelete
  49. Facebook Apps developmentMarch 20, 2012 at 2:51 PM

    hmm this site is really awesome and informative to me, i am also going to share this site to my friends.

    ReplyDelete
  50. Custom Facebook ApplicationsApril 12, 2012 at 8:12 AM

    I am also gonna share this site to my friends.

    ReplyDelete
  51. sapnatvliveAugust 28, 2012 at 6:53 PM

    i can't understand this mathord

    ReplyDelete
  52. sapnaSeptember 2, 2012 at 10:01 AM

    grat8 info

    ReplyDelete
  53. TestSeptember 18, 2012 at 6:17 AM

    TEst

    ReplyDelete
  54. playkaroSeptember 25, 2012 at 8:31 PM



    Nice Post and really good work, thanks for the post


    www.PLAYKARO.com

    ReplyDelete