If you have a Facebook fan page for your organization, you can add an “app” to your page that allows visitors to view any of your CloudCast videos or streams without leaving Facebook.
To do this, you’ll need management control of your Facebook fan page and around 10-15 minutes of time.
How does it work?
Facebook “pages” (sometimes called fan pages, or organization pages) can have apps installed to them that create additional “tabs” that visitors can browse to. Most fan pages already come with a set of existing tabs, like those for viewing Photos or Videos.
This guide will show you how to add a new tab to your existing page that visitors can click to view CloudCast content. To see a demonstration of how this works, view the AMGTV Facebook page and click the “Watch Live” tab icon:
After clicking to that tab, a large CloudCast video player appears and automatically begins playing the AMGTV live stream.
Follow along below to add similar functionality to your Facebook fan page.
Step 1 – Install the app
For this setup, we will use an existing Facebook app called “Static HTML”. This is a free application from another publisher that allows page managers to create a tab and add arbitrary HTML, which is perfect for showing CloudCast videos.
Once logged into the Facebook account that has control of your fan page, install the Static HTML app. Click the large blue button to install the app.
Choose your Facebook fan page from the drop down, and then proceed by clicking the “Add Page Tab” button.
Step 2 – Configure app
After the app is installed, you’ll likely be brought to your pages management screen. If not, simply browse to it. Down towards the middle, your page’s cover photo and “tabs” are show.
Here, the new “tab” that the Static HTML app added is circled in red. If the “Welcome” tab with the star icon does not appear, try clicking the small arrow to the right to reveal additional tabs.
From this screen, there will be a green button near the top called “Edit Tab”. Click that button and you’ll be brought to an overlay screen.
Clear out the sample text in the textarea. Here is where you’ll place the HTML markup to embed a CloudCast player. You don’t need extensive HTML know-how to get this working. Here’s a template you can just copy and paste:
<html>
<head>
<style>
body { font-family: sans-serif; size: 13px; }
</style>
</head>
<body style="background-color:#F7F7F7">
<div class="container" style="width:810px; padding:0;">
<div style="width: 100%">
<div style="text-align:center; background-color:#C9C9C9; padding:24px 0px">
{{Cloudcast Iframe Code}}
</div>
</div>
<div class="row">
<div class="span" style="width: 100%; text-align: center">
<h2>{{Headline}}</h2>
<p class="lead" style="max-width: 80%; display: inline-block;">
{{Paragraph}}
</p>
</div>
</div>
</div>
</body>
</html>
After pasting it in, you can replace some of the content with what you want. Grad a CloudCast video embed code from the CMS and paste it in, replacing “{{Cloudcast Iframe Code}}”.
Click the “Save and Publish” button on the top right, and then click the “View tab on Facebook” button on the top left.
Step 3: Further customization
After completing the steps above, you should have a working Facebook tab on your fan page. You can customize the look and feel of the tab content however you want, perhaps even embedding the full CloudCast player instead of a single video.
There’s a couple things left you’ll probably want to take care of.
Change the tab icon
Facebook has a list of instructions on how to do this here: https://www.facebook.com/help/201402119964259.
Change the tab name
Edit the tab content like we did earlier (by clicking the green “Edit Tab” button. This time, scroll down further and you’ll see a text field where you can change the name from “Welcome” to something else. Perhaps “Watch Live” is appropriate for you if you embed a CloudCast player that shows your live stream of content.
Change the order of tabs for your page
If you have multiple tabs on your page, some may get buried out of sight, since Facebook will usually only display 3 tabs at once.