ogp Archives - Stay N Alive

Facebook-hosted "Pages" are No Longer Necessary – Here’s Why

open-graph-protocol-1065528Social Media Examiner shared some advice I gave on their Facebook Page recently regarding the warning about Facebook “boxes” being removed from Facebook Pages in the next week.  The reminder was met with a lot of concern from subscribers, who had grown attached to the ability to customize the look and feel of their Facebook Pages through the Static FBML app on Facebook and the ability to add custom “boxes” to the Wall of their Page.  The other concern is that Facebook will also be switching to the smaller, 520px Tab format, reducing the amount of surface area for a custom tab to add personalization to a Facebook Page.  I argue all this concern is moot however – there is something better Page owners can be doing that they aren’t, and that is moving their Pages over to their own websites and managing the interface there instead of on Facebook.com, and I think that’s the direction Facebook wants Page owners to go.

At Facebook’s sold out F8 developer conference this year this focus seemed evident.  Facebook launched a series of new “Social Plugins”, and a protocol (called Open Graph Protocol) enabling any website to essentially become a “Facebook Page”.  Right off, website owners could simply put a “like button” Social Plugin on their website by copying and pasting an iframe tag from Facebook’s developer site, and immediately, with some added meta tags added to the section of their HTML, they could have all the functionality of a Facebook Page right on their own website.

Facebook had a great demo at the conference, which Jolie O’Dell (from Mashable) pointed me to (see her article about it here), where they basically took all the content from Lady Gaga’s Page and converted it to its own, customized website with its own look and feel that you could easily change themes.  Facebook-me.com, which appears to still be there, enabled customized themes to be applied to profiles, perhaps similar to MySpace in a way, but in a way that website owners themselves could host those themes on their own servers.  All this could be done through simple Graph API calls and some customization on your own server.  See their demo they gave me here:

http://www.youtube.com/watch?v=ix0OY6_6y_8

For instance, if you query http://graph.facebook.com/stay/feed in your browser, immediately you’ll be presented with a parseable feed taken straight from my Facebook Page of all the posts put there.  Re-format that in any way you like and you have your own customized Facebook Page.  No login necessary.

It can be even better though.  Rather than letting Facebook host the data, you can handle most of it on your own through Social Plugins.  For instance, let’s look at what happens if I want to make StayNAlive.com its own Facebook Page (in fact I’ll do it right here so you can try it out when I’m finished).  I simply go to http://developers.facebook.com and click on the big green “Add Facebook to my Site” button, then click on the Social Plugins link.  Select the “Like Button” social plugin, and enter http://staynalive.local in the URL box.  Click the “Get Code” button, and you’ll be given code that looks like this:

http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fstaynalive.com&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80

Now, if I put that at the top of the website, a like button appears, and my website is now a Facebook Page.  Go ahead and click “like” and you’ll see what I mean.  Now you’re subscribed to my “Page”, you’ll get all the posts I send to your news feed, and best of all, any links to the “Page” go back to my actual website, and not Facebook.com.

screen-shot-2010-08-05-at-1-29-45-am-2298688

Becoming an Admin

To get all the benefits of turning your website into a Page and having the full flexibility of customization, you’ll need to make a couple updates to the section of your site’s HTML.  These meta tags follow a standard called “Open Graph Protocol”, and by following it, Facebook will know how to represent your site inside Facebook.  There are different tags that can specify the title of your site, a main image for your site, and more, but the most important tag you need to add to your site’s section is a meta tag that looks like this:

This specific meta tag identifies the user, 683545112 (which happens to be my Facebook ID), as the admin for your website on Facebook.  To get your Facebook ID, the best way I use is to go to your profile, click on your profile image, and look at the number after “id=” in the URL.  That’s your Facebook ID.  You can also specify multiple Facebook IDs in the content attribute of the meta tag by separating them by commas.

Once you specify this, next to your like button that you just installed you’ll see a “Admin Page” link next to the like button that, by clicking on the link, will take you to what looks like a regular Facebook Page on Facebook.  It’s from there you can post updates to your fans and have them see it in their news feed.  Also, once you’re identified as an admin, any link to the Facebook Page in your own Feed will link back to that admin interface on Facebook.com. (not to the website itself, which is what all other users will see)

For other meta tag identifiers you can use, view the source of this website and look in the section – look for the “og:” meta tags.  You can also read more about it in the developer documentation here.

The Feed

By using this method, you get all the benefits of any normal Facebook Page on Facebook.com.  You just have to install the proper Facebook Social Plugins to get what you want.  For instance, if you want your visitors to see a feed of all items you’ve posted to the feed, install the “Like Box” social plugin, and enter the ID of the Facebook Page you just set up. (to get the ID, go to the “Admin Page” link next to your like button, and it’s the long number in the URL)  Look over on the right of this website to see an example of the Like Box feed.

As mentioned above, you can also post items to your feed.  Click “Edit Page” on your admin Page, and you can set up an RSS feed to import notes into your feed.  I can also post videos, pictures, or anything else, just as I would a normal Facebook Page hosted on Facebook.com.

screen-shot-2010-08-05-at-1-29-53-am-6122724

Importing Your Blog Posts

You’ll notice the “Like Box” on the right that has all the posts from this blog on it.  That’s because I’m importing the RSS for this blog and now ever time a new post goes out all the people that have “Liked” StayNAlive.com via the link above will get all the posts I submit via this blog.  This can be a great alternative to allowing users to subscribe via RSS.

So there you have it – any need to customize a Facebook.com-hosted Page is now moot.  We don’t need them any more.  I see no reason for hosting on Facebook itself if you need full customization.  In fact, all links your visitors see in Facebook will now point back to your own website and not Facebook.com.  When the user likes your website it will now appear in their interests and link back to your website.  That can be good for SEO.  Search results will link back to your website, and hints will show up for all your visitors’ friends, pointing them back to your website.

This, IMO is the ideal way to set up a Facebook Page now.  The Facebook Page hosted on Facebook.com is not the future.  Your website is the future, and Facebook has made it completely possible for you to own this experience.

Are there any reasons you can think of not to use this method?  What other tips do you have?  I’d like to hear them in the comments and I’ll update this post as it makes sense.