Sunday, 25 April 2010

Facebook storefront banners tutorial

The new facebook payvment storefront is causing huge ripples in twitter etc as many of us are trying to set up our own stores over there. Well it is FREE so why not. Customising this page once it's set up is a great free form of advertising for your own online store. You can link your banner to your external store to direct your customers away from facebook and to your site if you choose.

Here's how

My page can be found here

I'll assume you already have your facebook storefront up and running to follow this tutorial. If not you need to set it up here.


- The first thing you need to do is upload your banner to an external host such as flikr. This tutorial will be using flikr as the example. It's free to have a flikr account so if you haven't got one, sign up, it'll only take a few mins.

- Once your banner is uploaded to your flikr account, you need to "VIEW ALL SIZES" This brings up the picture in different sizes on the screen. You want to view it in MEDIUM (500 x 177).

- There is some html code which you can copy onto your own web page which you will need to copy and paste into your facebook storefront.

- Open another window and go to your facebook storefront.

- Storefront admin

- Page content

- Copy the long html code from the flikr page and paste into the box which is titled HOME PAGE WELCOME.

- You can choose to save this now and your banner will be displayed in your facebook store front.


Do you want to link your banner to your external store? Such as Folksy or your own website.?

If so;

- You need to change the html code between the first two quote marks ("). This is the flikr address and will point your banner to where you have it stored on flikr, but we want to take it to your own site, so once the code between the first two quote marks is deleted (don't delete any further), you can then type in your own web site such as www dot buttons and beads gifts dot co dot uk.

- Press Save

When you view your own storefront banner you should be able to click on it and it'll take you to your own external site.


Do you want to resize your banner?


- I have found that if you use the large picture size from Flikr, your banner will come out too large, and the medium banner is just a little too short.

- The medium banner is 500 x 177. You can clearly see this in the html code on your welcome box page. Delete the number 500 and replace it with 750 to resize your banner. I find this size works quite well in the facebook store front. You can of course have it any size you choose.

I hope you have found this tutorial helpful. Please let me know if you find any errors in it. If it's help you please tweet about it. Thanks

13 comments:

  1. sounds good to me! I used my Blog banner, which seemed a good fit, quite by accident.

    ReplyDelete
  2. that's a good idea, I think it depends on where you upload to, as my blog banner in flikr just resized automatically.

    ReplyDelete
  3. Yay, Thanks for this, Just been able to get in and link my banner

    ReplyDelete
  4. Or - if you image is hosted elsewhere - eg photobucket or similar you can simply type in ...

    <*img src="url" />
    (do not add the * - that is in there so I can post the comment!)

    into the section - placing your image url into the code.
    My blogger banner fits perfectly. it's 800x200

    ReplyDelete
  5. You made that so easy ! I've been putting it off all day ( terrified !) and just done it in ten minutes ! Thanks - Sue xx

    ReplyDelete
  6. Fab! Nice and easy explanation got mine sorted in seconds thanks to this tutorial. Thanks x

    ReplyDelete
  7. Excellent advise, thanks very much!

    ReplyDelete
  8. Thank you - this worked for me too. x

    ReplyDelete
  9. I'm sorry but I'm stuck! I've done everything but can't find 'storefront admin' and 'content' to upload my banner. thankls for any more help LOL.

    ReplyDelete
  10. @Breadandcircuses

    have you opened a facebook store front? if so click the link from your facebook page that says "shop now" and you will see the storefront admin

    ReplyDelete
  11. Thank youuuuuuu! I was getting such a headache trying to work out how to add a banner yesterday! Although I can't check it's worked until I actually launch my shop can I?

    ReplyDelete