Changing the value of OG:IMAGE with jQuery click

Question

I just build up a image portfolio with a single HTML page where all the pictures are dynamically loaded. Everything works great so far, except for the facebook META OG:IMAGE

Answer 1

It's the colon. Try using single quote & double-quotes like this:

var imgSrc = $(this).find('img').attr('src'); // image stored as variable
$('meta[property="og:image"]').attr('content', imgSrc); // assigns meta property

Answer 2

Since the page loads just once, I can assign the OG:IMAGE URL once... But I really would like to have each picture with its own OG:IMAGE, since this is a photo album.

Changing OG meta tags client-side is of no actual use – because Facebook will read those tags through it’s scraper, which means they will do an HTTP request for your URL and see what’s in the HTML code; and the scraper does not execute any JavaScript.

Solution: Provide an individual URL for each photo with its own meta information – and have your like button/share functionality/whatever FB feature point to that URL for each photo.

(How you handle things client-side does not matter – you can still display all the photos in one page, load new content via AJAX, whatever you like – but you will need separate URLs for your photos for them to be recognized as individual Open Graph objects.)

Answer 3

$('li.open-pic').click(function(){
 $('meta[name=og\\:image]').attr('content', newImageUrl);
});