Adding a Google Map to your Facebook Fan Page

updated Feb 28, 2011

@jasonpadvorac was nice enough to tweet me a link to an app he just developed, which so far lets you add a custom html tab to facebook without having to go the developer route suggested by Hubspot (below). This is perfect for adding the maps option!

to add one tab: http://www.facebook.com/apps/application.php?id=190322544333196&sk=app_190322544333196

to add a second tab: http://www.facebook.com/apps/application.php?id=128953167177144

to add a third tab: http://www.facebook.com/apps/application.php?id=203351739677351&sk=app_190322544333196

there may be some FB bugs and it may be tweaked, but so far it seems to integrate nicely, it let me add a custom google map to my test page: http://www.facebook.com/pages/Test-Page/301396262700?sk=app_190322544333196

updated Feb 22, 2011

Facebook is fazing out FBML and allowing IFrame integration, a good tutorial on implementing an Google Map with IFrames (a little more complicated then it sounds) is at http://blog.hubspot.com/blog/tabid/6307/bid/9883/How-to-Set-up-a-Facebook-Custom-iFrame-Landing-Page-Application.aspx?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+HubSpot+%28HubSpot%29

——————————————————

updated: Dec 09, 2010/Dec 20

Blockwild was nice enough to send me a very nice email asking what specifically was glitchy and how could they help. I will be playing with the app some more later on today and see what else the app can be used for. Bravo to Blockwild for reaching out customer service wise!

Dec. 6, 2010

Updated: two applications have come out recently that may be of interest to people wanting to add maps to their fan pages.

BlockWild Map  http://www.facebook.com/BlockWildMap?v=wall

Contact Tab  http://www.facebook.com/ContactTab?v=info

I’ve tested both applications, both have pros and cons.

The Contact Tab seems to have several boxes which are not removable as options, in this case (to date Dec. 2010) it has a holiday box/tab which you can’t remove and it does not give you the option of not putting in an email address or at least text. It does give you the option of adding a pre-done custom Google map to it though.

The Block Wild Map seems to have some interesting options in that you can have it set for a dated event, adding it just to a fan page without having a date attached is not clear and you need to play with the settings a bit, it does integrate a Google Map well but is a bit glitchy. (update Dec 20) update Block Wild apparently now has a map app that is not date dependent and it added easily to a fan page on the second try. At last contact from Blockwild it was mentioned that the custom Google map option may be added in which case I would recommend it highly.

——————————————————————————————-

Updated: Facebook apparently changed how you can integrate some things, so the original workarounds don’t work as they did when I first did them. Test map #2 formerly let you display a static map and have a clickable link internally, no longer apparently.

I just starting playing with this so it may be tweaked down the road. I thought this would be a useful integration for Lodging fan pages, especially if a facility did not have a website or they did not have a map option/find us page on their current sites.

Facebook does not let you integrate iframes into fan pages, but it does after some tweaking provide a workaround.

So far I have come up with two different versions of this.

Better coders then myself can tweak to their hearts content but this is fairly basic so most people can use it.

Both of them have drawbacks so you may want to check them out and see what you think before integrating.

Test Map #1 http://www.facebook.com/pages/Test-Page/301396262700?v=app_7146470109

Will click directly over to Google Maps when clicked on but you can’t move the location within the map.

Test Map #2 http://www.facebook.com/pages/Test-Page/301396262700?v=app_6009294086

You have to click on the hyperlink before the map will display, and then to get directions, you have to go into the frame itself and enter a option, the map itself is not clickable.

Adding the maps to Fan pages:

The first step is visit the add the static FBML to your page, go to

http://www.facebook.com/apps/application.php?sid=4f93513c73973214f42f630bfb78603c&id=4949752878&ref=s and to the left, click on “add to my page”

Then return to your fan page and click on the left side, on “edit” under your profile picture, one of the selections will now be a FBML application. These are a little quirky so you may want to practice just adding tabs for this until you are comfortable with it.

To add another static FBML tab to the site, return to edit and click on the tab, down near the bottom it will ask you if you want to add another box.

Just be warned if you mess the tab up, while you can edit it, if you delete the application by mistake you will have to go back to the application page and reintegrate it.

Test Map #1 (Code is in MSword under more information for Test Map#2)

http://www.facebook.com/pages/Test-Page/301396262700?v=app_7146470109

The code for this is grabbed from when you go to Google maps and map your address, it’s the link they provide for inserting into an email

You will have to take a screen shot of a map or if you have a custom map somewhere already on your website you can use that. The Jpeg or PNG has to be hosted somewhere so you can link to it. If you don’t have access to your website to upload a graphics file you can host it on your blog. You may be able to also load it into your pictures/albums on facebook and use that referrer url (but I haven’t tried it yet, so if anyone does please let me know.)

If you have an image in mind for this and you need the url (Google will not let you do this to the maps, thus the screenshots), on a PC, right click on the image and go to “view image” this will give you the URL for the image. On a Mac. control+click and then view image.

Test Map #2

http://www.facebook.com/pages/Test-Page/301396262700?v=app_6009294086

The code for this is grabbed from when you go to Google maps and map your address, it’s the link they provide for embedding into a web page.

Here’s the actual coding in MSword so its editable: Map Codes for Fan pages

a couple of people let me know they couldn’t access the word doc, so I am putting the coding here as well:

Some applications that may come in handy for this, if you need screen shots and editing. http://aviary.com/ and

http://webitect.net/design/50-free-tools-every-designer-will-love/ (some good free graphic design apps about 1/4 of the way down.

————————————————————————————————

I just recently started my own Fan Page, (after helping a bunch of people set up their’s I finally got asked “where’s yours”) LOL

The Cobbler’s children go without shoes. So if you find this useful at all, I would appreciate a fan or so. :)

http://www.facebook.com/forfengdesigns

Lodging Marketing:  http://chefforfeng.wordpress.com/marketing-for-lodging-resources/

Restaurant Operations:   http://chefforfeng.wordpress.com/restauranting/

Share

About Heather Turner

Innkeeping Tip and Tricks: Please check out some marketing ideas for Inns and B&Bs, Blogging ideas, Facebook Tips and Social Media Tutorials http://chefforfeng.wordpress.com/marketing-for-lodging-resources/
This entry was posted in Hospitality News, How tos, marketing, Observations and tagged , , , , . Bookmark the permalink.

16 Responses to Adding a Google Map to your Facebook Fan Page

  1. I wanted to incorporate the application to bind the Google Maps tab and as I changed the user name for the address. What could have happened? Thank you

  2. Fluke says:

    Thanks for solve my problem. Last night I can’t put Google map on Fanpage but now it’s solved.

    Just now know this App. lol

    Thanks from Thailand.

  3. Selma says:

    That was so so useful! You’re my hero! Many thanks for sharing!

  4. This is something new and very interesting to me. Thank you so much for sharing Heather :)

  5. Contact Tab is an application for Facebook Fan Pages. You can easily show your contact information, contact form Bing Map and Google Map at your Fan Pages. -

    http://www.facebook.com/ContactTab

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s