Streaming live at 10am (PST)

Problems formatting image and description for Facebook share button


#1

https://preview.webflow.com/preview/marqueteiro-virtual?preview=c548b02263158c66cb32676cc137decc

Using latest Chrome


Hi, I'm trying to configure what shows up when someone hits the Faceboook share button I've put on my homepage. I'd like to put the button in various places on my site, but always with the same image and link, so that's not the issue. The problem is something in my OG configuration or something I can't find that is preventing Facebook from collecting the correct info to share.

I've put this in my custom code area (head code):

<meta property="og:url"           content="http://marqueteiro-virtual.webflow.io" />
<meta property="og:type"          content="website" />
<meta property="og:title"         content="Marqueteiro Virtual | Para fazer sua campanha online de graça" />
<meta property="og:description"   content="No Marqueteiro Virtual você pode consultar mais de 100 recursos gratuitos para fazer campanhas na internet" />
<meta property="og:image"         content="http://uploads.webflow.com/5616a7b8eb3a835f015c567f/5623df295292c4495d74636b_urnaeletronica.jpg" />

And I've put this in my custom code area (footer code):

<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

And this in an HTML Embed box on my homepage:

<div class="fb-share-button" data-href="http://marqueteiro-virtual.webflow.io" data-layout="button_count"></div>

The button is there when I publish the site and works, but it doesn't pull the correct data. Can't get the description to show up. This is what it looks like:

I've run it by the Facebook debug tool (https://developers.facebook.com/tools/debug/og/object/) and when i do it gives me a different error and tells me it can't find the og:image. Even though the image shows up in the preview:

I've been able to avoid this error if I also include the image url in the OG Image URL field on my homepage from the Webflow design interface. But that seems redundant so something else must de wrong.

On the Facebook debug tool preview all the info is there, including the image even when it tells me it can't find the image url:

But that's not what shows up on the live site. Anybody got any ideas? I'm not a webdesigner and not even a designer and have very little knowledge of code so maybe there is a problem elsewhere on the site I can't figure out.


On a related topic, on the Facebook shared post I would like to use the image that is the cover of my website, but I can't find the url to link it in to the OG data.


#2

I need help on this too!


#3

Hi @Gabriel00, I think it is needed to have that og:image URL specified or it will not work correctly to update the Facebook cache.

I was checking in the FB lint tool and it seems you have already taken care of that:

When I share to FB:

This info matches what is on the published home page at http://marqueteiro-virtual.webflow.io.

Are you still having the issue?


#4

Hi @OurLocalMarkets, if you create a post, the issue you are having with FB share can also be looked at :smile:


#5

Hi Dave,

Thank you so much for replying! The problem is solved. FB debugger came up with error messages but regardless of the errors it still works with a few re-scrap :smile:


#6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.