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
Related Posts:
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 ;-)