SAAS-1181: Finalize the Facebook widget

airtime_mvc/application/views/scripts/embeddablewidgets/facebook.phtml

@@ -5,21 +5,33 @@
     <h2 style="float:left"><?php echo _("Facebook Radio Player") ?></h2>
     <div style="clear:both"></div>
 
+    <p><button class="btn btn-new" id="facebook-login" style="margin-left: 300px;">Add to My Facebook Page</button></p>
+
     <div id="weekly-schedule-widget-error">
         <?php echo $this->facebook_error_msg; ?>
     </div>
-    <div><p>Add your <?php echo(SAAS_PRODUCT_BRANDING_NAME); ?> station to your Facebook Page.</p>
-        <button id="facebook-login">Add to Facebook Page</button>
-    </div>
 
 
     <div>
-        <h3>Preview:</h3>
+        <h3 style="padding-left: 0px">Preview:</h3>
 
         <div>
             <iframe width=800 height=800 src="<?php echo Application_Common_HTTPHelper::getStationUrl(); ?>/?facebook=1"></iframe>
         </div>
 
     </div>
+    <br>
 
+
+    <div>
+        <h3 style="padding-left: 0px">Tips:</h3>
+        <p>
+            To make the tab more visible on your Facebook page, click "More", and "Manage Tabs":<br>
+            <img src="<?php echo($baseUrl) . "images/doc/facebook_widget1.png"?>"><br><br>
+
+            Then, drag the Radio Player item higher in the list, and click Save. It will now appear as one of the default tabs instead of being buried under "More":<br>
+            <img src="<?php echo($baseUrl) . "images/doc/facebook_widget2.png"?>">
+
+        </p>
+    </div>
 </div>