问题
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.
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.
The pics are loaded by clicking on a --li class="open-pic"-- tag. I would like to change the OG:IMAGE value everytime I click on a --li class="open-pic"-- tag.
Is it possible? I found stuff like this:
$('meta[name=og\\:image]').attr('content', newImageUrl);
However, I don't know how to link this to the li.open-pic onclick event. Thank you!
G.
回答1:
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.)
回答2:
$('li.open-pic').click(function(){
$('meta[name=og\\:image]').attr('content', newImageUrl);
});
回答3:
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
来源：https://stackoverflow.com/questions/12404868/changing-the-value-of-ogimage-with-jquery-click