~ Embedding an interactive Open Green Map on Facebook

Millions of Facebook records were exposed on public Amazon server ...


This can only be done on your Facebook profile or page (not a group or event).
You can install one map per Facebook profile or page.
It takes about 20-30 minutes.

Make a tab image:
·         First, make a bold image for the tab that is 111 wide x 74 high (72 dpi)
·         (On Facebook, Tabs are the boxes that show Photos, Likes, Events, etc on the right underneath your header image) - here is an example of one of our tab images:

Make a map widget:
·         Login at http://OpenGreenMap.org/home
·         Choose your map and click the Widget tab
·         You can adjust the latitude & longitude to center the map just where you want, select the zoom and base map.
·         Just above the map you’ll find the widget HTML code. Depending on how you decide to embed your map into Facebook, you will be using part or all of this line of code.

Create a new Page Tab on Facebook:
·         Login to your Facebook account.
·         Click "Install Page Tab"
·         Choose your Facebook page from the drop down
·         Authorize the Tab Application > Static Iframe Tab would like to access your public profile ... click “Okay”
·         A new page will load with all the options and settings for creating your new Page Tab, which looks like this:

Skip passed the “Page Tab Share Settings” for now – we will come back to this.

Embedding your Green Map
You have two options here – the basic option of just embedding your map onto the page with no other information, or a more advanced option that includes additional information (eg: https://www.facebook.com/joburggreenmap/app_208195102528120)

Basic Option:
·         Select the “URL” radio button alongside the “Page Source” heading

·         In the URL input box that show, add only the direct link part of your map’s widget code, like this example:
·         Specify a height for the page that is similar to the height of your map.

Advanced Option:
·         Select the “HTML” radio button alongside the “Page Source” heading.

·         In the HTML input area, when viewing it in “Source” mode, paste the entire piece of code of your Green Map widget (as shown above). Add a couple of blank lines above the map.

·         Then select “Editor” mode. Your view will change to a more familiar text box view with formatting options. Now you can add copy, links and other standard website elements above and below where you have embedded your Map widget.

Fan-Gate, Friend-Gate, Form-Gate options
·         Leave all of these options set to “OFF”

Customise your tab name and image
·         Rename your tab to something short and catchy.
·         Add the Tab Image you made in your first step.
Now that you are finished setting all the main elements for your new page tab, click the green “Save Settings” button at the bottom right of the page.

You will remain on this settings page. If you wish to see what your new page looks like, click on the “view tab” button at the top right of the page.

To get back to your settings to make any changes, simply select the “settings” link in the Admin Options block at the top of the page. (Note that this Admin Options block is only visible to you as the administrator of the page – visitors to your page will not see this.)

Customising Sharing Settings
Go back into your settings and now we will take a look at the “Page Tab Share Settings” box at the top of the page.

·         If you would like your new page tab to be easily shareable, click the “Show Share Button at top of Tab” (recommended).
·         If you click on “Edit” in the top right of this box, you are able to customise the details which will appear when a person shares the page. It might be a good idea to do this, so that snippet that appears in other people’s timelines does a good job to promote your map and encourage people to click on it. Use the box below to edit and keep it short.
·         Share image: Add something here that is relevant to the tab. We suggest you either use your own Green Map logo or the same image you are using for your Tab image.
·         Share Title: You can use a different name here to what you named your tab if you like. (Helpful if you want to use a longer name than your tab name)
·         Share Description: As a default, Facebook uses the same description copy from your ‘About’ page for the Share description – you may want to update this copy to something shorter and more to the point to promote your map. Think about what would entice someone to want to click on the link.
·         Save this new information by clicking the “Save Settings” green button again.

Once you have saved the overall page settings, you will see that this box will update to give you an idea of what your now-customised share snippet will look like.

Adjust Tab display settings
Now, go to your Facebook home page and adjust the tab’s location: 
·         Click the downward pointing arrow on the right end of the Tab line, then hover over your new map’s Tab. Click on the pen to edit, then swap position with another tab such as ‘likes’ or ‘videos’. Choose the location you want. 

Sharing your new Map page
Once you are 100% happy with how your new embedded Map looks, be sure to share it on your wall so that your followers are aware that you’ve added it.
You can share it in the following ways:
1.      Copy the Shareable Tab URL that is visible under the “Page Tab Share Settings” and paste it onto your wall or into any other social media programs you may be using.
2.      On your new Map page, simply click the “Share” button (this will only be visible if you selected it to be visible under the “Page Tab Share Settings). When you click this, you may be asked to share it under your own personal name or to do a Captcha for security. Just follow the steps online.

You can promote your new interactive map in different ways. If you have created a great way to do this, please share it with Mapmakers – you can also edit (or translate) this page, send it back to info@greenmap.org and we will add the updated version to the Tool Center.  Special thanks to Taylor Baybutt in NYC, Tracy Frayne in Johannesburg SA and Ciprian Samoila in Bistrita RO for their help!

No comments