23 April 2010
Surprises with implementing Open Graph and the Like button
I tried out some of the newly announced Facebook features today, specifically the Open Graph markup and the Like social plugin. They were both technically simple to deploy, as promised. You have less control over the appearance of the Like button than I’d like. For instance, they don’t have an option to ONLY display the like button without a list of total likes. You can work around this by reducing the width of the iframe, but it was an unexpected restriction. For us, the goal was to provide a handy way to Like us on Facebook; we don’t care to give screen real estate to showing your friends who have also Liked us (for the majority of visitors, I expect there would be none).
I initially went about including the Like button the wrong way. In the demos they showed at the F8, it appeared that they would expect each deep linked article page in a blog to have a unique Like button, like how CNN is implemented. So I did this:
However, when you click Like, it adds a link in your profile section on Facebook for that specific deep link. For example, check out the article link added here from CNN:
You could imagine that very quickly this area would be cluttered with all the articles a person had liked on news sites and blogs. Then I noticed this suggestion from the Open Graph Best Practices:
Make only real-life things into objects. Users don’t want news articles and other transient content as objects on their profile.
This advice makes sense, though it’s inconsistent that Facebook would tout their partner (CNN) whose implementation contradicts this. Thus, I moved the Like button into the footer, making it site wide, and added a Digg link in it’s place.
Ideally, users clicking the Like button would be added to the BKWLD Facebook page (we previously had a group, which we’re deprecating). So far, I’m not seeing this happen; users who Like our Facebook page and users who Like us on the BKWLD site appear to be dropped into separate buckets. The Social Graph markup doesn’t have a field to specifically relate the object (our site) with a Facebook Page. I assume that Facebook uses some black magic to join the references to BKWLD in the Social Graph metas with the BKWLD references in our Facebook Page. Possibly this isn’t working because our Facebook page is so new. Or possibly something got confused during my initial implementation that was per blog article. It also doesn’t appear that the “fb:admins” meta tag is having any effect. I’m curious to see if this generated page will be automatically merged into the official BKWLD Facebook Page in the next few days. Or if a person Likes a site on the Facebook site and that site has Open Graph markup on the home page, does Facebook read it and pull that info in?
In sum, I think the social plugin and Open Graph standard are pretty great in terms of functionality for users that can be added with minimal effort by developers. I hope some clarification comes from Facebook about how (or if) merging works between different pages.
Comments
Great dissection of the Like button. I totally agree with how you guys implemented it, and will probably be implementing it in the same fashion elsewhere.
It would be nice if there was a less intrusive way to ‘like’ articles. Possibly a way to like a ’sub sect’ of an object/page.
In addition to the Digg and comments count, it would be nice to add Delicious and Twitter (retweet) with counts. Sometimes this can be pretty taxing with the respective networks current implementation.
As of right now, there’s no way to connect the Open Graph Like button to an existing group. Kind of frustrating that they would overlook such an obvious thing.
On the other hand, I could see times where creating a new Page for every unique object *might* be advantageous, but, for the most part, I think it’s best to push it all the the same canonical URL/object. I do wish there were some sort of way to link a child object (say, an article) to the main Page parent object (blog). Sure, there are tons of plugins out there, but this should be built in functionality.
I’ve found (sort of) a workaround: omitting the type tag. When you omit the type tag, it does not create a new Page. Not super-optimal, but it’ll work for now.
Dear Robert and the BKWLD team,
For crying in the night, I just love your awesome graphics on this site! I am thinking on making my own website sometime soon.
Smiles, Eric C. from Sandra’s speech class at SCC
Nice Chris! Will it then use your existing Facebook page that references the same “og:title” and “og:url”?
Not really. My implementation right now is using Wordpress’s post title variable (obviously, I don’t want to create a fan page for each single post), so it injects it into your friends’ stream without linking to anything on FB. I’m also using the permalink variable for og:url so that wall post links back to the post being promoted.
It’s not optimal, but still highly useful for promoting single posts.
THAT being said, you could get real fancy and set up some custom fields that you can attribute posts to say, an artist, or an album. Then, you’d create a page that parsed for all of the posts that had the “artist” custom field set to “The Beatles”. From what I understand, WP3 will be able to do this easier out of the box, but then that would give you a nice way to create an og:object and have your posts surrounding that object linked on the first jump.
I’m writing up some notes on this. I’ll ping this post when I’m done.