Cambiando el valor de OG: IMAGE con jQuery click

Question

Acabo de construir un portafolio de imágenes con una sola página HTML donde todas las imágenes se cargan dinámicamente. Todo funciona muy bien hasta ahora, a excepción del facebook META OG: IMAGE.

Como la página se carga solo una vez, puedo asignar OG: URL de IMAGEN una vez ... Pero realmente me gustaría tener cada imagen con su propio OG: IMAGE, ya que este es un álbum de fotos.

Las imágenes se cargan haciendo clic en una etiqueta --li class = "open-pic" -. Me gustaría cambiar el valor de OG: IMAGE cada vez que hago clic en una etiqueta --li class = "open-pic" -.

¿Es posible? me encontré con cosas como esta:

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

Sin embargo, no sé cómo vincular esto al evento onclick li.open-pic. ¡Gracias!

G.

Answer 1

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

Answer 2

Desde la página cargas sólo una vez, puedo asignar la OG: URL de la imagen, una vez ... Pero realmente me gustaría tener cada imagen con su propio OG: IMAGEN, ya que este es un álbum de fotos.

Cambio OG etiquetas meta del lado del cliente es de ninguna utilidad real - ya que Facebook va a leer las etiquetas a través de su rascador, lo que significa que van a hacer una petición HTTP para su URL y ver lo que hay en el código HTML; y el raspador no ejecuta ningún JavaScript.

Solución: Proporcione una URL individual para cada foto con su propia metainformación, y tenga su botón similar/funcionalidad de compartir/cualquier característica de FB apuntando a esa URL para cada foto.

(Cómo manejar las cosas del lado del cliente no importa - todavía se puede mostrar todas las fotos en una página, cargar nuevos contenidos a través de AJAX, lo que quiera - pero se necesita URL separadas para sus fotos para que se los reconozca como objetos individuales de Open Graph.)

Answer 3

Es el colon. Intente utilizar comillas simples & comillas dobles como esta:

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