How To Embed Dynamo Video On Facebook Fan Pages

February 22, 2011

Everyone is talking about Dynamo Player at the moment. Chris Jones, author of The Guerilla Film Makers Handbook, recently described Dynamo as being “more important than YouTube“.

Dynamo Player is seen by many as the missing link in the distribution chain for the low budget independent film maker. It allows you to embed your film on any web page and to make money. Chris covers it pretty well in his blog post above as do the guys at Dynamo themselves on their website so, if your unfamiliar with Dynamo, I’ll wait for you to read their posts before I continue.

dynamo

We’ve been using Dynamo for Stag Night of the Dead right from the off. They were our #1 choice because we loved the sexiness of the player, the transparency of the stats and the fact these guys are film makers themselves so we knew we weren’t going to get ripped off.

However the problem we’ve had since we released the film last Halloween was that you couldn’t embed the Dynamo player onto a Facebook page and allow users to watch the film full screen. This was down to the way Facebook dealt with embedded files and was something of a deal breaker for us. We were channelling people from our YouTube trailer to our Facebook page but there wasn’t a way for them to watch the film on Facebook. We had to redirect them to our website and, as a result, we were losing potential customers along the way.

With Facebook now using iFrames instead of FBML for custom tabs and pages, that all changes.

Here’s how you can embed your Dynamo video on your Facebook page and allow people to watch your film full screen.

I’ll start by saying that you need to have a fair understanding of how to create an HTML page and access to FTP software to upload your files to your web server. You will also need to have upgraded to the new version of Facebook fan pages. This is going to happen early March anyway so if you haven’t upgraded then it’s worth doing sooner rather than later.

I would also recommend that you set up a test page on Facebook so you can play around before launching. Oh, and this is one long arsed tutorial so you’d better make sure you have some coffee on the go…

Facebook iFrame Tutorial

1) You need to be a verified Facebook apps developer. This isn’t as tricky as it sounds. Just go to facebook.com/developers and allow the Developer application access to your Facebook account. This is perfectly safe – it’s an official Facebook app so no need to worry about your details going somewhere they shouldn’t.

2) Once you’re on the Facebook Developer page, click on the + Set Up New App button.

00-fb-01

3) At this point you’ll need to verify your account. If you haven’t already done this, you’ll need to add either your mobile phone number or credit card to your profile. Again, this is perfectly safe. This is an official Facebook application. I was already verified as I’d bought Facebook ads in the past using my credit card.

Once you’ve verified your account, you’ll be able to start creating new Facebook apps. Remember: After March, Facebook are no longer allowing any new FBML custom tabs so if you want to add unique content to your Facebook fan page, you’re going to have to go through this process anyway.

4) You now need to give your app a name. The name isn’t really that important as you can see from the graphic below. You’ll get a CAPTCHA to fill in and then you’re on the way.

00-fb-02

5) You’re now faced with a veritable plethora of options and no mistake. However, most of these are irrelevant as all we’re looking to do is replicate the old FBML custom tabs and change them over to the brand new  iFrame tabs for Facebook fan pages so we’ll only focus on the important ones. So first up you’ll want to change your icon and logo.

00-fb-03

No need to worry about the Privacy Policy or Terms of Service options as you’re not going to be releasing the app for general use. Remember, it’s just to create a custom tab in the new Facebook.

6) IMPORTANT: Don’t click on Save Changes until we’ve finished, OK?

7) Next up, click on the Facebook Integration tab on the left

00-fb-04

8 ) You weren’t paying attention, were you? You’ve only gone and clicked on Save Changes, haven’t you? You numpty. Just as well we can get back to where we were by clicking on “Edit Settings” at the top right of your app page but I’m not going to tell you again, OK?

9) So now we’re into the main settings. This is where we get into the bones of how Facebook will display our custom page.

00-fb-05

A) CORE SETTINGS

You can’t change your Application ID or Application Secret. You will, however, want to make a note of your Application ID as you follow the rest of this tutorial.

B) CANVAS

The canvas page title is, as far as I can see, irerrelevant. It’s only useful to you so you can access the app again in the future.

Canvas URL is, however, important. It’s the destination directory of your HTML files on your server. Remember, with this new change to the Facebook pages that we’re directly referencing files served on your web server. My suggestion is that you create a new sub-directory in your httpdocs directory on your web server.

Set Canvas Type to iFrame.

Set iFrame Size to Auto Resize.

This is important. At the moment, the Facebook iFrame page settings will limit you to an iFrame height of 520 pixels x 800 pixels. This sucks so you’re going to want to break out of those size constraints using my handy fix later ;)

C) DISCOVERY

We’ve left Discovery enabled. Kinda guessing this will help people find our app/page so will leave it enabled until we learn otherwise.

D) PAGE TABS

As you can see, we’ve renamed the Tab “Call To Action” in the screen grab above. We’ve done that deliberately. This is where you call your Facebook users to click on your custom tab. This is important, but you can also change it under your FB page app setting so don’t get too hung up over it now.

What is important is you set this to “Page Tab Type: IFrame” and you change your Tab URL to the actual page you want to display in Facebook. This will be the name of the HTML page you create later.

00-fb-06

So in my live example the selections are:

  • Tab Name: Watch Now (remember, you can change this on your FB apps page)
  • Tab URL: snotd123.html (remember, this is relative to the canvas URL you specified earlier)

10) Click Save Changes and you’re finished. You’ve set up your Facebook app. Now we need to create the HTML page that will displayed on Facebook.

00-fb-07

OK, you’ve got this far so I’m guessing you already know how to create a web page so I’ll only cover the bits which are specific to embedding your Dynamo video onto your Facebook page or for getting it to play nicely within the Facebook iFrame.

Key things to remember are:

  • The new Facebook iFrame is set at 520px width
  • The standard iFrame height is 800px

Losing The Scrollbar

If the height of your web page is greater than 800px, you’ll end up with an ugly scrollbar. To fix that, copy this script and include it somewhere on your HTML page. Personally I put all my scripts at the bottom just before the </body> tag so I remember where they all are:

<script src="http://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
    <script type="text/javascript">
      FB.init({
        appId  : 'YOUR APP ID',
        status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the session
        xfbml  : false  // parse XFBML
      });
      FB.Canvas.setAutoResize( 100 );
    </script>

Remember to change ‘YOUR APP ID‘ to the actual Application ID from Step 9A.

You’ll also want to make sure that you’ve reset the styling on your page so within your CSS, you’ll want to include this:

body {
    margin: 0;
    overflow: hidden;
    padding: 0;
}

Using Facebook Font

If you want your page to replicate the look and feel of Facebook, you’ll want to use the same font settings so your CSS will need to include this:

font-family: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
	font-size: 11px;
	text-align: left;
	color: #333;

Embedding Dynamo Video

00-fb-08

As we know, the maximum width for the new iFrame is 520px so we need to resize our video to fit. Head on over to your Dynamo Dashboard, select Your Programs and then click on the Details button for whichever film you want to embed.

00-fb-09

Click on the Embedding Codes button and you’ll get a pop up window containing your embed code. Simply copy the embed code onto your web page. Now you’ll need to change the object width and height values in two places. Personally, I chose to make the Dynamo player 480 pixels wide so here’s what we ended up using on our Facebook page:

<object width="480" height="271"><param name="movie" value="https://player.dynamoplayer.com/player//playerx.swf?pid=P2eece4ccd58e097a48eece4c&vid=X"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><param name="wmode" value="direct"></param><param name="quality" value="high"></param><embed src="https://player.dynamoplayer.com/player//playerx.swf?pid=P2eece4ccd58e097a48eece4c&vid=X"  type="application/x-shockwave-flash" allowscriptaccess="always"  wmode="direct" allowfullscreen="true" quality="high" width="480" height="271"></embed></object>

Remember to ensure your width and height ratios are relative otherwise you’ll end up with a weird looking video player!

Adding Comments Box

We included a comments box at the end of our page so folks could leave some feedback – hint! It was a bit fiddly getting it to play nicely with our CSS but, in the end, we got it to work by creating its own <DIV> and making it the final call before closing off the </body> .

<div align="center">
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=YOURAPPIDHERE&xfbml=1"></script><fb:comments numposts="10" width="500" publish_feed="true"></fb:comments>
</div>

Once again, remember to replace YOURAPPIDHERE with the value from Step 9A. You can grab the code direct from the Facebook Developers Social Plugins page.

TIP: If you’re using web stats software such as Google Analytics, don’t forget to add your tracking code to your new HTML page. This will help you see how many people are looking at your custom content on Facebook.

OK, so now you’ve finished creating your web page, it’s time to add it to Facebook so let the tutorial continue!

11) Using your FTP software, create a sub-directory with the same name as your Canvas URL from Step 9B. In our live example, we created a sub-directory called “fb” making the full URL http://stagnightofthedead.com/fb. To keep things simple, we’ve kept all CSS, HTML and pics in this directory.

12) Upload your new web page and any CSS files and images to the new sub-directory. Ensure that the file name for your web page is the same as your Tab URL from Step 9D. I would also create blank index.html files for all your sub-directories. This is a security measure to stop people from nosing around.

13) Once all your files are uploaded to your web server, head back to your Facebook application dashboard and click on Application Profile Page.

00-fb-10

You’ll now get a page that looks very similar to a regular Facebook fan page except that this is your iFrame apps page. Click on the link on the left Add to my page. You’ll get a pop up window displaying all the pages you’re an admin for. Select the page you want your Dynamo video to appear on and click Add to Page.

00-fb-11

14) Your Facebook iFrame custom tab has now been added to your page. It will appear on the left navigation bar. You can change the call to action label within the admin section of your Facebook page (Edit Page—Apps—Edit Settings—Custom Tab Name).

Every time you want to add a new custom tab, you’ll need to go through this process but it’s relatively painless once you’ve got the hang of it. Besides, after Facebook roll out the mandatory upgrade in March you won’t have a choice…

Here’s our custom iFrame Facebook page out in the wild complete with embedded Dynamo player. Click on the FULL button and you can watch our film full screen.

I hope this tutorial has helped you get to grips with the new Facebook iFrame tabs and how to embed your Dynamo video player onto your Facebook page. If you’ve got any questions, please feel free to leave a comment and I’ll try to help you out.

THANKS

A huge thank you to Robert Holland for coming up with the original article I used to write this: How To Create iFrame Tabs For Facebook Fan Pages

Thanks to StackOverflow for the tips on dealing with CSS overflow: New iFrame canvas for page tabs width lower than 520px and iframe-based facebook app gets unwanted scroll bars with a smaller windows size.

Be Sociable, Share!

Previous post:

Next post: