How To Add An Image To FBML App For Facebook Fan Pages

Facebook Fan Page FBML App – How To Add an Image

The FBML app for Facebook Fan Pages can be challenging, especially if you are just getting started with figuring our its capacities, and its limitations regarding HTML.  One of the easiest HTML elements to add to the FBML app are images. And adding custom images to your Facebook Fan Page is a great way to brand your own business on your page.

Add images to the FBML app:

The first thing you need to do to add an image to your FBML app is to upload your image to a server.  If you have a WordPress blog, then you can click “Add New” underneath your “Media” section on your WP dashboard.

Otherwise, you can use a free hosting service like Google Sites to upload your image.

Ultimately, you need a URL for whatever image you are wanting to add to your FBML app.

Once you have a URL for your image, then adding it to your FBML app is as simple as adding standard HTML code for an image.

Here’s the image I have added to my default landing tab for my Facebook Fan Page:

You can also see my entire custom FBML tab here.

And for the image you see above, here’s the HTML code that I’m using:

<img src=”http://seoscale.googlepages.com/facebookfanbutton2.gif”>

Now if you wanted to link your image to an external website, then you’d add the following HTML element to your image HTML:

<a href=”http://yourwebsite.com” target=”_blank”><img src=”http://seoscale.googlepages.com/facebookfanbutton2.gif”></a>

Notice how the linking HTML is now wrapped around the image HTML.

I also added the element target=”_blank” since that allows your link to open in a new window.  Of course, all you’d have to do is remove the target=”_blank” element to have the image open in the same window.

27 Responses to “How To Add An Image To FBML App For Facebook Fan Pages”

  1. Tim Ware

    Great post here, Robert. First, I assume you're talking about the Static FBML app for Facebook fan pages, correct? It's really quite flexible and we've used it to customize a number of fan pages. I've posted both a Static FBML FAQ and a Static FBML tutorial on the HyperArts blog, which your readers should find useful. There are also a number of other resources on our blog regarding Facebook programming, social media and WordPress (which we LOVE for site development).

    Anyway, keep up the good work!

    Reply
    • Robert Holland

      Hi Tim – I'm always open to writing up a review of your site, services, and business which is a great way to get your business and content in front of the readers of this blog. Each article is also syndicated to our Facebook Fan Page and Twitter profile.

      If you'd be interested in having us do that, feel free to contact me (contact link on the right hand side bar) anytime!

      Thanks again…

      P.S. careful with your links, there is a fine line between comment spamming and contributing.

      Cheers!

      Reply
  2. eliz thomas

    Facebook Fan pages seem to be broken as of a couple days ago our Fan Pages posts no longer show up in Fan's news streams. Anyone have any ideas? Thanks!

    Reply
  3. Ashley

    Hi! For some reason, my image is linking itself back to facebook and I don't know why. I'd like it to link to the external site I provided in the code. Could you please tell me what I am doing wrong? Here is the code I'm using:

    <img src=". width="350" height="330" border="0" target="_blank" />

    Reply
  4. Lynda Cromar

    I don’t know what I am doing wrong I have copied your code exactly for a facebook image in the fanpage but I get that little nugget that says its not there

    Reply
  5. teen72

    Hi, thanks for a brilliant tutorial.

    I am having a lot of trouble though. I have copied your code to input an image under my new Welcome Tab, but for some reason the image is not showing up, it is just a tiny box with a cross in it. My image is 520 x 703 pixels and is an RGB image. The code I am trying to input is:

    Do you have any idea what my problem could be? When I try to input the image and link directly to the site, it doesn’t show anything at all – not even the tiny box.

    This is the code I have been putting in for that:

    Any information you can give me would be most appreciated. :)

    Reply
  6. Nondas

    Worked perfectly, thanks heaps! :)

    Reply
  7. Vince

    Got a question for you: I’ve added a picture to my new FBML tab and need to put a text below the picture. Unfortunately, it doesn’t work. The text is always behind the pic. Can you help me? I struggle!

    Reply
    • Bipper Media

      Hi Vince – can you post the code you are using in your FBML tab so I can have a look?

      Thanks

      Reply
    • Tablet Crunch

      Hi Vince – can you email me the code that you are using for your Fan Page?

      I’ll take a look at what you got…

      email: [email protected]

      Reply
  8. Bipper Media

    you forgot the closing

    Reply
  9. SMSEO

    Hi Katrina – try this:

    You forgot the closing tag “”

    Reply
  10. SMSEO

    if you send me your code to email “[email protected]” I will check it out and reply – I can’t reply in comments because the comment box doesn’t allow html closing tags.

    Reply
  11. mf

    Hi Robert, thanks for this but my image showed up as a question mark. I tested the exact same code in blogger and it worked! I tried putting the image in a table as well – it just didn’t work on my Static FBML tab. Any idea why?

    Reply
    • Tablet Crunch

      Hi – if your image isn’t showing up then there must be something wrong with
      the code somewhere – can you please send me the code – along with a link to
      your fan page – that you are trying to work with?

      You can email it directly to [email protected]

      Thanks again

      Reply

Leave a Reply