sharing content on Facebook via AddThis

Question

On this page I use the AddThis JavaScript library to add buttons that allow the page to be shared on Facebook/Twitter. If you click on the Facebook button it shows the following preview of how the content will be posted to Facebook:

Notice that the image that is displayed in the post preview is the AJAX loader that is used on the site, i.e. an image that is displayed while an AJAX request is in progress. I don't know why this is being chosen as the image to be displayed in the post, is it possible for me to specify which image is used?

Here's the markup that I use to display the sharing buttons:

<div class="addthis_toolbox addthis_default_style addthis_32x32_style" style="width: 135px;">
    <a class="addthis_button_preferred_1"></a>
    <a class="addthis_button_preferred_2"></a>
    <a class="addthis_counter addthis_bubble_style"></a>
</div>

<g:javascript base="http://s7.addthis.com" src="/js/250/addthis_widget.js#pubid=xa-4fcaa48b0ffdb7b9" type="js" />

Elana

Answer 1

The current image URL (http://www.festivals.ie/images/banners/love-festivals-299-250.gif) does a 302 redirect to the actual image URL (http://www.festivals.ie/static/UO8FTf3ztOtMK2ArNFiVkIeKI2DqX13KcoktytQF1Q6.gif).

I suggest setting og:image to the actual image URL:

<meta property="og:image" content="http://www.festivals.ie/static/UO8FTf3ztOtMK2ArNFiVkIeKI2DqX13KcoktytQF1Q6.gif">

(This is really a guess since I'm not able to test this at the moment.)

Wigwag

@Don were you able to try this? – Wigwag

Yes, and it did. Enjoy the bounty! – Alejandrinaalejandro

Thanks, but did the bounty disappear? – Wigwag

Answer 2

Between the tags of your HTML you have the following code:

<meta property="og:image" content="http://www.festivals.ie/images/responsive/bg.svg"/>

This tells Facebook what image it should be using in the share popup. 'og' stands for Open Graph, the protocol Facebook uses to fetch information about a page. However the image that is being linked to is a large SVG image (your site's background image) - you need to change this URL to the URL of your logo, and make sure this logo is in .jpg or .png format - a quick Google search suggests that Facebook doesn't really support SVGs being used for og:image.

Sacco

See also Facebook's guide on Open Graph tag best practice – Sacco

I changed the value of this property to the logo, but the spinner image is still being used – Alejandrinaalejandro

Facebook caches these properties, so try again a bit later. – Sacco

It's a few weeks later now, and still the image hasn't changed – Alejandrinaalejandro

Sorry to hear that. It sounds like a more complex problem than I'm able to solve, unfortunately. I would recommend auditing your code and/or any plugins you're running to see what could be causing it, and perhaps trying to isolate the problem by simulating the same conditions at a different URL using a static copy of the page then taking code in and out. – Sacco

Answer 3

As James Thomas advised, the first step is to add the tag(s):

<meta property="og:image" content="http://i2.ytimg.com/vi/1F7DKyFt5pY/default.jpg" /> 

Next, you've got to clear facebook's cache:

https://developers.facebook.com/tools/debug

• Navigate to above link and pump in your url. This will manually trigger another data pull, thus clearing the cache

• If that doesn't work, include this url parameter behind your url: ?fbrefresh=CAN_BE_ANYTHING

  http://www.example.com/index.html?fbrefresh=randomstring

Melancon

In which URL should I include the param ?fbrefresh=CAN_BE_ANYTHING? – Alejandrinaalejandro

festivals.ie/writeForUs?fbrefresh=randomstring on developers.facebook.com/tools/debug I did a check. Seems like the image is pointing to: festivals.ie/static/… Can you try replacing that gif with love-festivals-299-250.gif (using the same name -dPJXQ68m16uauPPFUOCGWQv76d6N0eyARNIcRVdoOxF.gif) as a temporary solution? so far graph.facebook.com/264399223735155 is showing the right configurations. – Melancon