How to build a Facebook Landing page with Google Docs

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.

Here the most simple way with stunning good results .
As Google docs offer a very good editor you can write and edit your landing page fully in google docs. Style it insert pictures frames buttons and even make some extra css styling.
Follow the steps and you will done your landing page in minutes instead of hours and days .
1) Check that your Google document Settings  is in the old mode and the box “NEW version of Google documents” is not active .The new mode don’t support web publishing  right in the top corner

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

2) Start with you text format them chose the right fonts ect
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.
To change background Color in google docs
add in EDIT CSS these for my black background. The parameter important ovride googles CSS.
body {background-color: #272727 !important;}
3) Insert pictures and graphics from web links
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

You can add it from a url or your computer if you upload too goolge remember that the link to the file will look somehow like these for your background that have to be added to the CSS
Final Css in Facebook could be different to the one from your blog to override Facebook Style Css to your all Tags need to have the parameter !important.
Or you load your external CSS to the Facebook 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

| Webpage preview |  in the docs menu.
7) Important relink your Images
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 🙂
8) Add it to your Facebook Page
There are 2 ways to add a Landing Tab to your Page via Faceook App or with
Static FBML.
We chose  the simple way and add a Static FBML to your Page.
Add 2 Style Tags <style>  ……    </style>
Copy CSS between the too stlye tags on the Static FBML
Copy Past the HTML code generated with google docs into the FBML .
Save Changes and thats it . For Editing Google Docs Documents Safary is not well suported use Firfox instead image and Tab rescaling. 

What is the benefit of these Google Facebook  method ?

  • Simple user-friendly interface, No extra software with and additional learning-curve needed
  • You can change update the Text very fast even from your Iphone / Ipad
  • Google overs many additional web tools that can be easy and fast integratet (Google analytics ,Maps, Spreadsheets ,News Aggregators, youtube videos )
  • The future roadmap of Facebook will go to frame to .
  • Last but not least fully Free
Here we make simple  landing page Template that you can copy as a starting point , some nice background graphic would pimp it up.

Template 1 Tutoral

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

WELCOME TO OUR FACEBOOK FANPAGE

Fan us un Facebook and invite some friends to win a romantic Holiday for 2

Choose a destination and like it :

100.- Funpark
ok
Paris 150.- Romance
free
Moskau 70.- Icescating
booked
Berlin 50.- Mauer
free

The more you Like the more your chance to winn .


Connect with Facebook if you are not logged in 
Last Travel pics from Fans.

———————————————————————————————————– Template 2 more advanced coming soon

———————————————————————————————————–

Hope these little tutorial was somehow useful for you don’t judge too hard its one of my first 🙂 .If any question or suggestion just ask in the comments i will answer every one i can.