Facebook link display thumbnails

  • 0
  • 4
  • Question
  • Updated 7 years ago
  • Answered
Archived and Closed

This conversation is no longer open for comments or replies and is no longer visible to community members.

How do I select and insert thumbnail photo's that show up when I post on FaceBook?
Photo of Terry1214

Terry1214

  • 100 Points 100 badge 2x thumb

Posted 7 years ago

  • 0
  • 4
Photo of Chris Folmer

Chris Folmer, Alum

  • 28,258 Points 20k badge 2x thumb
Official Response
Hi Terry,

Welcome to the Community!

Sorry for the confusion, but are asking how to customize the thumbnail that appears when you post a URL within Facebook? Typically when you add a URL, it will pull a thumbnail from an image on that page. If you have 4-5 images, there will be a small arrow that you can click on to go to the next image.

Please let me know if I'm on the right track or if I misinterpreted your question.

Thanks,

Chris
Photo of James

James

  • 540 Points 500 badge 2x thumb
Official Response
Hi Terry,

If you want to specify what image is used when someone shares/posts/likes your website on Facebook you can add this snippet of code to the <HEAD> tag:

<meta property="og:image" content="http://www.mydomain.com/facebooklogo.jpg"/>

You just need to change the URL in the code to the address of the published image you want to use. In Sitebuilder Plus the <HEAD> tag where you add the code is located under Page Settings in the Advanced Settings.

After you've added the code there and published you will need to run your website URL through the Facebook Debugger so they will crawl the site and make the update.

http://developers.facebook.com/tools/...

I hope this helps!
Photo of j5759

j5759

  • 80 Points 75 badge 2x thumb
I am also having the same problem.

"You just need to change the URL in the code to the address of the published image you want to use. In Sitebuilder Plus the tag where you add the code is located under Page Settings in the Advanced Settings"

I have followed these steps. However, when I click on the Facebook Debugger link and enter in my website's URL my browser says it cannot be redirected because too many things are being redirected at once. I have no clue what that even means. Help!
Photo of James

James

  • 540 Points 500 badge 2x thumb
Hi j5759,

The URL you have put for your image is not correct it looks like you included part of my example facebooklogo.jpg. Everything between the quotes should be changed to the picture's URL.

<meta property="og:image" content="PHOTO URL"/>

You should also make sure you put the code on every page.

Also, when you submit you website address through the Facebook debugger, it needs to be the full URL including http://
Photo of Barbara6205

Barbara6205

  • 60 Points
I'm confused. I think you're answering my question but I don't get it. When I click the FB like on my home page, the "share/comment" box appears with a picture from that page but not the one I want. How do I make it choose the right image? And keep in mind, I don't write code for a living.
Photo of Chris Folmer

Chris Folmer, Alum

  • 28,258 Points 20k badge 2x thumb
Hi Barbara,

You first need to upload the image you want to appear when someone shares your site on Facebook.

1. Login to Sitebuilder Desktop
2. In the left window pain, click "File Manager"
3. When your file manager opens up, click the import icon near the top and upload the picture you want displayed.

Ex. You uploaded a file called facebook.jpg

4. The URL for this image will be:

http://www.mulberryglass.com/facebook...

5. On your pages, you will then want to add the code from above into your head tag. When you are on a page, click the "Page Info" icon in the top menu bar. When your page properties opens up on the right, click the advanced tab near the top right. In that section you will want to paste in the code James provided. Make sure you first swap out the URL for the correct URL to your facebook image.

6. Publish your site.

Hope that helps!

Chris
Photo of paintersdream054578

paintersdream054578

  • 304 Points 250 badge 2x thumb
I want to use the image 83113850.jpg to show when I post an update of my web site to face book. Can you tell me EXACTLY how to do this? I must be doing something wrong because I don't see it.

This reply was created from a merged topic originally titled
Exact instruction on how to for thumbnail posting to Face Book.
Photo of Aubrey T

Aubrey T

  • 15,316 Points 10k badge 2x thumb
Hi paintersdream -

Sorry for your frustrations! Chris actually wrote out great steps that should help you get the image you want to use to appear when you post your updates on Facebook.

Hope that helps!
Aubrey
Photo of paintersdream054578

paintersdream054578

  • 304 Points 250 badge 2x thumb
Okay, I followed that instruction, but when running it through the facebook debugger it tells me that the photo is not a URL. The photo is a number from sitebuilder. Can that be fixed?
Photo of James

James

  • 540 Points 500 badge 2x thumb
The URL of your published image is:
http://www.notyouraveragehomeparty.com/83113850.jpg

That should be in quotes after content=
Photo of James

James

  • 540 Points 500 badge 2x thumb
<meta property="og:image" content="http://www.notyouraveragehomeparty.com/83113850.jpg"/>
Photo of paintersdream054578

paintersdream054578

  • 304 Points 250 badge 2x thumb
THANK YOU!
Photo of indyfolkseries3021

indyfolkseries3021

  • 832 Points 500 badge 2x thumb
When I post a link to Facebook, I get a choice of 3 thumbnails. One is a photo on my home page, the other two are just graphic elements. I would like to have the option to choose among several thumbnails, but I would like to be able to choose which images. How do I control which images can be used as thumbnails on Facebook?
www.flyingcatconcerts.com

This reply was created from a merged topic originally titled
controling choice of thumbnails when posting link on Facebook.
Photo of indyfolkseries3021

indyfolkseries3021

  • 832 Points 500 badge 2x thumb
my question was merged into this thread, and while it addresses the topic in quesion but does not answer my exact question.

To clarify: When posting a link on Facbook, I get a choice of three images. Two of the three images are just graphic elements are not not suitable as thumbnails. I would like to have the option to choose among several thumbnails, but I would like to be able to choose which images. Do I use the method above, but repeat is several times with different images?

etc?
Photo of James

James

  • 540 Points 500 badge 2x thumb
Hi indyfolkseries3021,

According to the Facebook developer website, you can specify more than one image to use as the Facebook thumbnail by including multiple og:image tags.
Photo of indyfolkseries3021

indyfolkseries3021

  • 832 Points 500 badge 2x thumb
James, thanks for the response. I tried it and it didn't work.

Website is www.flyingcatconcerts.com

Code I used:

help?
Photo of indyfolkseries3021

indyfolkseries3021

  • 832 Points 500 badge 2x thumb
The code didn't paste!
Photo of James

James

  • 540 Points 500 badge 2x thumb
It looks like the images you're trying to use are too small for Facebook. They need to be at least 200 pixels on both width and height.

To paste code into our community you have to use the code tag which puts it in a special block to display it instead of trying to read the code. The (some HTML allowed) link has more information but you basically do it like this:

<code><meta property="og:image" content="blah blah blah"/>
Photo of James

James

  • 540 Points 500 badge 2x thumb
that's supposed to have a closing /code tag at the end as well
Photo of indyfolkseries3021

indyfolkseries3021

  • 832 Points 500 badge 2x thumb
I used different images that are 200x200. Still didn't work

/

Photo of indyfolkseries3021

indyfolkseries3021

  • 832 Points 500 badge 2x thumb
I've spent a lot of time on this and still can't get this to work. I'm attempting to paste the code I used below, using the "code" tag, but I don't know if I'm doing that right either.



www.flyingcatconcerts.com
Photo of James

James

  • 540 Points 500 badge 2x thumb
It looks like you didn't submit your URL to the Facebook Debugger to have them re-index your site and see the updated images. I just did that for your domain and it's working now.
Photo of indyfolkseries3021

indyfolkseries3021

  • 832 Points 500 badge 2x thumb
James, thanks! its working now. I appreciate your help. But what on earth is Facebook "Debugger" and how would I go about using it? I will need to add/change thumbnail images in the future, will I need to "debug" again?
Photo of James

James

  • 540 Points 500 badge 2x thumb
https://developers.facebook.com/tools...

I included the link in my original post at the top of this thread. It's a developer site used to force Facebook crawl your website again and update their database with any changes you've made to things such as page title or OG tags. If you change og:image thumbnails, you'll need to run your URL through the debugger again.
Photo of jeffwheeleris0591

jeffwheeleris0591

  • 80 Points 75 badge 2x thumb
James!, Could you do mine too please?
Photo of James

James

  • 540 Points 500 badge 2x thumb
Hi Jeff,

I can't do it for you but if you follow the instructions you should be able to get it to work pretty easily. If you have any questions, don't hesitate to ask.

Thanks,
James

This conversation is no longer open for comments or replies.