Wednesday, January 11, 2012

How to Make a Facebook Landing Page


Did anyone notice that I got a Facebook page started for my little ol' blog?

Yep.  AND when you swing by there (to Like me, of course) you will see my neat "landing page."  

I made it all myself and I will show you how to do the same!

First, you will need a graphic (jpg file to upload).  This is THE picture that you want newcomers to your fb page to see.  Apparently, it is also a way to encourage new "likers" by adding arrows pointing up to the Like button.


How to Make a Facebook Landing Page {5 steps}
1.  Make your graphic.  Use anything you are comfortable with.  I used Photoshop Elements.  But Picnik would work the same.  Just remember that the space you will be putting this thing is only 520 pixels wide.  I made mine 520 x 400.  The height is up to you, I just chose 400 and I liked it.  

Confession:  I actually made mine 1040 x 800 pixels (double) and then changed the dimensions in the html part (later).  Why? I don't know

2.  Save as jpg or png.  (If you need a transparent background, use png.  I saved mine as png, again, don't know why I do things.)  

3.  Now upload it to someplace like photobucket or picasa (or other photo-hosting website) and get the direct link and click to copy it.

4.  Click here to get the Static HTML app on your Facebook page (will need to login).  Click to install this app.



5.  Now, go to your Facebook page.  Click Welcome in the left column of your page 

and enter this code:
<body>
<img src="http://PasteLINKTOYOURPHOTOhere"/>
</BODY>

Click Save. Done.

If you did like me and made your graphic larger than 520 wide (hopefully you chose a multiple of 520 to make it easy), then specify the height and width you want it to be in the html.  Please maintain your proportions or it will be distorted.  Or if you load it and it gets cut off, you can adjust the width in this way by setting it slightly smaller, like 510, until it fits in your fb window.
Type this between "img" and "src" and it will work:
width="520" height="400"
Again, these numbers are the dimensions of my graphic on my landing page.  


Now if you want that to be the link from your Facebook icon on your blog, you will need to copy the link to your Welcome (aka Landing Page) and replace the link you have in your html associated with that icon on your blog.  This will be in your Blogger Template.  If you want an example just leave a comment and I will GLADLY show you where I am talking about!  I don't know what you already know about html and blog stuff! : )  I'd be glad to share, because I have done everything here myself.  I am happy to clarify anything too!  Just LMK : )

*****Also, check out the giveaway I am hosting.  Last time I looked there were no entries yet.*****
Linking here:
Let Birds FlySomewhat SimplePhotobucketA Crafty Soiree Transformation ThursdayThriftyThurs Thrifty Thursday Week 3436th AvenueCatch a Glimpse ButtonChic on a Shoestring Decorating Lovely Crafty HomeThe Shabby NestPhotobucketTodays Creative BlogTip Junkie handmade projects


30 comments:

  1. I already made myself a landing page a few months back but I am sure tons of people would love to know how to make one!

    Thanks for linking up to this week's Catch a Glimpse party! I will be featuring this tomorrow! :)

    ReplyDelete
  2. Cool! So I've always wondered, does a landing page come up everytime, or only if you haven't "liked" it before?

    ReplyDelete
    Replies
    1. I just added mine, and in the Questions and Answers section on facebook, it says that only those who are not already fans will land on the welcome page. Fans and Administration will automatically land on the wall page.

      Delete
  3. THIS IS SO AWESOME! BUT I UPLOADED MY IMAGE TO FLICKR AND IS NOT WORKING. ;.(

    ReplyDelete
    Replies
    1. Yes, flickr is tricky. When it says "direct link" it is not the one that works with this or adding photos to blogs, etc.
      TWO options: 1. upload someplace else, like photobucket.
      OR
      2. In the share options of your image on flickr...look in the "Grab the HTML Code box" OK. Find the text : img src="http OK. Do you see http and what looks like a link to your image? COPY what is inside those quotes, from HTTP to .JPG Now THAT code should work as your link.

      I tried to reply directly to you, but you don't have your email address in your profile so it is a noreply-comment@blogger.com which means my reply would just go to outer space. I do hope you see this reply : )

      Delete
  4. What a great blog! I am a new follower..when you have a chance, swing by my blog and have a look around (and don't forget to say "hi"!). Now I have to ask...how on earth did you get all your buttons to line up so perfectly? I have been trying to do this...with only a little success! :) Cath at Home is Where my Heart is http://cathhasablog.blogspot.com/

    ReplyDelete
  5. Thank you!! I've always wondered how in the world this was done! I'm sharing this on my Facebook page :) http://www.facebook.com/pages/Momma-Hen/123880607653210

    ReplyDelete
  6. This was a great tutorial! I did it on the first try, which, if you knew what a mess I am with this stuff, you would know that is a BIG compliment to your instructions. Thanks so much! I'm pinning it. Lisa~

    ReplyDelete
  7. Great tutorial! A FB landing page was already on my to do list for this week. Now I know what to do. :)

    ReplyDelete
    Replies
    1. Thank you for stopping by! If you run into trouble, let me know. I am glad to help!

      Delete
  8. This comment has been removed by the author.

    ReplyDelete
  9. If you want to resize to a certain width, but do not know the proper number for the height, you just leave out the "height=" part. The height will be adjusted automatically.

    ReplyDelete
    Replies
    1. This is a great tip! Especially if you already have an image that you want to use but just need to resize it. Thanks for the input!

      And your tip also applies to resizing images in blogs...in case anyone needed to know that! ie: Say, if your sidebar is 250 pixels wide and you want to fit an image there...then just type in width="250" and nothing for the height...your image will load on your blog's sidebar at 250 wide and whatever height it should be to keep it proportional and not looking wonky. Sometimes computers can be smart : ) Thanks Andrea!

      Delete
  10. Just FYI, you actually don't need the body tags :-)

    ReplyDelete
    Replies
    1. Thanks! you can see I am not an html genius : )

      Delete
  11. Thank you! I added it. Now if only I could get my "like" box to function correctly on my blog. It only shows up when it wants to... LOL!

    ~Linda

    ReplyDelete
    Replies
    1. Thanks Linda! (I hope you are reading this because your email address was not linked in your blogger profile...so I don't have a way to email you back to answer your question. I am hoping you will see this : )

      You asked if fans would also be sent to your Welcome Page...and the answer is, it depends. I have my Welcome Page linked from my fb icon on the top of my blog. So anyone who clicks it will go straight to the Welcome page. However, if you are just searching for the page or clicking to it in Facebook and you are already a fan, then you will skip the Welcome. You can still see it by clicking it on the menu list on the left side.

      Did I just confuse everyone? : )

      Delete
    2. I should also mention that if you wanted the welcome page to the be default landing page for your fb, you can set that up in Facebook under EDIT page. There is a drop down menu for your landing page options. Mine is set to Welcome.

      Delete
  12. Once you put it up can you get it off?

    ReplyDelete
    Replies
    1. Yes. You can either remove the code for your picture/graphic/etc and switch to a new one OR you can just delete the Welcome page altogether. If you put your cursor just to the left of the words Welcome on your left side menu (while on your fb page) an X will pop up. If you click that, you will delete the page.

      Delete
  13. Just foumd this on pinterest, thanks!

    ReplyDelete
  14. That's brilliant idea of making Facebook landing page. I just found it while surfing internet. Thanks!

    ReplyDelete
  15. That's a good tutorial! Facebook is not just a social networking site for the others. Millions of people are using Facebook that's why some business owner also entered on this field to promote their brand, services and even products. And making a Facebook page is one of their idea.

    Cris | Facebook Page Design Services

    ReplyDelete
  16. This is a wonderful post... I love that you used simple easy to follow instructions!!! I have been struggling with this for almost a month now. Thank you so much!!! ALSO awesome blog. I am totally going to be repining and referring people here!
    If you want you can check out my blogs and any suggestions that you have would be welcomed. They are...http://wholesomehealthandhome.blogspot.com/, http://what2wearwhere.blogspot.com/, and http://stellasofiaetsy.blogspot.com/

    ReplyDelete
  17. FB Page is useful too for business, popularity or whatever cause through . That's why though some may know about it, I also made a simple how to make a facebook page tutorial for those who are interested. Just giving them a piece of advice which is to be responsible page admins. Keep sharing informative stuffs about FB. thanks!:) goodluck with your page!

    ReplyDelete

Share this

LinkWithin

Related Posts Plugin for WordPress, Blogger...