How to get the correct image and text to appear when sharing site on Facebook

Corine · 2014-11-22 12:12:14 UTC

I've got a tiny problem and probebly a stupid question for you profs. I publish my blog on fb. I copy/past my website/page link into my FB status and I don't get an image in it! Is there anyone who can help me?

Kind regards,
Corine

https://webflow.com/design/corine?preview=f99e02705cb53d8f5bf32c6dbb42ac17

http://corine.webflow.com

vincent · 2014-11-22 15:43:09 UTC

Take control! (;

http://www.hyperarts.com/blog/how-to-control-facebook-image-thumbnail-text-popup-dialogs/

Corine · 2014-11-23 12:07:17 UTC

hey @vincent. Thanks for the info, but that was really difficult stuff for me. What I learned; I had to empty the catch from FB and that FB doesn't see my images on some pages, because they are not set as images, but BG-images.

I've tried yesterday to fix that, but it didn't work out. Is it possible to set the two big pictures, under the text as normal image (same way as the are set now)? And can you help me with that?

https://webflow.com/design/corine?preview=f99e02705cb53d8f5bf32c6dbb42ac17

Thanks again and many grtzz, Corine

vincent · 2014-11-23 12:16:08 UTC

Just to be sure, you want the sharing to look good on FB when you share http://corine.webflow.com, right?

Corine · 2014-11-23 12:19:20 UTC

Yes! Ow, my post is to short, yes yes

vincent · 2014-11-23 12:20:57 UTC

So at the moment, I get this:

Can you paste here the lines you've added to the Head section of custom code regarding this so far?

Corine · 2014-11-23 12:30:01 UTC

Home page looks not good on FB also. I didn't use any code so far, cause I don't know how, and I hardly can read English. Because I'am blogging, I create weekly a new page in my website, and want to share this page on FB. The screenshot from my previous post, doesn't show an image at all in FB.

vincent · 2014-11-23 12:34:44 UTC

We can add line to the Head section of your site, that will make FB display a chosen image, for every page shared on FB (the same image). If you're blogging with Webflow, adding a page each week, it's going to be difficult for each page to return an appropriate/contextual image... because at the moment Webflow doesn't have CMS capabilities and this should really be the job of the CMS.

So at the moment I can only help you for your sharing to return one, or two or three, chosen image(s). Better than nothing. Should we try that?

Off to lunch at the moment, will get back on that later tonight.

Corine · 2014-11-23 12:37:16 UTC

Thanks, that would be awsome!! Have a nice lunch, I love to eat French Cuisine!

vincent · 2014-11-23 13:59:01 UTC

3 hours 1/2 to prepare a choucroute, devoured by guests in minutes (:

So, can you show me which prefered image you'd like to show up on facebook? And a second one maybe.

Corine · 2014-11-23 14:32:30 UTC

Hey Vincent, I'am back also. These images i would like to set on FB.

Home-page; Hero foto -> BG Image corine blogt_caracasbaai golf.jpg
Page Blogoverzicht; Hero hero portfolio list -> BG image corine blogt_roestig golfje.jpg

Corine · 2014-11-23 14:34:21 UTC

I've got "google translate" standbye also

vincent · 2014-11-23 14:37:28 UTC

Ok, so the direct url to your photo is:

<img src='/uploads/webflow1/3431/703c92ff64ce2a59.jpg'>

Wich gives:

(just to be sure)

vincent · 2014-11-23 14:44:13 UTC

So,

let's tell the world what image they should use when talking about your website. You need to add the following line of code (next message) into the Custom Code page of your Webflow site's settings, in the Head section. Read how to do this here: http://help.webflow.com/adding-custom-code The design of webflow has changed recently but you should be able to find where it is.

vincent · 2014-11-23 14:44:53 UTC

Here is the line of code:

<link rel="image_src" href="http://uploads.webflow.com/53f9f78ee0a87355528e5598/54353ddeb5b770fc173c9549_corine%20blogt_caracasbaai%20golf.jpg" / >

Corine · 2014-11-23 14:47:20 UTC

one moment please I going to try

vincent · 2014-11-23 14:51:35 UTC

Once done, publish your site again, flush the facebook caches as you did before, and try.

Corine · 2014-11-23 14:52:04 UTC

it's done, there was one slash to many webflow said, I removed the last slash, is that good?

Corine · 2014-11-23 15:02:00 UTC

It's working!! Check my FB page: https://www.facebook.com/corine.vanringenkunen

Great!

vincent · 2014-11-23 15:06:20 UTC

Great. I got this too:

Now you could also make a specially dedicated image to be used when sharing on facebook, add it to a special page of your site (a page not linked, that nobody visits, just to get the image hosted).

Also, make sure you've well filled all the meta informations on your homepage. Do this here:

(and do it better than in my example )