ProWorks Blog

Add Advanced Javascript SDK and FBML Facebook Like/Recommend Button Features To Your Website

By  |  Wednesday, April 28, 2010  |  , ,  |  42 comments

fb_likebutton_21After playing with the iFrame version of the Facebook Like Button Builder I wanted to see what the Javascript SDKversion gave me in terms of extra functionality or control. In other words, why would I ever use it over the iframe version which is super-simple?

Get it Into Your Template

fb_like_fbml_1I found a great tutorial from HyperArts Web Design that goes over the entire process of getting the Javascript FBML Like Button installed into your WordPress theme: " How to Add Facebook's Like Button & Social Plugins to Your Web Pages & WordPress Posts".

They go through the entire process of creating a Facebook Application, The extra Open Graph meta tags that you need in your template, and the html/script to add into your post and page templates.

This is an awesome tutorial, so no need for me to re-invent the wheel. Go check it out. Especially if you are using WordPress (although others can glean enough to use it on their own web sites/blogs). If you prefer to simply install a WordPress plug-in and you're up to the latest version of WP, then check out this as well: WordPress Facebook Social Plugins List.

Added Features of the Advanced FBML/Javascript SDK Like Button

#1: The ability to add a comment to a "Like" or "Recommend" click on a post. This will post a new item to the wall of the person who liked it which is much more visible than the smaller "Like" text on their profile.

(Try this out on this post at the bottom of this post above the comments area...)

fb_like_fbml_2

Here's what it looks like on my profile:

fb_like_fbml_3

And in the News Feed (note the regular "Likes" aren't there):

fb_like_fbml_4

#2: The ability to add targeted meta tags. The Open Graph meta tags include detailed location and contact information. I'm not sure exactly how that's used at this point, but I'm guessing that it will allow Facebook and others to make more targeted recommendations to people in your social graph. Location is a big factor in that. fb_like_fbml_5

#3: Admin access to the "Liked" page and the fans. Not totally sure what I think of this yet, and its super confusing to see liked pages mixed in with your Fan Pages initially.  For better or worse you get a mini "like page" admin area to see who is liking your stuff.  It has a wall, so I'm guessing you can update fans of the page in their news stream.  Not sure as it didn't seem to work for me.  However, I'm an admin so they may filter it out for me.

New pages in "Ads and Pages" area:

fb_like_fbml_6

The new "Like" page:

fb_like_fbml_7

#4: More control over styling. The iframe is, well, an iframe.  The FBML method gives you more control over the height of the widgit and the general styling of the text, etc.

That's all I've found so far.  Was it worth it?  I think so if for nothing else the comment feature.  That increases visibility and is pretty nice.  And it didn't take to long to implement so if you have an extra 30 minutes to an hour and want this, I'd say go for it.  Or get your web developer to do it.

42 comments for “Add Advanced Javascript SDK and FBML Facebook Like/Recommend Button Features To Your Website”

  1. Posted 5/12/2010 at 6:38:50 AM

    Are you trying to put it on WordPress or another platform?

  2. Posted 6/8/2010 at 9:34:30 AM
    Gravatar of Erika

    Hi there! I've added the iframe box to our website--super easy! BUT, the "like" count is the same for every content page on our site. I was hoping for our website viewers to be able to "like" articles individual. For example, an article about an upcoming event might have 35 people like it, while an article about a news story might have 17 people like it. Is there any way to have the "like" button tabulate individually for different pages?

  3. Posted 6/9/2010 at 6:56:22 AM

    Hi Ericka,

    You should be able to set the URL either in code or manually for the iFrame by setting the "href" param in the URL that the iFrame builder gives you.

    In this example see the "href="? Everthing after that and before the "&" is the URL that Facebook will "Like" when this is placed on the page. So replace the www.proworks.com with your own URL.



    Any slashes need to be escaped. Basically slashes need to be replaced with "%2F".

    Does that help?

  4. Posted 5/15/2010 at 8:36:48 PM

    Wordpress and since this post I've obtained success!! Thanks Jason for your reply. I've added Recommend buttons, comment boxs, login and more!!! I'm also using a facebook Like plugin that works really well. You can find the RECOMMEND button on all my posts and the comment box on most of my tabbed pages. For anyone that wants to stop by and check things out http://www.islandconsultingcorp.com

    If you are a rookie like me in this stuff, but you submerge yourself in it and do your homework, you will succeed. What one man can do another man can do!!

  5. Posted 6/9/2010 at 6:57:04 AM

    Here's that code:

    <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.proworks.com&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

  6. Posted 5/17/2010 at 6:52:16 AM

    Great!

    Glad you figured it out. Yes, this stuff isn't rocket science. But it can be tricky. :)

  7. Posted 5/11/2010 at 8:34:46 PM

    I've been looking over the Hyper arts post. I'm getting lost somewhere, but the issue is mostly operator error. I managed to put a like button on my site but not with comments. I used the share button for the rest of my site. I'm going to give hyper arts another crack and try to get this done. Thanks

  8. Posted 6/29/2010 at 10:24:46 AM
    Gravatar of Rafael Dourado

    Jason, I am trying to implement a like button in a tab based application. The normal FBML tags like fb:swf all works, but fb:like tag do not. An error saying that fb:like is unknown show at the bottom. Do I have any idea of what could be wrong?

  9. Posted 5/30/2010 at 7:56:47 AM

    hi i from peru... im setup up this like plugin for JOOMA 1.5 .. check out my webpage... i hope i can finish as soon as posible xD... nice post

  10. Posted 5/30/2010 at 11:14:12 AM

    Thanks Ricardo!

  11. Posted 7/24/2010 at 6:35:35 AM

    Hi! Awesome tutorial the one you've linked! I finally got it working on my blog thanks to you! =D But... my theme is a dark one, and I can't find anything about customizing colors, so if someone comments, the grey text almost blends with the background... any ideas?

  12. Posted 7/24/2010 at 9:24:04 AM

    Rafael: Is the tab application on a fan page or on your web site?


    Johnny C: If you inspect the button of FireBug (in FireFox) you will see some CSS classes you could try to style.

    There is a span around the grey text called "connect_widget_text". You could try styling that in your CSS stylesheet.

  13. Posted 7/24/2010 at 10:56:06 PM

    yeah, I gave firebug a try and actually got to make it look nicely on my blog, not only fixing the dark text. But no matter what I do, nothing seems to stick. I've customized the following:

    /*********
    .fbConnectWidgetTopmost {
    border-style:none;
    }

    .lightblue_box {
    background-color:#242424;
    }

    .fcb {
    color:#FFFFFF;
    }

    a {
    color:#9D0C0C;
    cursor:pointer;
    text-decoration:none;
    }

    .connect_widget td.connect_widget_vertical_center {
    border-spacing:0;
    color:#828282;
    }

    .UIIntentionalStory_Message, .UIIntentionalStory .location {
    color:#828282;
    font-size:13px;
    font-weight:normal;
    }

    .fan_box .UIIntentionalStory {
    color:#828282;
    text-align:left;
    }

    .fbConnectWidgetFooter {
    background-color:#242424;
    bottom:0;
    cursor:default;
    position:absolute;
    width:100%;
    }

    ***********/

    included it in my style.css, but it won't work. Any tips?

  14. Posted 7/24/2010 at 10:59:42 PM

    also... on my firefox the Like Box opens just fine (except for that color problem), but on Chrome... it just shows those 3 loading bars.

  15. Posted 7/26/2010 at 9:29:30 AM

    Just tested this post in Chrome and it appears to come up fine:

    http://www.proveisso.net/2010/07/compras-starcraft-2/

    Looks good!


    Thanks,
    Jason

  16. Posted 7/31/2010 at 6:08:01 AM

    yeah... seems like my chrome stopped liking JS. no matter what I do it won't work. I'll reinstall it, one of these days... thanks!

  17. Posted 9/7/2010 at 9:23:54 AM

    Gopster,

    You should be able to put anything you want into that field. Note, usually it is a URL to a page that can be referenced by a browser.

  18. Posted 9/2/2010 at 8:07:37 PM
    Gravatar of gopster

    Hi

    how can i make the facebook share button for example below; i want this share button where in the share_url="http://www.proworks.com" to have a javascript so it can fetch the name information from the current logged in user of facebook.

    i guess it should be looking something like this.

    share_url="http://www.proworks.com/?ref=x"

    where x is the fetched name information from facebook.so after fetching the name it should look something like this.

    share_url="http://www.proworks.com/?ref=ravivarma" then only the share dialog box comes out.

    can this be done? thanking in advance

    <a href="http://www.facebook.com/sharer.php" rel="nofollow">Share</a>

  19. Posted 10/31/2010 at 1:21:18 AM

    @Kessia, you cannot put a Like button on a "fan" page or Tab. Just doesnt work.
    Your other option is to create a "canvas" page, (an application) and for that, you're in for a wild ride.
    Otherwise, you can use the Share button, that works on a Tab.

    I've done heaps of reading about it, and there are some convuluted ways of achieving it, but not recommended, as FB may can you for it.

    It is possible, on a canvas page, or your own website, to have individual Like buttons for different images or articles on the same page. Once again, you've gotta Google it and find the answer. I found it once, it wasn't difficult, just about defining different paramaters in each Like button.

    I think Avon have it and the Disney FB page. They're both using Canvas pages which are basically your own created page wrapped in an iframe and displayed on the FB site.

  20. Posted 9/20/2010 at 10:25:47 AM
    Gravatar of Benjamin

    I'm trying to install the JS SDK, but I don't really understand what I'm missing.

    I see the code:


    window.fbAsyncInit = function() {
    FB.init({
    appId : 'getAppId(); ?&gt;',
    session : , // don't refetch the session when PHP already has it
    status : true, // check login status
    cookie : true, // enable cookies to allow the server to access the session
    xfbml : true // parse XFBML
    });

    // whenever the user logs in, we refresh the page
    FB.Event.subscribe('auth.login', function() {
    window.location.reload();
    });
    };

    (function() {
    var e = document.createElement('script');
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
    }());


    But, after I download the zip with the JS in it, where am I supposed to place this? I don't see any call directly to the JS files?

    I have a facebook application that I'm trying to 'upgrade' to using the JS SDK, but I am completely lost as there's no documentation on how to 'install' it. My facebook application runs on the tabs on pages.

    Hope you can help!

    Thanks,

    Benjamin

  21. Posted 9/21/2010 at 4:44:58 PM

    This code is to put Like buttons on a web site not in Facebook.

    However, it appears that you don't have your appId set. Could that be the problem?

  22. Posted 10/11/2010 at 5:04:25 AM

    You would be able pot anything how you want to write down on this website.I will trig install to JS SDK. because I have not find what's my problem. Thanks. :)

  23. Posted 10/11/2010 at 5:24:14 AM

    I will try to apply this on my diving site.

  24. Posted 10/11/2010 at 8:10:12 AM

    Jen - did the comments a few comments up not help?

    Ana - sorry, I'm not sure what your question is.

  25. Posted 10/12/2010 at 10:51:38 PM

    Thanks for linking to that article. I'm going to give this a whirl on www.facebook.com/rapidfyrewebdesign

  26. Posted 9/28/2010 at 8:31:49 AM

    I am going crazy trying to figure out how to change the font color in my Like Box. I have the FBHL version working but I need the text to be white instead of dark. Any suggestions would be appreciated!!

  27. Posted 10/22/2010 at 5:46:54 AM
    Gravatar of Kessia

    Hi Jason, do you know the code to put a like button on a Facebook tab? im using static fbml. The fb:like doesn't work.
    I want to do a photo contest where the winner will be the one whose photo gets more likes. I need a like button for each picture on the tab. Pictures are hosted on my server. The tab will be available only for those who like the page...

  28. Posted 10/25/2010 at 10:57:01 AM

    Hi Kessia,

    Sounds like fun! I'll try to get some time to take a look at that and see if I can get an answer for you.

    If you need it ASAP, then we are always available for hire ;)


    Thanks,
    Jason

  29. Posted 12/22/2010 at 2:45:40 AM

    [...] Add Advanced Javascript SDK and FBML Facebook Like/Recommend Button Features To Your&nbsp;Website Amplify&rsquo;d from www.proworks.com [...]

  30. Posted 6/27/2014 at 3:13:28 PM

    Hello!

  31. Posted 6/27/2014 at 3:13:42 PM

    Hello!

  32. Posted 6/27/2014 at 3:13:56 PM

    Hello!

  33. Posted 6/27/2014 at 3:14:09 PM

    Hello!

  34. Posted 6/29/2014 at 11:21:10 AM

    Hello!

  35. Posted 6/29/2014 at 11:21:21 AM

    Hello!

  36. Posted 6/29/2014 at 11:21:32 AM

    Hello!

  37. Posted 6/29/2014 at 11:21:43 AM

    Hello!

  38. Posted 6/29/2014 at 11:21:55 AM

    Hello!

  39. Posted 6/30/2014 at 6:13:06 AM

    Hello!

  40. Posted 6/30/2014 at 6:13:18 AM

    Hello!

  41. Posted 6/30/2014 at 6:13:31 AM

    Hello!

  42. Posted 6/30/2014 at 6:13:44 AM

    Hello!

Post a comment

Comments closed