Streaming live at 10am (PST)

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


#1

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


Sharing link of website on FB - No image
How to make an image the default for social site sharing?
#2

Take control! (;

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


#3

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


#4

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


#5

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


#6

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?


#7

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.


#8

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.


#9

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


#10

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.


#11

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

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

#12

I've got "google translate" standbye also smile


#13

Ok, so the direct url to your photo is:

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

Wich gives:

(just to be sure)


#14

So,

  1. 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.

#15

Here is the line of code:

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

#16

one moment please I going to try


#17

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


#18

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


#19

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

Great!


#20

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 smile )