~ Embedding an interactive Open Green Map on Facebook
Examples:
Note:
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:
http://www.opengreenmap.org/greenmap_widget/22599?LAT=40.703497&LON=-73.893657&ZOOM=11&TYPE=Map
·
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!
Post a Comment