by Janice Kenyon
14. June 2011 11:15
Now you can add interactive maps, floor plans, photo Galleries, or interactive restaurant menus – anything created with MapsAlive – to your Facebook business page. You use the same iFrame code that you would use if you were embedding your map in your own web page. Suddenly your Facebook page becomes a powerful marketing tool without costing you anything.
How does this work?
Facebook recently made it really easy to display any kind of content using an iFrame application. An iFrame application lets you display any web page on a Facebook tab. You can have up to twelve custom tabs and you can display interactive content or any HTML, CSS and JavaScript. Just be sure your interactive map or other content is 520 pixels wide or less if you want to avoid horizontal scroll bars.
Here's how to add an interactive map to a Facebook tab
First you add a free application called "Static HTML: iframe tabs" to your business page. Then you add your interactive map or other content to the tab and customize it. Follow these easy steps to make this work.
|
Step 1 – Add the application
- Log in to your personal Facebook account.
- Search for and select Static HTML: iframe tabs.
- Click Go to App on the Static HTML: iframe tabs screen (Figure 1).
Note: if you have more than one Facebook business page you will be asked to select the page for the custom tab from a drop down list.
- The custom tab is added to your tab list on the left side of your Facebook page. Custom tabs added with the Static HTML app display a star icon before their name. The default name is Welcome (Figure 2), but you can rename it later.
Step 2 – Add your interactive map to the tab
- Go to the Tour Preview screen for your MapsAlive tour and click Show Code Snippets.
- Copy the iFrame embed code from section 4 of the Code Snippets.
- Go back to your Facebook page and click the Welcome tab name in the tab list (Figure 2).
- Paste the iFrame embed code from your MapsAlive tour into the top content box (Figure 3).
- Click Save and view tab...
- Click View your tab as a non-fan... to see what your new tab looks like.
You can add additional HTML, CSS and JavaScript in the content box if you want to include a description, links to other pages or other information.
You can also display different content for fans or non-fans if you like. You might do this to entice non-fans to like your page in order to view the fan-only content.
|
|
The new tab for the code shown in Figure 3 displays a fully interactive floor plan and looks like this:
Note that if your interactive map uses popups they will only display within the bounds of the iframe. For many maps this is not a problem, but you might want to consider using a tiled layout like the example here to be sure viewers can see all of your hotspot content.
Here are some other ways to customize your new tab:
To rename the tab — go to your business page and click Edit Page and then choose Apps from the list of tabs on the left. Find Static HTML: iframe tabs in the list of Apps and click Edit Settings.
To change the position of the tab in the list — while viewing your page, click Edit at the bottom of the tab list on the left. Drag the tab name up or down.
Add another custom tab — while editing a custom tab, click the gold FAQ & Help Center link at the top of the page (Figure 3). Expand "How do I add more than one tab" and click on Second tab (or Third, etc.). There are other good tips and instructions for using custom tabs in this section as well.
I hope you have fun with this — enjoy!
Subscribe