Wednesday, September 8, 2010

Using Facebook Javascript SDK in your Blogger blog (Like button example)

Before you go any further you must read (and implement) my post about open graph:

Teach your Blogger Blog to speak Facebook's open graph protocol

Open your blogger design interface and goto edit html and find the body opening tag (search page for <body). In another browser window open this reference url on facebook's developers site: http://developers.facebook.com/docs/reference/javascript/ copy the code there and paste it right after the body tag in your blogger template. The code snippet you just pasted should contain the following text: appId: 'your app id' (if it doesn't then facebook might have changed something and this post might not be relevant anymore). 

If you properly followed the previous post (teach your blogger...) then you should have a Page on facebook for your blog by now, Go to it. We need the ID of that page, we can copy it from the address bar of our browser:


See the yellow marked number thats the ID of the page, copy it and paste it instead of your app id text (leave the single quotes in tact) in the code snippet we copy pasted from facebook. Save the template! :)

Time to add a like button to each post but first, make sure the Expand widget template checkbox is checked in your template editor:


I've decided to place the like button beneath the title of each post and at the end of it, the exact position in the template depends on your blogger's template, when you locate the desired spot, paste the following code in it:
<!-- facebook local post like button -->
     <b:if cond='data:post.link'>
       <fb:like expr:href='data:post.link' layout='button_count' show_faces='false' width='200'/>
     <b:else/>
        <b:if cond='data:post.url'>
       <fb:like expr:href='data:post.url' layout='button_count' show_faces='false' width='200'/>
        <b:else/>
       <fb:like expr:href='data:url' layout='button_count' show_faces='false' width='200'/>
        </b:if>
     </b:if>
<!-- facebook local post like button -->
And that should be it. If everything went right you should now see a like button on your blog, try it... and please try my button too ;-)

22 comments:

  1. Hi :)

    mmmm why using this conditions while we can just use the like button directly from the FBML



    and it will detect the current page by itself !?

    btw thx very much, i used your open graph code in my friend blog :)

    ReplyDelete
  2. OMG, it worked! thank you so much, yaniv, for posting these fabulous instructions. i had given up and you resurrected my interest.

    a couple minor detail questions for you:

    my like button doesn't align in the same place at the end of each post. any way to format it so that it's always left-aligned with some top padding? any code i've tried to add is rejected.

    also, i don't understand the need for a facebook page for my blog. i created one as a placeholder for the purposes of this tutorial, but could i not just use my regular facebook page?

    again, thanks so much. i'm amazed i got it to work!

    //a

    ReplyDelete
  3. Ashley,

    About the formatting issue, its probably not the like button's fault but rather something in your blog's css.

    Putting your blog on facebook's open graph allows for better control over how the content will appear on facebook (among other things) and should yield additional benefits in the future I'm sure...

    I had a look at your blog, I'm no expert, but you have some wonderful work there! :)

    You should check out this FAQ: http://www.google.com/support/blogger/bin/answer.py?hl=en&answer=58317 and change your blog's dns to something more pro like blog.ashleywestleonard.com

    can help you with that too if need be :)

    ReplyDelete
  4. thanks so much, yaniv - no need to be an expert to know what you like! it's nice to hear.

    good idea about creating a cname. i've followed the instructions you included and will just have to wait a few days to see if i jacked it all up or not.

    thanks again.

    ReplyDelete
  5. hello.. http://computertweaks.blogspot.com is my site.. i placed the code for like button for posts but its not working.. plz suggest me...

    ReplyDelete
  6. Hi there...

    I'm struggling, please help! :(

    My app does not recognize any of the conditions!!!
    like ...

    Please help, what i'm missing??

    Thanks a lot,
    Monica

    ReplyDelete
  7. Sorry I was absent for a while, Srikanth Rao and Moni please post more details and I will assist.

    Yaniv

    ReplyDelete
  8. Hi Yaniv,


    No problems implementing open graph following your excellent tutorial.

    I'm curious, though, if you have any idea why fb insights doesn't seem to recognize likes for my individual posts. Whenever someone likes one of my posts, although the buttons keep separate tallies, if I look at fb insights these seem to appear (maybe) in the total likes for my overall blog.

    Cheers,
    Michael

    ReplyDelete
  9. @Michael MacDonald: I looked at your RoadRunner blog, first I must say it looks great :) I didn't see any like box in there but your comment have made me go and look at my own insights and indeed the likes are missing from there too. I will investigate the matter further and report here shortly.

    ReplyDelete
  10. Yaniv,


    First, thanks!

    Second, you didn't see any like boxes?? There should be one for the entire page at the top of the sidebar (under 'subscribe') as well as one under each individual post. I've checked this on three Windows browsers and three Droid browsers, and all the buttons appear in each.

    Third, If anyone is interested, here's a good article on seemingly incorrect counts on like buttons:

    http://bit.ly/hDCxpI


    Cheers,
    Michael

    ReplyDelete
  11. Hi. This works for me, but could you explain these parts a little bit?

    data:post.link
    data:post.url
    data:url

    ReplyDelete
  12. @Michael MacDonald: Hi, Looked at your blog again, I see numbers on the like boxes now, but they weren't there earlier. I haven't had time to check the facebook stats though :(

    ReplyDelete
  13. @Max Munro: these are attributes, telling the blogger engine to embed certain data in the resulting page. See more details here: http://www.google.com/support/blogger/bin/answer.py?hl=en&answer=47270

    ReplyDelete
  14. Hi! I tried to follow your instructions.. But I had a bit of a problem. BTW I placed my code below div class='post-header-line-1'. Every time I click the Like/recommend button here's what happened

    1. I don't get a comment box.
    2. The link did post on my wall but it didn't had thumbnail or content. just the link.

    Can you help me please?
    My blog is http://gottotravel.blogspot.com/

    ReplyDelete
  15. @Keith: Hi :) please follow the instructions in this post to add open graph protocol metadata thinggies to your blog.

    as for your first problem, I'll need more details...

    ReplyDelete
  16. uhm for example your like button when clicked shows a popup where the user can put comments. Mine does not. But if I use this code
    (script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like

    expr:href='data:post.url' layout='box_count' show_faces='true' width='450'/)

    it does show. I don't know what's wrong with my iframe.

    with regards to my second problem I'll try to read your other post.. Thanks so much..:)

    ReplyDelete
  17. Hi yaniv. I replaced my iframe code with the code you provided above. worked great and the comment popup appeared. So I guess I'll use your code instead. But the other problem is still there.

    I tried using your meta code on the other posts but I still can't get the right post on the facebook wall. Just getting user likes blah blah.. no thumbnail and no content.

    ReplyDelete
  18. @Keith: You have a very nicely designed blog :) I looked at its source, facebook open graph tags are definitely not there. Your goal is to have the open graph meta data appear there, as shown in the other post I mentioned.

    ReplyDelete
  19. This comment has been removed by the author.

    ReplyDelete
  20. Hi! I have just tried your tutorial for the like button...
    It works but not on all the posts. And also on facebook, when it says: "John Doe liked a link: Valentine's Blog" Under the link it includes a text from the blog which is actually a comment posted by one reader. You can see the dufference if you "like" my two latest post.

    http://valentineavoh.blogspot.com/2011/07/eastpak-street-shooting.html
    http://valentineavoh.blogspot.com/2011/07/flying-anna.html

    What should I do?

    Thanks a lot!

    ReplyDelete
  21. hi, thanks for all your article :D

    but i dont understand tu put this code :














    please can you explain where it should be paste ??

    thanks a lot!

    ReplyDelete
  22. This comment has been removed by the author.

    ReplyDelete