Posted on 22 February, 2010 By 36 Comments

How to Use FBML to Display Your Profile Photo on a Custom Facebook Fan Page

 

pixie profile (by atomicshark)

On custom Facebook pages images must exist on your own server (or somewhere else on the internet) and linked to from the Facebook page code.

The only images that can be uploaded directly to Facebook are the logo for your fan page and the image used on your profile page.

FBML provides code that will pull your profile or logo picture to your fan page so you don’t have to link to it from a different server.

Here’s how you do it.

The fbml tag is fb:profile-pic and looks like the following:

<fb:profile-pic uid="629152408" linked="true" size="normal" />

The only required attribute is uid. This is the ID number for the profile or fan page. Locating the UID is easier said than done but, then this is Facebook ;-)

To get the uid for your profile photo go to your photos tab. Click on any photo. In the address bar in your web browser, the url will end with id=629152408. That number is the uid you use with the fbml profile pic code.

To get the uid for your fan page, click on the logo. The url in the address bar of your web browser will end with id=84300445447. That number is the uid.

Please note that in the above examples I have used my own uid’s. Your numbers will be different.

Other attributes for profile-pic are optional.

  • uid – the id number for the profile or fan page (this is not optional)
  • size – the size of the image. Values can be thumb (50px wide), small (100px wide), normal (200px wide), and square (50px by 50px). The default used is thumb is a size isn’t specified. If you want to set a specific size, use width and height, which are listed below.
  • linked – makes the image link to the user’s profile. The default is true, which links to the page
  • width – sets the width of the image in pixels

  • height – sets the height of the image in pixels

As I was writing this it occurred to me that locating the uid is a pain. It used to be easier before you were able to get custom names. Does anyone know a better way? By the time the uid is located and used with the fbml code, an image probably could have been uploaded to a server and linked to on the custom page.

Anyway, that’s how to use fbml to display your profile picture or logo on a custom facebook fan page.

photo credit: atomicshark


Digging Into WordPress

Keep Reading:
Posted In : Facebook

Did you enjoy this article? I can assist you with your WordPress or Facebook project. Contact me and I will provide you with an estimate. You can also connect with me on Facebook or follow me on Twitter. If you are looking for Hosting, WordPress Theme, Newsletter or other recommendations, please view my detailed list.




36 Responses to “How to Use FBML to Display Your Profile Photo on a Custom Facebook Fan Page”


  • OK maybe I’ll start that FB blog as a backlink treat to you! ;)
    .-= Dennis Edell´s last blog ..I am Unsubscribing From Your Blog – Again =-.


  • I just created a fan page and going through all your FBML posts to check what kind of customizing is possible… I hope to make it a decent looking fan page though I am not confident of keeping this fan place active – I myself reduced a lot on my online commitments.
    .-= Ajith Edassery´s last blog ..QueryAds Affiliate Program =-.


    • Hi Ajith – I’ve found that if you get enough fans they start talking to each other – but it took until I got 500 for this to really happen. It’s been a slow process. But, it has sent some work my way – and I do like figuring out
      how things work.

      I’m glad you started a page!


  • i have a fan page with 600+ fans and want to set up a welcome page with a diff jpg image
    i know its possible as i have seen many others, i just cant find the code to do it and i have no idea about that sort of stuff.


    • Hi Julia – It requires adding the Static FBML application and then adding content with html and fbml. Also, if the fan page is associated with a business account rather than a personal account, you will not be able to add Static FMBL.

      Using the application requires knowledge of html and css. People who don’t know how to do that usually hire someone to make it for them.


  • Hi,
    Thankyou this was very helpfull. However I was wondering if there is a way to make it so that part of my tab that I used FBML for can only be seen by fans, I have seen this before and would like to know how it was done.

    Regards

    Charlie


  • I have been trying to add a logo to a tab I created but I haven’t had any success…how do I go about do it?

    Confused :-/


  • Do you know if it’s possible to recreate all the stuff you see on the left hand side when you’re viewing the wall? Profile photo, information, fans, photos, etc. When you add a tab it’s just completely blank.


  • Hi – Not as far as I know. Even if you use screenshots on the left side of the layout it’s still not going to look exactly the same.


  • Hey, I have been trying to post a off-site image on a tab, but I cant get it to work …

    The image is located here: http://vhm.dk/archive/Vhm_Dansk/Billeder/Historisk%20Arkiv,%20billeder/Hjørring%20historier/hjoerringhist-01-stor.JPG

    So I would have thought the html tag I should use in FBML would look like this:

    … could you pleeease help?!?


  • hmmm … it dosen’t show html tags … anyway I did this:

    img src=” FULL ADRESS OF IMAGE ” alt=” ALT NAME ” /

    beginning and ending with the <'s … ;-)


  • ahh .. i figured it out. Turns out I had made the image 525 px wide … FB only allows images that are 520 px wide! :-)


  • Kim,
    thanks for information. Can you please advise how to do otherwise? to share an image from fan page so that it would be posted in user’s profile? I mean – to allow user to get an image from fan page and post it to his profile album


  • Hi Kim
    I have been trying add an image to my GRAZIERS MENU tab in facebook. I got the image on photobucket and trying to use the HTML code but its doesnt seem to work. So frustrated. Would you please help me. The link Im using is

    My facebook page is http://www.facebook.com/GraziersSteakhouseParkwood

    You will see on the Graziers Menu tab only a little box show up. :(

    Regards Rose


  • Wow, i think i am close but STILL not getting desired results. Trying to put a photo from photobucket to a static FBML page i created in my facebook business page. I tried HTML from photobucket … only get the white box with the red X. I click on one of the white boxes and it launches into photobucket. I tried image code from photobucket …. nothing but a white page appears. I tried doing the thing and again …. white page appears. I SIMPLY want a photo to appear in my static FBML page (welcome page) NO links to other sites etc … With or without photobucket! I’ve looked at you tube videos, and read 7 different websites and they all talk about linking photos to websites once you click on the photo. I just want a photo on my welcome page without linking to outside websites.


    • Hi Thom,

      You should be able to link to the photo with

      <img src=”url to photo” />

      If it doesn’t display with that, then Facebook might not be pulling photos from Photobucket.


      • Kim, thanks for the response i tried what you suggested and i got the white box with the word “photobucket” and a red X.
        Is there are way without photobucket to insert a photo (no clickable links) in the FBML? I must be close here! here is the code i put in the FBML page.

        The xxxxxxxxxxxx is my photobucket username i replaced with x’s


  • why can’t i show you the code i entered?


  • I just tried a random image from a random website and the image appeared! So all i can assume is …. it must either be a code thing i am doing wrong OR a photobucket thing. I just e-mailed them to see if they can help. Should i store the images i need at a different online service like flickr or something similar?


  • I figured it out … All i did was put a photo i want to use in my “photos” section on my facebook page. Pull up the photo, right mouse click on the photo, click on properties. Copy the URL address. Go to the FBML page. Put the cursor where i want the image to begin and type <img src=
    Paste the URL address that you copied, NO spaces, NO Quotations around the code. Then i ended the code with >

    The photo appeared!!!
    No need for photobucket!!!!!!!!!


  • Hi Kim!

    I’ve started yesterday a fan page and i’m trying to figure out how can send a private message to a person with my profile picture (and name).

    I have no idea what is wrong. I’ve tried to send a prvete message to my personal facebook and it shows nothing… a blank space where the name should be going and the predetermined avatar from facebook.

    My information apparently is ok and i’ve uploaded my profile image like four times.

    Please give me a solution.


    • Hi Rodrigo,

      What are the steps that you are following to send the message? Are you going to your friends profile and clicking the send message button or are you trying to send an update from the Edit > Marketing section of the fan page?


  • Hi! I’ve figured out how to get a photo uploaded using the static FBML app, and have successfully linked it out to the URL desired, but the image is too big. I have height and width parameters set, and am using photobucket as the hosting service. The code I’m using is below. How do I get the image size reduced? Simply changing the parameters didn’t change it at all.


  • Hi Kim, i’m working on my friends page and i was looking for some tutorials on how to edit those codes…i found your page when i was searching and i just wanna ask on how to permanently display the profile picture of visitors…i looked on page source of facebook and i can’t find any variables of UID…can you please help me???


Trackbacks/Pingbacks
  1. » Blog Archive » How to Build a Facebook Landing Page for Your Business
  2. A Simple Guide to Running a Facebook Page | Confident Writing
Leave a Comment
You may use: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> .

CommentLuv badge

About

Kim Woodbridge is an accomplished Information and Technical Consultant specializing in the entire implementation of a WordPress based website including installation, theme design, upgrades, unique customizations and ongoing site maintenance.

Recent Comments

    • Tanya: These are some great plugins! Will have to try a few out, Thanks :) Love that its free too!...
    • Gary Starkman: I wonder if there are gonna be any new posts, I'm a big fan of posts like this one, really is helpful....
    • Raviraj: I am a big fan of woocommerce.. I have installed in many of my websites.. Glad to see these awesome free woocommerce ext...
    • Gary Starkman: Thanks for sharing, put a smile on my face....
    • vaibhav: I have a friend with one. This might help him. Il ask him to contact you...

Wordpress Services

  • Installation, upgrades and maintenance
  • Conversion of existing html and css templates
  • Theme and plugin recommendations
  • CSS customizations
  • Troubleshooting and tweaks for unique situations
  • Customization for individual blogging goals and needs
  • Training and advice