javascript - sharing content on Facebook via AddThis - Stack Overflow

admin管理员组

文章数量:1310254

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

Share Improve this question Follow edited May 20, 2014 at 21:49 Dónal asked Feb 13, 2014 at 10:58 DónalDónal 187k177177 gold badges585585 silver badges844844 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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

本文标签： javascriptsharing content on Facebook via AddThisStack Overflow