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 a second tab: http://www.facebook.com/apps/application.php?id=128953167177144
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.
Will click directly over to Google Maps when clicked on but you can’t move the location within the map.
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)
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
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. :)
Lodging Marketing: http://chefforfeng.wordpress.com/marketing-for-lodging-resources/
Restaurant Operations: http://chefforfeng.wordpress.com/restauranting/