7/28/2011

How to Use Facebook's Livestream Appl

(Anti) Social Development Home About Portfolio Facebook Services Contact Clients WordPress and Facebook Consultant Posted on 16 August, 2010 By Kim Woodbridge 11 Comments

How to Use the Facebook Livestream Application for Static Content and Dynamic Comments
Like 15 people like this. Be the first of your friends.
Share

Facebook has a livestream application in which live events can occur and viewers can comment on the even in real time. Each viewers comment gets posted to their wall with a link back to the event, which increased the visibility of the event. Setting up a live event on Facebook, however, is more than most of us need to do and will incur some costs setting up the event through Vimeo and other Facebook partners. We can, however, still take advantage of the Livestream application and use it with static content. The viewers can still comment on the content in real time and their wall postings will increase the visibility of your video or other materials. Heres how to set up the Livestream application with your static content. 1. The livestream application requires an application ID in order to work properly. You can get one of these by setting up a new application in the Facebook developers area. The application does not need to be added to the application directory and is basically private but you do initially set it up like a brand new
www.kimwoodbridge.com/livestream/ 1/13

7/28/2011

How to Use Facebook's Livestream Appl

Facebook app, like the numerous applications you use on your Facebook profile. 2. Go to the Developers page and click on the button at the top right that says Set Up New Application.

3. Give the application a name and agree to the terms of service. It has to be a unique name but I find that things like Kims Demo Video work fine. Click the Create Application button.

4. Lately I have found that clicking the Create Application button causes Facebook to hang and then results in an error page. If I go back the developers page, the new application is in the list and has been created. Oh Facebook what fun you are. It will be on the Application list on the right. 5. Click on the application link and you will be taken to a page that looks like this.

6. All you need at this point is the Application ID number, which is the third field down. Please note that
www.kimwoodbridge.com/livestream/ 2/13

7/28/2011

How to Use Facebook's Livestream Appl

when you create a new application and will be tied to your own fan page. If you are making the application for someone elses page or your own fan page, you will need to specify this. Otherwise the dynamic comments will link back to your profile page rather than the clients fan page. To do this go to Edit Settings on the right, Connect and fill in the field called Connect URL with the URL to the fan page that the application is for. Make sure you use a trailing slash at the end of the URL or Facebook will get fussy and keep telling your that the URL is wrong. You also specify the URL for a specific tab.

7. Now that you have the application ID you can set up the FBML for your dynamic comments for the video or whatever content youve decided to use. The fbml looks like the following.
<fb:live-stream event_app_id="YOUR_APPLICATION_ID" width="400" height="500"/>

You can change the width and the height. YOUR APPLICATION ID is the application ID we obtained in the early steps when we made a new application. For example, the one for Kims Demo Video is 138980996142080. 8. The live stream dynamic comments looks like the following.

www.kimwoodbridge.com/livestream/

3/13

7/28/2011

How to Use Facebook's Livestream Appl

9. If you go to the wall for my profile, you will see a post that says test that links back to the application on my (Anti) Social Development fan page.

10. In my demo I associated the dynamic comments with an older video I made. I have discussed how to add a flash video in an earlier post. And the layout is done with an old school html table. I didnt do any other
www.kimwoodbridge.com/livestream/ 4/13

7/28/2011 a

How the layout is done with an Appl flash video in an earlier post. And to Use Facebook's Livestreamold school html table. I didnt do any other fancy styling for the purposes of this demo. Typically a real one will have images and a cool background, etc.

If you would like to hire me to create a static or live livestream application on Facebook, please contact me.
photo credit: tizianoj

Related Posts: How to Make a Custom Facebook Page Tab With Iframes How to Make Your Custom Facebook Page the Default Landing Tab How to Add Content to Your Custom Facebook Tab How to Create a Simple Contact Form for a Facebook Fan Page How to Show an April Fools Day Message on Facebook Using FBML Posted In : Facebook Did you enjoy this article? I can assist you with your WordPress or Facebook project. Contact me and I will provide you with an estimate. You can also connect with me on Facebook or follow me on Twitter.

11 Response s to How to Use the Facebook Live stre am Applicati on for Static Conte nt and Dynamic Comme nts

jerome@boatlettering August 19, 2010 at 12:04 pm whooahh great!! I never though about thing facebook application before thanks for sharing and i gonna try it right away:) .-= jerome@boatletterings last blog ..How to Remove Lettering from a Car Window =-. Reply

Kim Woodbridge August 20, 2010 at 10:10 am

www.kimwoodbridge.com/livestream/ 5/13

7/28/2011

How to Use Facebook's Livestream Appl

Hi Jerome You could make videos about some of your howto articles and then use them with the FB livestream application. Reply

bradmaclean August 29, 2010 at 12:45 am Hi Kim, This is great; thank you. However, I am having some trouble. I cannot get passed step 5 because I do not see a Connect link to put in the connect URL. I only see About, Web Site, Facebook Integration, Mobile and Advanced. Anything you can do to help woud be greatly appreciated. Thank you Kim. Brad Reply

Kim Woodbridge August 29, 2010 at 10:48 am Hi Brad No sooner do I write the article than Facebook changes the layout for the developers page. It is now under Web Site > Site Url. Thanks! Reply

Todd Wickersty September 13, 2010 at 10:57 am Thanks for the tutorial. Very helpful. Reply

Tom Turkanen October 29, 2010 at 11:44 am Hello! First, thanks for yout great tutorial! Im quite confused right now; the comments posted to the live stream box appear on my wall if I check the Post to Facebook box, but the comments dont appear to the wall of the group I want the comments to appear to. Do I need to set up canvas settings, for example?
www.kimwoodbridge.com/livestream/ 6/13

7/28/2011

How to Use Facebook's Livestream Appl

Thanks! Reply

Kim Woodbridge October 31, 2010 at 7:53 am Hi Tom As far as I know it either doesnt do that or I dont know the right setting. I looked through the settings and didnt see anything obvious. Reply

Tom Turkanen October 31, 2010 at 9:49 am Hi Kim! Thanks for your reply. Then I wont keep on wasting my time anymore trying to make the comments to appear on my events wall. :) Is it possible to customize the live stream box, like the background for example? I was able to customize it using the preferences of iframe but the live stream box plugin overrode my settings. Reply

Kim Woodbridge November 1, 2010 at 1:30 pm Hi Tom Not that Im aware of. It can be placed on top off a styled background but the box itself is limited to what you can do with it. Reply

Tom Turkanen November 2, 2010 at 8:08 am Okay, thats all I want. How is it done? With CSS? Editing the plugin in Facebook Developer Tools? Reply

Kim Woodbridge November 3, 2010 at 9:46 am Hi Tom,

www.kimwoodbridge.com/livestream/ 7/13

7/28/2011

How to Use Facebook's Livestream Appl

The fbml tab would be styled with html and CSS and the Livestream app will sit on top of that. Reply

Le ave a Comme nt

You may use: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> .

Name (required) E-mail (required) URI Your Message

Submit Comment c d e f g

Notify me of followup comments via e-mail

Search here...

Get (Anti) Social Blog upgrades and extras are my forte. If you want to spend more time blogging and less time fiddling with your templates and plugins, I can help. Find out more about my services, then email, tweet, or call me.
www.kimwoodbridge.com/livestream/ 8/13

7/28/2011

How to Use Facebook's Livestream Appl

Email: kim.woodbridge@gmail.com Twitter: kwbridge Phone: 215-534-6557 - by appointment only Form: Contact Me

Subscribe Via Email

Your Email Address

Rss Feed | Rss Comments Not only is Kim great at listening to and figuring out what you want from your blog then turning those ideas into web reality her rates are super-reasonable! Siel at Green LA Girl

Recent Posts
WordPress 3.2 Full Page Writing Screen New System Requirements for WordPress 3.2 5 Premium Real Estate Themes for WordPress What to Read: Books Read the First Half of 2011 The Beginning of Summer Vacation Facebook Requires Permission to Use Screenshots (Re) Learning to Play the Piano How to Remove an Admin from Your Facebook Page Happy 9th Birthday to The Kid 6 Free Thesis Theme Skins for WordPress (Anti) Social Lists 6/5/11 How to Simply Remove the WordPress Admin Bar
Ads by Google Live Streaming Facebook Live TV Live Football

Categories
www.kimwoodbridge.com/livestream/ 9/13

7/28/2011

How to Use Facebook's Livestream Appl

Blogging Comments Blogging Tips Bookmarks Facebook Freelance Humor Kim Woodbridge Information Lifestream Non WordPress Tips Online Activism Philadelphia Reading Recipe RSS Recommendations Social Media Twitter WordPress Plugins WordPress Themes WordPress Tips
(Anti) Social Development
Like 3,180 people like (Anti) Social Development

Q asim

E ckard

Kenan

(Anti) Social Developm ent on Facebook

Top Commentators
www.kimwoodbridge.com/livestream/ 10/13

7/28/2011

How to Use Facebook's Livestream Appl

Andy (2) Instant Internet ... (2) Marbella (2) Martin Bryce (2) Nic Penrake (2) Patricia Singer (2) Stephanie (2)

Bookmarks
WordPress Bookmarks

My other sites
www.kimwoodbridge.com/livestream/ 11/13

7/28/2011

How to Use Facebook's Livestream Appl

Holiday WP Themes Mary Shelley and Frankenstein Watch Doctor Who

Social Media Marketing

Inbound Zombie

Tumblr
(Anti) Social Development Tumblr From the Hip

Archives
May 2008 - Now

Recent WordPress Bookmarks

Headway Themess: 2 Steps to Add a Widget Area to Your Header 30 Best Wordpress E-Commerce Themes - tripwire magazine Export QuickBlogcast to Wordpress - Search the Go Daddy Help Center WordPress WP Missed Schedule Fix Future Posts Scheduled Failed WordPress Plugins WordPress WordPress plugin - Google 1 Button WordPress Plugins DIYNINJAS | The Thesis Theme Pros Import from Ning: Import Ning users to Wordpress and BuddyPress Introducing Kickstarter: A Free Skin for the Thesis Theme WordPress WordPress Backup to Dropbox WordPress Plugins

Recent Comments
Angela Neal: SO pleased to see this feature, at last. Hadn't noticed the wee icon in the menu, so thanks for pointing it out. :)... Dave Clements: I have to admit that this probably won't be all that useful for me, because I am usually working with and referencing pa... Jean: I have yet to upgrade to the newest version of wordpress mainly due to the fact that my server lacks the requirements on... Andy: Update! I got it to work without scrollbars on a mac in Firefox. The trick for me was to use Wordpress as the CMS, an... Andy: Hi Kim, thanks for this. I followed it and it doesn't work for Firefox on a mac - and your own facebook app shows scrol... Molly: Hi, thanks for the great tutorial. I downloaded a video of an episode of a television show, and when I click 'video rang... Vedran: Hi Kim! Thanks for this lovely overview and special thanks for including our RealEstate
www.kimwoodbridge.com/livestream/ 12/13

7/28/2011

How to Use Facebook's Livestream Appl

theme in it! Kind regards ... Swathi Reddy: useful post .but i used direct code to show facebook apps on one of my site...

About
Kim Woodbridge is an accomplished Information and Technical Consultant specializing in the entire implementation of a WordPress based website including installation, theme design, upgrades, unique customizations and ongoing site maintenance.

Wordpress Services
Installation, upgrades and maintenance Conversion of existing html and css templates Theme and plugin recommendations CSS customizations Troubleshooting and tweaks for unique situations Customization for individual blogging goals and needs Training and advice Copyright 2008 - 2011 (Anti) Social Development All rights reserved Home About Portfolio Facebook Services Contact Clients

www.kimwoodbridge.com/livestream/

13/13