Anyhoo, recently Facebook has changed what they will allow you to do in a Facebook tab. Previously you had to use Facebook Mark up Language (FBML) which although breakable, was a real P.o.S to work with. These days you can put anything you want into a tab. If you can dream it you can build it, and by and large it is not very hard. I mean I can do it, and I am hungover. Surely you could do it even better.
I thought I had better share some of the new possibilities. Not enough people have both the social media knowledge and the coding ability to implement cool stuff. This post will contain an example of what you can now do with your Facebook page, along with the code & step by step to get it working on your site. The code stuff may look crazy, but it is pretty simple. Your social media consultant/geek should be able to sort it out & change it round.
Anyone with even as limited coding knowledge as me (1 year learning) can build cool stuff into their pages.
Example: Recently I built a test tab for a TV station which allowed them to show their lunchtime news bulletin live on one of their Facebook tabs. It also displayed a live Twitter feed of hashtagged comments, and had a Facebook livestream function on the same tab - allowing people to gossip about whatever was on TV.
Interactive TV inside your Facebook tab anyone?
Here is the tab, with the NZ TV channel taken out & replaced with live CBS from a uStream feed. (note: I also set up and ran a test of this using a live uStream feed from my phone - you really can do anything with it)
http://www.facebook.com/skinnymarketing?sk=app_104908912928390
And here is the entire code you need to build it:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CBS test</title>
</head>
<body>
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="360" valign="top"><center><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="360" height="246" id="utv800336"><param name="flashvars" value="autoplay=false&brand=embed&cid=522594&v3=1"/><param name="allowfullscreen" value="true"/><param name="allowscriptaccess" value="always"/><param name="movie" value="http://www.ustream.tv/flash/viewer.swf"/><embed flashvars="autoplay=false&brand=embed&cid=522594&v3=1" width="360" height="246" allowfullscreen="true" allowscriptaccess="always" id="utv800336" name="utv_n_836313" src="http://www.ustream.tv/flash/viewer.swf" type="application/x-shockwave-flash" /></object><br /><br />
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=104908912928390&xfbml=1"></script><fb:live-stream event_app_id="104908912928390" width="360" height="300" xid="" always_post_to_friends="false"></fb:live-stream></td>
<td width="120"><script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'search',
search: '#CBS',
interval: 6000,
title: 'Tweets with #CBS',
subject: '',
width: 120,
height: 500,
theme: {
shell: {
background: '#8ec1da',
color: '#ffffff'
},
tweets: {
background: '#ffffff',
color: '#444444',
links: '#1985b5'
}
},
features: {
scrollbar: true,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
toptweets: true,
behavior: 'default'
}
}).render().start();
</script></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>
</body>
</html>
That is it! 55 lines of code and we are there. To plug it into your Facebook page, copy & paste it, save it as a .aspx Facebook iFrame support does not like .html much), and stick it up on your server somewhere.
Next we have to set up the app in Facebook, in 4 steps:
1) Go to http://www.facebook.com/developers/ and click on " + set up a new app". Give it a name & agree to the terms and conditions.
2) In the canvas URL box enter the address to the folder on your server where you hid the code - make sure you put the forward slash at the end of the folder address!!
3) In the Page URL box, enter the full address for the code you uploaded to your server:
4) Save it, go to "Application Profile Page" then click on "Add to my Page"
That is it. You are all done. Now if this makes no sense to you, don't worry. Give it to your geek and they will suss it out.
As bung/geeky as this code may look, it is three really simple bits of code that anyone can find on the internet, all glued together in a table 520 pixels wide (maximum width of a FB tab) and with 20 spare pixels for scroll bars to appear without breaking it. You can embed anything you want in your Facebook tab - YouTube, chat, google analytics, your office/factory/restaurant/bar's webcam, radio stream....anything you want.
Now if you will forgive me, I am going for a beer.
Posts
Nice work Ants, this is some smart stuff. Interactive live video feeds offer brands and well everyone a unique opportunity to promote and engage
ReplyDeleteThis looks really neat!
ReplyDeleteThanks for sharing! I'm off to have a bit of a play... so many ideas! X
What about a twitter stream that can be interacted with. Is that possible? So if someone is watching a keyword search of a hashtag in your facebook tab, and they wanted to participate in the convo, is there a way to do that within the tab?
ReplyDelete