Tuesday, August 10, 2010

Integrating Facebook Like Button with Open Graph Protocol

I've been stumped for the past couple of days trying to figure out the Facebook Open Graph Protocol. I think I've finally figured it out today. To summarize, I have an external website based on Wordpress:

I created a Facebook Page manually using my account:

My objective was to put a Like Button (or Like Box) at my external site, which when clicked, makes the "clicker" my Facebook page's "fan".

Just like several people in the Facebook Developers Forum, I was getting that weird og:type=link error on both the Like Button and the Like Box. Sure enough, if you view the html source of the Facebook page above, you will see a meta tag for og:type=link. There seems to be no way to edit the meta tags in the Facebook page.

What I did next was to create a Like Button for my external site using the Facebook Like Button generator. As explained by another forum member, this generator seems to be intended for external websites. So I put in all the necessary meta tags on my external site (you can do a view html source of www.dragonpay.ph to see the tags I inserted in my Wordpress header.php). As expected, the "Like Button" works fine for my external website.

But wait -- this was not what I intended originally. I wanted the user to "like" my Facebook Page, not my external site. Now here's the twist that I discovered. When you ask Facebook to like your external site, it actually creates another Facebook Page for your site on-the-fly. In my case, it created the page as:

Notice that this is a completely different URL from the one I manually created above. And more interestingly, if you do a view html source of this new page, it actually has an og:type=website!

So I quickly went to the "Like Box" generator and typed in the Facebook page id of 150520031629713. And guess what -- the "Like Box" now works perfectly fine as well.

So, to summarize my findings, it seems that you cannot use the "Like Button/Box" generator and link it to a Facebook Page that you created manually. It seems that you have to let Facebook create the page for you on-the-fly by first putting the necessary open graph meta tags on your external site, then wait for Facebook to scrape it. This page that it creates on-the-fly will have the correct open graph meta tags that will work with the "Like Button/Box".

Now the only problem which I cannot answer is -- what if the original Facebook Page that you have already has a significant number of followers? How do you now switch them over to the on-the-fly version? In my case, its not a big deal since my original Facebook Page only had about 20 followers. So I'll just kindly ask them to re-click my "Like Button/Box" so that they become followers of the new page.


bla123@gmail.com said...

how did you find out the page it automatically made on the fly? i cant find the page it created? feel free to email me at misskathrynbrooke@gmail.com

Dick Chiang said...

Assuming you entered the correct info (ie. Facebook id, etc.) as your meta data on your regular webpage, Facebook will create the on-the-fly page under your account. Just go to the "Ads and Pages" section of your Facebook page to see the page it created.