fb Tag

How To Create a ‘Welcome’ Landing Tab for New Facebook Pages

On 10th March 2011 Facebook will upgrade all pages for brands, companies and organisations to a new version of Pages, bringing the design in line with personal profiles which were upgraded in December 2010. For details about the changes read my last blog post here.

‘Static FBML’ tabs, with which you could quickly add extra tabs containing basic HTML to show text, images and videos are being phased out so that you won’t be able to create them after Thursday. This means adding a simple Welcome tab like the ones above which introduce new visitors to your Facebook page (and encourage them to click ‘Like’) is about to get a little complicated. Here’s my step-by-step guide to the easiest and quickest way to create a ‘Welcome’ tab:

  1. Create an image 520px wide and a maximum of 800px high with your Welcome message on. As in the examples above this can include a strong call to action to ‘Like’ the page. You can start with this very basic Photoshop template and save in a new folder called ‘welcometab’.
  2. Open your text editor of choice (Notepad+ for Windows, TextWrangler for Mac perhaps?). Add the following code into a new document replacing my ‘http://yoursite.com/welcometab/IMAGENAME.jpg’ with the address of your own image:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1" />
    <style type="text/css">
    body {
    width:520px;
    margin:0; padding:0; border:0;
    }
    </style>
    </head>
    <body>
    <div id="fb-welcome">
    <img src="http://yoursite.com/welcometab/IMAGENAME.jpg" alt="Click 'Like' to get started" border="0">
    </div>
    </body>
    </html>
    
  3. Save this as fbwelcome.html in the ‘welcometab’ folder and upload the folder and its contents to your FTP.
  4. Visit facebook.com/developers. If it’s your first time here you’ll need to add the developers app, which you’ll be prompted to do. Then hit the ‘Set Up New App’ button in the top-right of the page.
  5. Name your new app ‘Welcome’, click ‘Agree’ and hit ‘Create Application’.
  6. On the next screen describe your app and add icons for it. The icons are important because without them you will see the default ‘gears’ logo next to the app’s name wherever it appears around the site. You’ll need a 16px x 16px image and a 75px x 75px image:
     
    Enter your other details such as email address and support URL and then click ‘Facebook Integration’ in the left-hand menu…
  7. This is where you point to your iframe.
    In the ‘Canvas’ section just enter your iframe URL in ‘Canvas URL’ e.g. ‘http://yoursite.com/welcometab/’, select ‘iframe’ in ‘Canvas Type’ and move onto the bottom half of the page…
     
  8. Enter the name as you want the title of your Welcome tab to appear and then in ‘Tab URL’ enter ‘fbwelcome.html’ and click the ‘Save Changes’ button:
     
  9. You’ve now created the app and should find yourself on the app developer dashboard looking at an overview of your new app:

    Click ‘Application Profile Page’…
  10. On this page click ‘Add to my Page’ in the left-hand menu and in the overlay that appears click the ‘Add to Page’ button next to any of your pages to add your new app:
     

And that’s it, you’re done! You can create as many apps you need in future, and as the iframe is a webpage hosted by you, you can add what you like there, including previously prohibited goodies like Flash, JavaScript etc which is a great boon, despite the inconvenience of simple ‘Welcome’ apps taking a bit longer to build.

Anything to add? Think there’s an easier way? That’s what the comments are for 🙂

0
0

HOW TO: Customise New Facebook Profiles (With Free PSD)

Facebook profile customised with profile pic and gallery

There have been some amazingly creative uses of Facebook’s new profile layout recently:

Lexy Page Facebook ProfileAia Facebook ProfileThibaut Facebook Profile

You can see more cool examples here and here. There are two ways to do this, depending on whether you have Photoshop or not…

WITH PHOTOSHOP

STEP 1: Download this Photoshop PSD file:

Download the PSD here

STEP 2: Drag a picture of yourself into the canvas and put that layer behind my layer (which is essentially a Facebook screenshot with holes in) which should look like the image above.

STEP 3: Move and resize your image until you’re happy with how it looks.

STEP 4: ‘Save for Web’. Select the ‘JPEG High’ preset. In the following screen where you choose a filename select ‘All User Slices’ in the ‘Slices’ drop-down. Click Save.

STEP 5: You’ll see the 6 images you have saved are named:

  • Gallery-Pic-1-(tag-last)
  • Gallery-Pic-2
  • Gallery-Pic-3
  • Gallery-Pic-4
  • Gallery-Pic-5-(tag-first) 
  • Main-Profile-Pic

Upload these to Facebook in a new album

STEP 6: Make ‘Main-Profile-Pic’ your profile pic and then tag yourself in the gallery images to make them appear. IMPORTANT: you must tag yourself in the gallery images in the correct order, starting with the one on the very right, working your way to the one on the left.

STEP 7: Remove any unwanted news feed items from your profile generated whilst creating this. And you’re done!

WITHOUT PHOTOSHOP

For a quick, easy way to do this you can use new service profileheaders.com where you can login using your Facebook credentials and quickly create a snazzy looking profile.

Have fun, and share the fruits of your labour (your Facebook URL) in the comments 🙂

0
0

How To Add Facebook ‘Like’ Button To Your Blog or Tumblr – UPDATED

Updated in May 2012

There doesn’t seem to be a simple step-by-step guide on the web so I’m writing this, particularly for Tumblr users but it will apply to other platforms too…

STEP 1:

Copy this code:

<meta property="og:title" content="{block:PostTitle}{PostTitle}{/block:PostTitle}"/>
<meta property="og:site_name" content="{Title}"/>
<meta property="og:image" content="{PortraitURL-128}"/>

STEP 2:

Go to tumblr.com/customize and click ‘Edit HTML’. Paste the code above somewhere after <head> and somewhere before </head>.

STEP 3:

Copy the code below and paste it into your theme code so it appears in the footer of each post, somewhere after {/block:More} and somewhere before {block:Permalink}:

<iframe src="http://www.facebook.com/plugins/like.php?href={Permalink}&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=evil" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:165px; height:24px"></iframe>

You can play with the width to make the text appear as one or more lines. You may also have to experiment with pasting that code in different places to get the Like button to show up where you want it.

STEP 4:

Save your theme changes and check out your blog. You can see an example at the top of this very post 🙂

For more info from Facebook go here or drop me a line.

0
0