How to Add Interactive Maps to Facebook Custom Tabs

by Janice Kenyon 25. January 2013 09:32

You can add interactive maps to custom tabs in Facebook to create a richer experience for your followers. How about displaying an interactive map to show people where your offices or businesses are located? Or, add an interactive shopping mall map that lets users find stores, see shop hours or view promotions. Add any interactive map created with MapsAlive to a custom tab.

What are Facebook tabs? Tabs are extra pages that let you display more content about your business. Tabs appear as thumbnails just below your cover photo on your Facebook home page like this:

How to Add a Tab and Display an Interactive Map

To add a custom Facebook tab you must have a Facebook business page and be an administrator for that page. To learn how to create a Facebook business page go to https://www.facebook.com/business/build. You will also need to be a Facebook Developer. This isn’t as scary as it sounds – it’s really very simple and there is no programming required! If you aren’t already a Facebook Developer you can learn more here: http://www.mapsalive.com/Article/How-To-Become-A-Facebook-Developer.

Step 1: Create and Name your New App

In this example we will add an office locator map to our custom tab. Facebook calls the content that you display in your tab an App so we must create an app to contain the interactive map. First, go to the Facebook Developers page here:
https://developers.facebook.com/apps. Then click the + Create New App button in the upper left.

Type a name in the App Name field. You don’t need to enter anything for the App Namespace or check the Web Hosting box. Click Continue.

Enter the code in the Captcha box on the next dialog and click Continue.

Step 2: Enter Basic Information for Your App

Type a Display Name and a Contact Email.

Step 3: Tell Facebook Which MapsAlive Tour to Display on Your Tab

These instructions assume you have already created the interactive map you want to add to your tab. Because the width of a Facebook tab is 810 pixels, if you want your map to fill the entire width of the tab make your MapsAlive tour 810 pixels wide. You can display a tour that is narrower, but if it is wider it will be truncated on the right within the tab.

Choose Page Tab in the section called “Select how your app integrates with Facebook”

Type the title of your tab in the Page Tab Name field. Then paste in the URL for your MapsAlive tour in both the Page Tab URL field AND the Secure Page Tab URL field. You can get the URL for your tour on the Tour Preview screen in MapsAlive after you have published your tour.

These next steps are important!

  1. Type index.aspx after the slash following the tour number in both fields. (If the URL has page1.htm at the end, replace page1.htm with index.aspx)
  2. Change “http” to “https” in the Secure Page Tab URL field ONLY.

Click the Change link to upload a thumbnail image that users will see on your Facebook Home Page. For the best quality the thumbnail should be 111 pixels wide by 74 pixels high. Then click Save Changes.

Step 4: Add your Tab to Your Facebook Page

This step is a little awkward – Facebook does not seem to provide a “nice” way of doing this – but if you follow these instructions carefully you won’t have any trouble.

Open a new browser window and paste the following URL into the browser address bar:

http://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

Replace “YOUR APP ID” with the id of the app you just created in step 3. You can find the id on the Settings page in the top section.

Replace “YOUR URL” with the Page Tab URL you specified above.

Now your URL should look something like: http://www.facebook.com/dialog/pagetab?app_id=591828130833214&next=http://tour.mapsalive.com/32772/index.aspx

Press return to visit that URL. (If you see the message You must have permission to add apps to at least one Facebook Page to perform the requested action it means you are not an administrator of a Facebook page. You can learn more here: https://www.facebook.com/help/323502271070625/.)

The Add Page Tab dialog lets you select a Facebook page for your new tab:

Select the page and click Add Page Tab.

Step 5: View your New Tab

Now go to your Facebook Home page. Click your new tab thumbnail below your cover photo. You can reorder the tab thumbnails by clicking the blue down arrow on the right of the thumbnails. Then hover over a thumbnail and click the small pencil that appears in the upper right of the thumbnail.

Once your interactive map has been added to your Facebook tab you can make changes to the map in MapsAlive, republish and your updates will automatically display the next time someone views the tab.

You can add more than one tab to display more interactive maps or other content as well. Visit MapsAlive on Facebook to see some of our examples.

Let us know if you have added your own custom tab with an interactive map – we’d love to see what you have created!

Add comment




biuquote
  • Comment
  • Preview
Loading






Connect with us on Facebook Follow MapsAlive on Twitter MapsAlive on LinkedIn