How to Use FBML to Display Your Profile Photo on a Custom Facebook Fan Page
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
Keep Reading:
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”
Trackbacks/Pingbacks
- » Blog Archive » How to Build a Facebook Landing Page for Your Business
- A Simple Guide to Running a Facebook Page | Confident Writing
February 23, 2010 at 9:37 am
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 =-.
February 23, 2010 at 2:23 pm
Hi Dennis – Ok :-)
March 7, 2010 at 2:16 am
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 =-.
March 7, 2010 at 6:39 am
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!
March 11, 2010 at 8:00 am
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.
March 11, 2010 at 10:10 am
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.
April 14, 2010 at 10:27 am
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
April 14, 2010 at 2:59 pm
Hi Charlie,
This fbml tag will do what you need. It hides content from visitors who aren’t fans.
http://wiki.developers.facebook.com/index.php/Fb:visible-to-connection
April 28, 2010 at 4:16 am
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 :-/
April 28, 2010 at 8:30 am
Hi Hawkins – You could use html for an image.
http://www.w3schools.com/tags/tag_IMG.asp
April 28, 2010 at 4:58 pm
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.
April 29, 2010 at 9:49 am
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.
August 17, 2010 at 4:30 am
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?!?
August 17, 2010 at 5:20 am
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 … ;-)
August 17, 2010 at 7:37 am
ahh .. i figured it out. Turns out I had made the image 525 px wide … FB only allows images that are 520 px wide! :-)
August 20, 2010 at 9:24 am
Hi Kim – Glad you figured it out :-) I have been traveling am not keeping up with comments and questions very well ;-)
October 4, 2010 at 10:24 am
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
October 5, 2010 at 9:09 am
Hi Anna – An image from a fan page or profile can be shared to your profile wall. I don’t think, however, that it will go into your album.
October 11, 2010 at 1:54 am
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
October 12, 2010 at 8:27 am
Hi Rose – I think you would need to use the link to the image rather than
the html code that they provided. It would be
<img src=”link to image.jpg”>
October 14, 2010 at 11:59 pm
ok will try this, thank you. :)
January 3, 2011 at 2:20 pm
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.
January 4, 2011 at 8:37 am
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.
January 4, 2011 at 1:51 pm
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
January 4, 2011 at 1:53 pm
why can’t i show you the code i entered?
January 4, 2011 at 2:48 pm
Hi Thom,
Sorry about that. Try putting the code tag around it.
<code> code here </code>
January 6, 2011 at 2:11 pm
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?
January 7, 2011 at 7:00 am
Hi Thom – Yes, if photobucket is working, try a different site. I haven’t tested a flickr image so you would want to test one before uploading your images there.
January 7, 2011 at 5:25 pm
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!!!!!!!!!
January 8, 2011 at 8:02 am
Hi Thom – I’m glad you got it working. I store images on my own server so I haven’t run into this issue.
February 5, 2011 at 10:55 pm
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.
February 6, 2011 at 7:52 am
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?
February 9, 2011 at 9:32 am
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.
February 9, 2011 at 4:50 pm
Hi Erica – The image on photobucket must be too large – the height and width parameters won’t resize the image – they just say what the size of the image is.
April 20, 2011 at 8:53 am
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???
April 25, 2011 at 1:49 pm
Hi Janly – I’m sorry but I don’t know how to show the photo of the user who is visiting the page.