CODEWITHSUNDEEP
javascripthtmlfacebook-opengraphaddthis
Dónal
Dónal

Reputation: 187499

sharing content on Facebook via AddThis

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:

enter image description here

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" />

Upvotes: 8

Views: 1672

Answers (3)

Jeffery To
Jeffery To

Reputation: 11936

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

Upvotes: 3

George
George

Reputation: 6084

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

Upvotes: 3

James Thomas
James Thomas

Reputation: 178

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.

Upvotes: 4

Related Questions