Thay đổi giá trị của OG: IMAGE bằng jQuery nhấp vào

Question

Tôi chỉ xây dựng danh mục hình ảnh với một trang HTML duy nhất nơi tất cả các hình ảnh được tải động. Mọi thứ hoạt động tốt cho đến nay, ngoại trừ facebook META OG: IMAGE.

Vì trang tải chỉ một lần, tôi có thể gán URL OG: IMAGE một lần ... Nhưng tôi thực sự muốn có từng ảnh với OG: IMAGE của riêng nó vì đây là album ảnh.

Các bức ảnh được tải bằng cách nhấp vào thẻ --li class = "open-pic". Tôi muốn thay đổi giá trị OG: IMAGE mỗi lần tôi nhấp vào một thẻ --li class = "open-pic".

Có thể không? tôi tìm thấy những thứ như thế này:

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

Tuy nhiên, tôi không biết làm thế nào để liên kết này với sự kiện onclick li.open-pic. Cảm ơn bạn!

G.

Answer 1

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

Answer 2

Kể từ khi tải trang chỉ một lần, tôi có thể gán OG: URL IMAGE một lần ... Nhưng tôi thực sự muốn có mỗi bức ảnh với OG riêng của mình: IMAGE, vì đây là album ảnh.

Thay đổi thẻ meta OG phía máy khách không thực sự sử dụng - vì Facebook sẽ đọc các thẻ đó qua scraper, có nghĩa là họ sẽ thực hiện yêu cầu HTTP cho URL của bạn và xem mã HTML; và scraper không thực thi bất kỳ JavaScript nào.

Giải pháp: Cung cấp URL riêng cho từng ảnh với thông tin meta của riêng nó - và có chức năng nút/chia sẻ tương tự/bất kỳ điểm tính năng FB nào cho URL đó cho mỗi ảnh.

(Làm thế nào để bạn xử lý mọi thứ client-side không quan trọng - bạn vẫn có thể hiển thị tất cả các bức ảnh trong một trang, tải nội dung mới qua AJAX, bất cứ điều gì mà bạn thích - nhưng bạn sẽ cần URL riêng biệt cho bức ảnh của bạn để chúng được công nhận là các đối tượng Open Graph riêng lẻ.)

Answer 3

Đó là dấu hai chấm. Hãy thử sử dụng dấu nháy đơn & dấu ngoặc kép như sau:

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