Question

first off a short explanation… the following two lines assure that once my website is shared on facebook a custom image (share-thumbnail.png) is posted.

<meta property="og:image" content="images/share-thumbnail.png"/>
<link rel="image_src" href="<images/share-thumbnail.png" />

Can you guys think of any creative way to overwrite that behaviour when I click a specific sharing link on my page?

E.g. i have a <a class="special-sharing" href="#">Share with special image</a> anchor on my page and when that one is clicked I don’t want to use the share-thumbnail.png defined in my header.

My thought was to use jquery to listen to click events on the .special-sharing link and then… preventDefault(); and change e.g. the content attr of my meta tag in the head to a new image src. Then call the facebook?sharer= blabla.

How would you solve that?

Answer 1

(Caveat: I’m not familiar with Facebook’s API, just Javascript and the web in general.)

Unfortunately, you can’t.

While it’s possible to affect <meta> and <link> tags with jQuery (or Javascript in general), it isn’t possible to make changes outside the currently-loaded copy of the page in the user’s browser. When the link to Facebook is called, the current page is discarded and Facebook’s page is loaded, which then performs its own hit on your page to get the og:image, which will still have the original value because the file on the server hasn’t changed.

Instead, you could perhaps set up your server so that you can customize the image via the URL. For example, have http://www.example.com/mypage.php produce the default value for og:image, but http://www.example.com/mypage.php?special-image=foo.gif change the value of the <meta> tag. You could then use Javascript to change the sharer passed to Facebook so that it uses the special URL that points to the special image.