This project is read-only.

Cannot get image to display in fbml

Feb 15, 2008 at 9:25 PM
Hey everybody. I'm having the hardest time getting images to show up in a user's profile (miniFeed or profile box).

I'm more concerned with the profilebox though. Here is the code I've tried

fbmlBuilder.Append("<div>");
fbmlBuilder.Append("<fb:name capitalize=\"true\" uid=\"");
fbmlBuilder.Append(fbApp.Service.UserID);
fbmlBuilder.Append("\" firstnameonly=\"true\" />");
fbmlBuilder.Append(" says <b> ");
fbmlBuilder.Append(msg);
fbmlBuilder.Append("</b>");
fbmlBuilder.Append("</div>");
fbmlBuilder.Append("<div> Join ");
fbmlBuilder.Append("<fb:name capitalize=\"true\" uid=\"");
fbmlBuilder.Append(fbApp.Service.UserID);
fbmlBuilder.Append("\" firstnameonly=\"true\" />");
fbmlBuilder.Append(" in my app!");
fbmlBuilder.Append("<img src=\"" + fbUser.SmallPictureUrl + "\" alt=\"" + fbUser.Name + "\" title=\"" + fbUser.Name + "\" />");
fbmlBuilder.Append(" Testing7 --- </div>");

Then later on, I set it by calling

service.Profile.SetFbml(profileFbml, service.UserID);

The problem is that everything displays properly EXCEPT the image. All of the text is there, with no image.

Can anyone shed any light on this?

Thanx!

Feb 22, 2008 at 2:58 PM
Edited Feb 22, 2008 at 2:59 PM
Two things: did you view the HTML source on the profile to see if the img tag is there but maybe with an invalid URL and did you include "pic_small" in your fields to retrieve for the user?

When you call GetUser, you need to pass in the fields to retrieve or NULL for them all. Like so:

fbUser = FacebookApp.Service.Users.GetUser(fbApp.Service.UserID, "pic_small,name");

Bill

P.S. A full list of the field names that you can pass in to get specific information is available on the Facebook Developer's Wiki http://wiki.developers.facebook.com/index.php/Users.getInfo#Response
Feb 22, 2008 at 5:08 PM

wcbrown wrote:
Two things: did you view the HTML source on the profile to see if the img tag is there but maybe with an invalid URL and did you include "pic_small" in your fields to retrieve for the user?

When you call GetUser, you need to pass in the fields to retrieve or NULL for them all. Like so:

fbUser = FacebookApp.Service.Users.GetUser(fbApp.Service.UserID, "pic_small,name");

Bill

P.S. A full list of the field names that you can pass in to get specific information is available on the Facebook Developer's Wiki http://wiki.developers.facebook.com/index.php/Users.getInfo#Response


Thanx wcbrown!!

No I didn't check the html for the page, but that's a great idea and a tip that I can use all the time. Thank you for that!

I didn't know there was a restriction on the image size as I've seen plenty of other apps that use pic sizes that are pretty big. However, using the smal pic is most definitely something that I'll try next. If I can get that to work, then I'll try to branch out to other images stored on my server.

Thanx so much!!
Mar 1, 2008 at 1:34 AM
Ok... I figured it out. =-)

The problem for me was that I was trying to use an image hosted by fb itself.

In my buildfbml, there was a line that goes:

fbmlBuilder.Append("<img src=\"" + fbUser.SmallPictureUrl + "\" alt=\"" + fbUser.Name + "\"/>");

As you can see, I was attempting to use the user's small pic. This didn't work. As soon as I changed the img src to an image hosted at my server, it showed up just fine.

So, I guess the lesson learned is that you cannot re-display the fb profile images. Which is fine by me!
Mar 3, 2008 at 11:08 PM

TMC wrote:
So, I guess the lesson learned is that you cannot re-display the fb profile images. Which is fine by me!

That still doesn't sound right to me. The SmallPictureUrl should be a valid URL no matter what and should work wherever it's placed (even if it were on another site entirely). Did you debug and see what the value of fbUser.SmallPictureUrl was in this instance?

I think you should strive for the Facebook-hosted profile picture since the user can change it at will and it'd be nice to have the current picture automatically.

Bill
Mar 3, 2008 at 11:11 PM
Also, you may want to try the fb:profile-pic tag. It looks like what you want:

http://wiki.developers.facebook.com/index.php/Fb:profile-pic

I would've included it in the previous reply but the FB dev wiki has been up and down today.

Bill
Mar 7, 2008 at 2:46 AM
YES!! THAT WAS IT!!

It works perfectly! Thank you so much, Bill. I really appreciate you sharing like this.
Mar 10, 2008 at 10:04 PM
Edited Mar 10, 2008 at 10:04 PM

TMC wrote:
YES!! THAT WAS IT!!

It works perfectly! Thank you so much, Bill. I really appreciate you sharing like this.


Glad to hear it! I'm happy that my (maybe) two months of experience with Facebook have actually paid off. Heh.

Bill