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


Post a Comment