Wednesday, December 22, 2010

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

Amplify’d from www.proworks.com

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

fb_likebutton_21After playing with the iFrame version of the Facebook Like Button Builder I wanted to see what the Javascript SDK version 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“.

fb_like_fbml_1

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


ProWorks Blog Rotating Header Image







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






fb_likebutton_21After playing with the iFrame version of the Facebook Like Button Builder I wanted to see what the Javascript SDK version 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.

Read more at www.proworks.com
 

No comments:

Post a Comment