Monday, February 27, 2012

How to Add Your Mobile Website to Your Facebook Page

Now that you have your iPhone, Android and Mobile Website Apps, is there anything else you can do to maximize your investment? What if you could bring your mobile website and all of its content into your Facebook page?

Using a 3rd party Facebook app called "Zadego", you can do exactly that! First, you want to find the correct App on Facebook. Use the search bar and look for the term "Zadego". Select the app result with 10,000 monthly users.

Click on the images in this post to see them at full size.


Once you have selected the correct App, you will be forwarded to Zadego's website to continue setup.  You can create a new account, or select the "Login with Facebook" option, which I recommend for this.  After logging in and accepting the Terms & Conditions, you will be able to setup your content.



Select the "Content" tab from the options on the left, find the "HTML App" item, and then click on "next step" beneath it. Note: The free version of Zadego limits you to adding up to two content items on one facebook page. If you manage multiple pages and wish to add content to all of them, you will need to upgrade your subscription.



The "Info" page that appears next will give you a good run-down of what the App is capable of.  You can scroll down and click on "Setup my HTML Page" to continue. Before we go further, you will want to setup the code that be added to the HTML App. Copy the following code into notepad so that it can be easily edited:

<style>
::-webkit-scrollbar {
    width: 12px;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(204,204,204,1); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
 background: rgba(204,204,204,0.5); 
}
</style>

<div style="float:left;">
<iframe src="MOBILE WEBSITE URL" width="340" height ="480"></iframe>
<br><center>[ MOBILE WEBSITE URL ]</center>
</div>

<div style="margin-left:20px; text-align:center;">
<a href="IPHONE APP URL" target="_blank" title="Download our iPhone App">
<img src="http://instantencore.com/graphics/apple.jpg"></a>
<br><br>
<a href="ANDROID APP URL" target="_blank" title="Download our Android App">
<img src="http://instantencore.com/graphics/android.jpg"></a>
<br><br>
<a href="INSTANTENCORE URL" target="_blank" title="Visit us on InstantEncore">
<img src="http://instantencore.com/graphics/maestro.jpg"></a>
</div>

<br style="clear:both;">


Replace the sections IN ALL CAPS with the appropriate information:
Note: for the purposes of this demonstration, we are using links for the Detroit Symphony Orchestra.

MOBILE WEBSITE URL
e.g. http://detroitsymphony.instantencore.com/m

IPHONE APP URL
e.g. http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=468829955&mt=8

ANDROID APP URL
e.g. https://market.android.com/details?id=com.instantencore.dsotogo_5093029

INSTANTENCORE URL
e.g. http://www.instantencore.com/detroitsymphony (instantencore.com/username)



Now we return to the Zadego settings.  Provide a name for the page, something like "Mobile App" or "Our App" ( be creative! ), and then paste your completed code into the box.  Of the options below, you can leave the first two set to "NO" and allowing comments can be "YES" or "NO" at your discretion.



Click through the "Save and preview" step, and then click on "Choose icon".  From the options available, be sure to select one that is fitting (there is even a music note option!).  There is an option to upload a custom icon, but that requires a paid subscription.




Finish by clicking "Publish to Facebook".  You might be prompted to click "Allow" so that Zadego can access your Facebook account, and then it will prompt you to select to which Page you would like to publish the App. Click through the final confirmations and you will be all set! People who visit your Facebook page will be able to navigate the Mobile Website version of your App, gaining access to all of your content: learning about events, listening to music, watching videos, and even buying tickets! They will also have links to the iPhone and Android native Apps - all in one convenient spot.


3 comments:

Aaron said...

Hello, I went through the process of adding my mobile website (from Instant Encore) to my Facebook profile. When I go to view the app in Facebook the right side of the app is cut off and there seems to be no way to scroll horizontally. It has cut off the more options tab, which means I can only get to my three primary tabs. Has anyone experienced this same problem? Or have a solution? Thank you, Aaron.

Erick said...

Hi Aaron,

Facebook is currently going through a transition where, by the end of the month, all "Pages" will be switched over to the new Timeline format.

I think that the developer that maintains the iFrameWrapper App has adjusted the width of the iFrame so that it works well with the Timeline format, that allows for a wider content area. Because of this, the content of the App is extending off the side and can't be seen.

Next week, we will be updating this slideshow with one that details a new approach to embedding your Mobile Website using the same iFrameWrapper App.

Thank you so much!

David said...

Hi Aaron,

You'll notice that Erick has rewritten this post to reflect Facebook's shift to the Timeline format for Pages.