As many Facebook Pages grow out i thought about how to make it supper simple to start with a own landing Page admins to get there nice landing page for there bussiness without the need to dig deep into html php and FBML Code.

Activate Fixed width-page in View menu of google docs to hold your elements in there position.

Keep in mind that Facebook allow 520px canvas size tray to format your google document to that size (example smaller the window) you can also add your blog theme CSS to the Google document to stay conform with your cooperate CI just copy past your blog CSS into the EDIT CSS  field of the google documents. It will not look exactly the same as long you don’t use the same classes but you get the real look and feel.

How to get webimage links ? right click and “Copy Image location”

Keep in mind to only use your own Graphics and Photos

If you what to add picture already uploaded to Facebook even better take these Photo links.

When you upload pictures to google the picture links will be relative and don’t work on a Facebook page. If you want you can change that links to a absolute by adding https://docs.google.com/.….to the image links but you have to edit in the html.

4) Spice it up with some Elements

Several ways the simple one to make it conform to your Webpresens load your Webpage Css Facebook pages allow up to 2 external Css loaded.

To change background Color in google docs

body {background-color: #272727 !important;}

Add following line on top of your html code

5) Adding video to your document

Aktualy you cant add video into the documents as google had removed that feature .But still you can add a fbml short tag to add video finally into your page. Go to html view and add following tags to add Flash video. It will only show up on your Fanpage not in the google doc .

Insert :

<fb:swf swfbgcolor=”000000″ imgstyle=”

border-width:3px; border-color:white;” swfsrc=’https://www.youtube.com/watch?v=8DoK6wZXUh8‘ imgsrc=’https://www.youtube.com/watch?v=8DoK6wZXUh8%3Fv%3D.jpg‘

width=’425′ height=”344″/>

6) Adding Background Graphik to your Page

table {background-image: url(“File?id=dfbz4cgr_132g7bq3mcs_b”);}

Change these to absolute file location

table {background-image: url(“https://docs.google.com/File?id=dfbz4cgr_132g7bq3mcs_b”);}

Test your Landing page several times during the edit proces go to View

As google host all pictures you use on there own server docent matter if you upload or link them from the web it need a short search and replace . For that you can use any basic Text editor like Note pad or Note++. Copy the Html code google docs proceed to the notepad .

Google Image Link will show like these

Search and replace

Serach for : <img src=”File

Replace with :  <img src=”https://docs.google.com/File

thats it now all image links are now absolute and reachable from Facebook.

Nice side effect hay load and visits will not affect your own server 🙂