I've been able to make Facebook welcome tabs for some time now, and really enjoy making them. There's a slew of apps you can use to add functionality and there's a lot that can be done with them.
- Run contests
- Special offers
- Embedded videos
- Adverts
- Interactivity, including call-to-action buttons
iPage, my current web host, used theirs to run a little contest at Halloween. Some people like to update theirs on a regular basis. Since I'm usually insanely busy I have automated mine by adding a feed reader widget that displays my latest blog posts on them so there's always something new to see there. What frustrated me, until recently, was my inability to get comments added to them, but today I found out how to do it so I'll share what I learned.
The code
<html xmlns:fb="http://ogp.me/ns/fb#">
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script><fb:comments href="http://www.wendycockcroftwebdesign.com" num_posts="2" width="500"></fb:comments>
The markup
<!DOCTYPE html>
<html xmlns:fb="http://ogp.me/ns/fb#">
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
<title>Wendy Cockcroft Web Design on Facebook</title>
<meta content="Wendy Cockcroft" name="author">
<meta content="Facebook landing page, one of the services I offer as a web designer and developer." name="description">
<link rel="stylesheet" type="text/css" href="http://www.yourwebsite.com/fb/style-fb.css">
<link rel="stylesheet" type="text/css" href="http://www.yourwebsite.com.com/fb/menu/menu_style.css">
</head><body><div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="container">(your content here)
</div>
<br>
<fb:comments href="http://www.yourwebsite.com" num_posts="2" width="500"></fb:comments>
You need a doctype because you've got an actual web page there; it's in an iframe. Although I can make the app that makes the iframe, I prefer to just use Woobox's static iframe app because otherwise I'd have to make one for each client and I don't need to if I use that. It also gives you an editor (don't use it after you've added the code for the comments or it won't work properly) and the ability to insert several kinds of HTML so you can give fans and non-fans different experiences. You might, for example, decide that you want to only let fans add comments.
And why stop there? You can find a great range of social plugins right here to do the other thing I wanted: import my wall into my welcome tab. See the result.
All of my fan pages now have social plugins on the welcome tabs, adding interactivity to the page and value to the service I offer since it's going to be standard unless the client says otherwise. I've had great fun setting these up, and I hope you do too.
No comments:
Post a Comment