Modifica del valore di OG: IMMAGINE con jQuery clic

Question

Ho appena creato un portfolio di immagini con una singola pagina HTML in cui tutte le immagini sono caricate dinamicamente. Tutto funziona alla grande finora, ad eccezione di facebook META OG: IMMAGINE.

Poiché la pagina viene caricata solo una volta, posso assegnare la OG: URL dell'immagine una volta ... Ma mi piacerebbe davvero avere ogni immagine con il proprio OG: IMAGE, poiché si tratta di un album di foto.

Le immagini vengono caricate facendo clic su --li class = "open-pic" - tag. Vorrei cambiare il valore OG: IMAGE ogni volta che clicco su un --li class = "open-pic" - tag.

È possibile? Ho trovato cose come questa:

$('meta[name=og\\:image]').attr('content', newImageUrl); 

Tuttavia, non so come collegare questo per l'evento onclick li.open-pic. Grazie!

G.

Answer 1

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

Answer 2

Poiché la pagina viene caricata solo una volta, posso assegnare il OG: URL dell'immagine una volta ... Ma mi piacerebbe davvero avere ogni immagine con il proprio OG: IMAGE, poiché questo è un album fotografico.

Modifica Olimpiadi meta tag lato client è di alcuna utilità reale - perché Facebook leggerà questi tag attraverso la sua ruspa, il che significa che faranno una richiesta HTTP per il tuo URL e vedere cosa c'è nel codice HTML; e il raschietto non esegue alcun JavaScript.

Soluzione: fornire un singolo URL per ogni foto con le proprie meta informazioni e avere il pulsante/funzionalità di condivisione/qualsiasi funzione FB puntare a quell'URL per ciascuna foto.

(Come gestire le cose lato client non importa - è ancora possibile visualizzare tutte le immagini in una pagina, caricare nuovi contenuti tramite la tecnologia AJAX, quello che vuoi - ma si sarà bisogno di URL separati per le tue foto perché possano essere riconosciuti come oggetti Open Graph individuali.)

Answer 3

Sono i due punti. Prova a usare la virgoletta singola & doppi apici come questo:

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