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
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 =-.
Hi Dennis – Ok :-)
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
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
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 :-/
Hi Hawkins – You could use html for an image.
http://www.w3schools.com/tags/tag_IMG.asp
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! :-)
Hi Kim – Glad you figured it out :-) I have been traveling am not keeping up with comments and questions very well ;-)
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 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.
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
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”>
ok will try this, thank you. :)
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?
Hi Thom,
Sorry about that. Try putting the code tag around it.
<code> code here </code>
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?
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.
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 Thom – I’m glad you got it working. I store images on my own server so I haven’t run into this issue.
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 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.
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???
Hi Janly – I’m sorry but I don’t know how to show the photo of the user who is visiting the page.