Image Map in Facebook Page (FBML) - Easy to do with Dreamweaver & Online Tools

Putting Image Map in great way to customize look and feel of Facebook Landing page.

Why a Image Map

1. Easy Create Links on Desired places
2. Creating a Navigational division of Facebook pages
3. Buttons and Call of action links

Funny Parts

~ HTML Image Map Code Not Displayed by FBML on Facebook Pages.

What Need To Be done

~ First my image map example page on Facebook or Look below :

ONLINE View :http://www.facebook.com/pages/Sujit-Kumar-Lucky/290573716118?v=app_7146470109

Now How we can create image Maps using Tools

• Choose Your Desired Image/ Custome Banners, or Newsletter Templates
• Go to http://www.image-maps.com Uplaod , Customize your image map using given options
• Must Check CSS for Facebook
• Get the code (take css code for facebook)
• Add them in FBML Box

Image Maps Tips using Dreamweaver (it is not genral HTML image map , it is for css based image map for facebook FBML)

• Put CSS code like

<div style="display:block; width:400px; height:300px; background:url(http://lh3.ggpht.com/_OltSlmJcGKE/TTc1x6E84aI/AAAAAAAAApk/QQb4wIP6Sds/work-life-balance.jpg); position:relative; margin:2px auto 2px auto;">

<div><a style="left:144px; top:36px; background:transparent; display:block; width:112px; height:20px; padding-top:25px; overflow:hidden; position:absolute;" title="sujit - SEO/SMO Analyst" href="http://sujit-seo.blogspot.com/"></a></div>

• Now to exactly create a desired location links on image just copy a layer of div and scroll through it images on Dreamweaver..

Posted: Sujit