Oct 27, 2011

Create a FaceBook Landing Page



Last night I finally made a landing page for my Official Author Page on Facebook. It’s easier than I thought and there are two ways to do it. So, today I thought I would set out some easy instructions.
Creating the information
First method  This is the easy way. It uses photoshop or any other photo manipulation software. Basically it involves creating an image of what you want to appear in the main section of your page and saving it. In order for it to it be clear it needs to be a decent resolution. I suggest 96 dpi or higher and between 500 to 520 pixals in width. For example:
FB page
Next, upload it somewhere online, either your file storage on your site or wordpress. I use PhotoBucket but anywhere that can provide a direct link is fine.
Second Method  This is for the slightly more adventurous. It uses HTML coding but I am going to walk you through some examples. Simple coding isn’t as scary as you might think.  Create only a header and upload or if you prefer the title can be written in code too. All other information can be written directly to the page.
Add the Welcome Page
EDIT 2012: Facebook is no longer allowing new FBML tabs, nor will the page open on the landing page as default. Any existing FBML apps will stop working from Jan 2013. However, a welcome page is still relatively easy to achieve. Now Facebook uses iFrame. Good points about iFrame. It allows 'fan only content' for the welcome page. The new system also allows custom tab images. Here is how to achieve it.
This is the same for both methods. Go to the Facebook you want to add to.In search type Static HTML. This will bring you too the app page. You want to add the app. Use the dropdown to add to whatever page if you have more than one and name the tab. You will now see it in your tabs on your page.
Click on it to open. As admin, you will see the edit button. Follow the same instruction below.


First Method In the HTML box use this code
<img src="INSERT DIRECT LINK TO IMAGE”>
 Save changes. Go back to your page. You should now see your welcome page on your list.
Second Method
If you are using an image header add it in the same way as the fist method. If you want to use code, skip it.
Now for the coding. There is one important thing to remember when wrapping text in code. That is to open and close. <> open and </> close. If you don’t close the format will continue onto the next line of text.
The simple coding I used.
Font Color      <FONT COLOR="#insert color number">text goes here</FONT>   LIST
Font Text       <font face="Insert font name, insert second font name">text goes here</font> If using an unusual font add a second as a back up in case the first doesn’t show on some viewing devices. 
Font Size        <FONT SIZE="3">text goes here</FONT> 
Bold                  <B>insert text</B>
Italics               <i>insert text</i>
Center  Text    <center>text goes here</center>     To align left leave this out.
Other coding required
Return line      <br>
Space between lines   <p>
Image code   <img src="INSERT DIRECT LINK TO IMAGE”>
Link      <a href="Link to destination">Text to show or Image code as above</a>
The best way to get the look you want is to play around. Here are some easy examples based on what I used.

<center><FONT SIZE="3"><font face="times new roman">Welcome and thank you for visiting my official facebook page. <br>Please take a moment to click the "Like" button above. </font></FONT></center>
Welcome and thank you for visiting my official facebook page.
Please take a moment to click the "Like" button above.

<center><FONT COLOR="#603913"><FONT SIZE="3"><B><font face="charlemagne Std, Times New Roman">Reviews</font></FONT></FONT></B></center>

Reviews


If you want only one word in italics or bold, place the code only either side of the word or words.
Carol’s love of writing about anything not entirely “human” emerged, and the premise for her debut novel, <i>Shades of Atlantis</i>, was born.

Carol’s love of writing about anything not entirely “human” emerged, and the premise for her debut novel, Shades of Atlantis, was born.

<a href="http://www.CarolOates.com"><center><FONT COLOR="#603913"><FONT SIZE="4"><B><font face="charlemagne Std, times new roman">Visit me at CarolOates.com</font></FONT></FONT></B></center></a>
Save and Publish. So there we go. Easy enough. I hope.  
Now you have your page, you will want your custom tab. On your page in the right hand corner of the tab there is an edit button, a little pencil. Click and drop down to edit settings. Change tab image and browse. The image should be 111 x 74 pixels.


Giving your Author Page an individual User Name
Have you ever noticed how some pages have a string of numbers after the page name. Well, now there is a way to change that. You will need 25 likes for this to work.
This is easy and even if you don’t add a welcome page, everyone who can do this should. It makes the URL cleaner.
http://www.facebook.com/username/
fb 3
Use the drop down menu to select your page and check for available names.  Save changes. *This can only be done once for each page, so be sure you are happy with your choice*
On to the Bounce
Here's how this works:

If you are an author, click on "Get the Code Here" to get the link. Copy and paste that link in your blog post. Then hop right on and add your blog url to get added to the list.

If you are a reader, you get to bounce from blog to blog and meet some great new authors and maybe find some new books to read.

So everyone hop on and go for a bounce!

2 comments :

  1. Of course Facebook couldn't make anything entirely simple. *eyeroll* But this will be a great help if I ever decide to give my Facebook page attention. And that's an excellent tip on the custom name---looks so much nicer on a postcard or whatnot than those hideous long numbers.

    ReplyDelete
  2. OMG I'm going to have to come back to this post when I'm not so tired because it looks like it has some great stuff! Thank you for sharing.

    ReplyDelete