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="" src="/js/250/addthis_widget.js#pubid=xa-4fcaa48b0ffdb7b9" type="js" />

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." src="/js/250/addthis_widget.js#pubid=xa-4fcaa48b0ffdb7b9" type="js" />

• javascript
• html
• facebook-opengraph
• addthis

3 Answers 3

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.

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

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

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

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

https://developers.facebook./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./index.html?fbrefresh=randomstring