How To Turn Your Site Into A Facebook Fan Page
Facebook recently introduced the Open Graph API. This is a way for FB to easily spread itself across the web and integrate with any website. Rather than simply embedding some fancy widget into your site, you can actually connect your site and your visitors to Facebook. While there are 8 plugins currently available, the one we will focus on is the Like Button. It’s pretty simple to implement, you can tuck it away in a corner somewhere, and it still provides you all the Facebook goodness you’ve been looking for.
Describing Your Page to Facebook
There is one thing you have to do first. The Like button does a lot more than you might think. When a visitor likes your page, a link to your page will show up in their feed. Not only that, but your page may also show up in that user’s profile if you play your cards right. The way to do that is to make sure Facebook knows what your site is all about.
Using the Open Graph Protocol, you define specific attributes that apply to your site. There are five that are required for basic operations.
og:title– The title of your object as it should appear within the graph, e.g., “The Rock”.og:type– The type of your object, e.g., “movie”.og:image– An image URL which should represent your object within the graph. (must be at least 50px by 50px and have a maximum aspect ratio of 3:1)og:url– The canonical URL of your object that will be used as its permanent ID in the graph, e.g.,http://www.imdb.com/title/tt0117500/.og:site_name– A human-readable name for your site, e.g., “IMDb”
Don’t worry if this looks like gibberish. All you really need to worry about is making sure you can define your site in these terms. The code that you actually need to add to your site would be something like this:
<html xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"> <head> <title>Coach Rah – Solving problems and answering your questions</title> <meta property="og:title" content="Coach Rah – Solving problems and answering your questions"/> <meta property="og:site_name"content="Coach Rah"/> <meta property="fb:admins"content="rahsheen"/> <meta property="og:type" content="blog"/> <meta property="og:url" content="http://coachrah.com/"/> <meta property="og:image" content="http://coachrah.com/avatar.jpg"/> ... </head> ... </html>
These are the settings from one of my own sites. First, you can see that there are two properties that need to be added to our site’s HTML tag. This should be near the top of your page or in the Header page if you’re editing a blog. Cut and Paste them as is and try not to disturb what’s already there.
You can also cut and paste all of the <meta property …> sections, just make sure to edit the “content” pieces to match your site. If you’re placing this code on a site that is not a “blog” or you want your site to be identified as something more specific, check out the list of supported types.
Gaining Administrative Access
One of the most important properties here is “fb:admins.” This tells Facebook which Facebook user is the administrator for your site. Simply put your Facebook username or ID here. My Facebook URL is http://facebook.com/rahsheen, so I used “rahsheen” and it worked.
Chances are you never got around to setting up a custom URL. This means your Facebook profile URL is something like: http://www.facebook.com/profile.php?id=123456789. That number on the end is your Facebook ID. Use it as the content piece for “fb:admins.” In case you were wondering, you can have multiple admins for a page, just separate them with commas.
Understanding What’s Going On
Guess what? The hardest part is over with. By this point, you have laid the groundwork that will make sure that:
- You can add a nice Like button to your site (which we will do below)
- When people Like your page, Facebook knows all about it
- When people Like your page, they become your Facebook Fan. You can see your site now listed in your Page Manager.
You read that correctly. You just turned your plain old website into a Facebook Fan Page. If you had thought about creating a Fan Page before and decided that you didn’t want to split your efforts, you know longer have to make that choice. They are now one in the same. If you already had a Fan Page, now you have two.
Adding the Actual Like Button
There are two ways to add the button to your site. The first involves fancy Javascript and provides more flexibility, but we are not doing that one. The easiest method is to use an iframe, which Facebook will generate for you when you click here and scroll to the bottom. All you really need to specify is your site’s URL. Generate the code and copy the iframe version. Paste it on your site somewhere and you should be all set. You might want to put it in your sidebar with the rest of your widgets.
This Open Graph stuff turns out to be a lot more useful than I originally thought. One great way to make your site more social. If you have any questions about getting things set up, leave a comment.
Have you set up your Like button yet?
Category: How-To | Tags: facebook, javascript, likes, open graph api, xfbml
About the Author Rahsheen has been a certified geek since before it was the thing to do. He started programming and tinkering in the 4th grade. Now, Rahsheen mostly writes on various sites about technology trends in social media and mobile. . He is also a musician, singer, rapper, writer, and producer. @rahsheen - +Rahsheen Porter - coachrah.com
See all posts by rahsheen.
Yes, I noticed many of these things as well, but wanted to keep the post simple. I'm not really sure what FB's intent is here, but the current setup does provide for some interesting uses. Each page or post on a blog can have it's own fans, but this can be tweaked if that is not what's desired.
I also noticed the problem of having an existing fan page and not being able to connect to it. Still haven't had a chance to dig deeper.
Unfortunately FB creates a new page and doesn't connect to existing ones… the only thing you can do is to sign up at the top of the page to get informed when FB will allow real access to the content of these pages.
Sincerely
DJM
I face the same issue… I already have a page, how do I set up my website to connect to that page instead of generating a whole new entity in the Open Graph? I've been searching high and low for an article on how to do this, with very little luck so far… Anyone got ideas?
Hi Rahsheen, very interesting stuff, that I tried right away.
As I was testing on one of my Band's blog ( http://www.allestones.com/ ), I found some interesting stuff… Although I didn't test extensively each case, there are some “strange” behaviors, at least that's how I feel this… I might be wrong… BTW, I tried with a selfhosted WordPress.
* Use “title” meta or not ? If you don't specify one, the <title> tag is used instead. For a blog, this means, each like will reaaly be associated with the page. If you “hardcode” the title in the blog's header, each page will have the same name. Then you mightl have more likes for “one object”, where different titles will make every page an object…
* use “URL” meta : I used some simple PHP coding to have the canonical URL added to the object.
* as I used the “admins” meta, each like on each blog's page created a new “fanpage” inside Facebook for me to administer. As I made a few tests, I have 6 new pages, that were automatically populated based on title, URL and content of the page…
BTW, if you liked a page prior to adding the “admin” meta, the page is not created, and will never be, as probably FB retains all the past information about objects. Same if you “unlike” a page, this information doesn't appear in the activity feed for that object, but your “previous” like is retained…
Then I've been wondering for a few hours what to do:
* Once again, this blog is the official site of a band. The most important is people liking the band, not the pages inside the blog… I might then change the “URL” and “TITLE” meta to fixed values for all pages.
* but this will then create a new “fanpage” to administer, besides the one I already created for the band ( http://www.facebook.com/AllesTones ). This page will aggregate the likes of visitors on the blog. That's intesting, but they can do the same on the wall of the band's page…
* should I delete all the previously created pages ? they have in fine no use…
My conclusion is that the use of the opengraph is the case of blogs and some sites is a bit fuzzy…
Sincerely
DJM
My bad. Had “value = ” and should have been “content =”, seems to be working fine now.
I tried doing this with my site http://www.humorq.com but it keeps giving me the fbadmin error. I thought I have it set up right though per your instructions I just used the number …
<meta property=”fb:admins” value=”100000986096124″ />
but still this error… You failed to provide a valid list of administators. You need to supply the administors using either a “fb:app_id” meta tag, or using a “fb:admins” meta tag to specify a comma-delimited list of Facebook users.
I am very new to facebook and just tried to setup the minimum page for my business. Is there something on the facebook side that needs more setup maybe?