Adding a Brightcove player to your Facebook Fan Page

Submitted by Chris Little on Thu, 2009-09-24 15:43
Technology
Required
Edition
Express, Pro, Enterprise

Want to add video to your Facebook Fan Page? Here are the steps to get you there:

  1. Add the “FBML” application as a tab on your Fan Page (if you don’t have a Facebook Fan Page, go here to create one). To add this application to your Fan Page, go to http://www.facebook.com/apps/application.php?id=4949752878, click the “Add to Page” button and select your Fan Page.
  2. Now you will want to create a Brightcove player for this page. You can use any player template you would like. Once created, you should take note of the PlayerID. You will need this as well as your PublisherID in the next step.
  3. Next, head over to your Facebook Fan Page and click "Edit Page" on the menu to the left. You should see the "FBML" application. Click "edit" as shown in the image below.

Facebook edit page

  1. Enter publishing code for your player into the “FBML” section and change the tab title to whatever you would like (in the image here we have “Video”).
  • For a Single Title Player, insert the following player code:
<fb:swf swfsrc="http://c.brightcove.com/services/viewer/federated_f9/
<INSERT PLAYERID>?isVid=1&publisherID=<INSERT PUBLISHERID>" bgcolor="#FFFFFF"
flashVars="videoId=<INSERT VIDEOID>&playerID=<INSERT PLAYERID>&domain=embed&autoStart=true" 
base="http://admin.brightcove.com" name="flashObj" width="700" height="525" 
seamlesstabbing="false" type="application/x-shockwave-flash" 
allowFullScreen="true" swLiveConnect="true" allowScriptAccess="always" 
imgsrc="http://aftermixer.com/bcfb_loadingimage_large.jpg" 
pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</fb:swf> 
  • For a Multi-title Player with one or more playlists, insert the following player code:
<fb:swf swfsrc="http://c.brightcove.com/services/viewer/federated_f9/
<INSERT PLAYERID>?isVid=1&isUI=1&publisherID=<INSERT PUBLISHERID>" bgcolor="#FFFFFF" 
flashVars="playerID=<INSERT PLAYERID>&domain=embed&autoStart=true" 
base="http://admin.brightcove.com" name="flashObj" width="700" height="600" 
seamlesstabbing="false" type="application/x-shockwave-flash" allowFullScreen="true" 
swLiveConnect="true" allowScriptAccess="always" 
imgsrc="http://aftermixer.com/bcfb_loadingimage_large.jpg" 
pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</fb:swf>

Enter player code

  1. Replace each instance of <INSERT PUBLISHERID>, <INSERT PLAYERID> and <INSERT VIDEOID> with the IDs from your Brightcove account.
  2. Edit the width and height in the player code to match the dimensions of the player you created in the Brightcove Publishing module.
  3. Replace http://aftermixer.com/bcfb_loadingimage_large.jpg with the location of the image you want your users to see when the video page loads. Make sure that this image has the same dimensions as the player that you are using.

That’s it! Here’s an example on the Brightcove Fan Page: http://www.facebook.com/pages/Brightcove/74801790097?v=app_4949752878.

And here are a couple of examples from Brightcove customers who have done this:

FX
http://www.facebook.com/pages/Dexter-on-FX-UK/66266495963?v=app_4949752878

US Army
http://www.facebook.com/home.php#/USarmy?v=app_6009294086&viewas=783147299