How To: Adding a Brightcove player to your Facebook Fan Page
Want to add video to your Facebook Fan Page? Here are the steps to get you there:
- 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.
- 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.
- 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.
- For Single Title Player – Insert the following player code into the “FBML” section and change the tab title to whatever you would like (here we have “Video”):
<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 Multi-title Player with one or more Playlists – Insert the following player code into the “FBML” section and change the tab title to whatever you would like (in the image here we have “Video”):
<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>
- Replace each instance of
<INSERT PUBLISHERID>,<INSERT PLAYERID>and<INSERT VIDEOID>with the IDs you would like to use from your Brightcove account. - Edit the width and height in the player code to match the dimensions of the player you created in your Brightcove Publishing Module.
- Replace
“http://aftermixer.com/bcfb_loadingimage_large.jpg”with the location of the image you would like 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.
I really like Facebook and I
I really like Facebook and I have to admit that I could not live without it for any day! I have one dream, that my favorite star Jesse Jane would create her Facebook profile, I hope that this dream one day will come true. Anyway thanks a lot for the great and attractive information about this wonderful tool!
Facebook player too wide for new tabs
Thanks for this tutorial! I used it awhile back and it looked great, but since Facebook recently shrunk the width of the tab well, the player is now getting cut off on the right side. Our player is only 400px wide, so it should fit, and I tried modifying the code so it's not 700px wide anymore, but that didn't work. Any ideas how to fix this?
http://www.facebook.com/ReadingRockets.org?v=app_4949752878
Thanks!
Laura
Additional updates on integrating into FB...
Check out this article - hopefully it will answer many of your FB integration questions:
http://developer.brightcove.com/en/articles/embed-video-facebook-sharing...
How do you apply the 'Get Link' to redirect to the video
Hi Chris
Thanks for the post. We're using the FBML for one of our Channels now but I have been investigating how we can get the 'Get Link' menu option to play the video within Facebook itself.
The main issues that are happening:
1. If you 'Get Link' with the Hosting Options on the player set to 'Hosted on BrightCove URL' and the link is copied and poasted into a browser, the video will play outside of Facebook. This unfortunately is not what we want as we would like to keep users in the same Facebook session.
2. If you use the 'Get Link' with the Hosting Options on the player set to 'Hosted on your URL'. (http://www.facebook.com/pages/Liv/114980348542013?v=app_4949752878) then when users 'Get LInk' and paste it in a browser the page will open to the home page of the fan page (the FBML Page) where the holding image will be displayed and the user would need to click on the image to open the Player.
Do you think it would be possible to get around issue '#2 where if a link is copied via 'Get Link' and pasted into the address bar the video would play while remaining on Facebook?
I would appreciate any help on this subject.
not working?
hi, i just tried it with with this player:
http://link.brightcove.com/services/player/bcpid75277917001
this code should work, but it doesn't. any idea?
Post new comment