Làm cách nào tôi có thể kiểm soát Facebook như hình ảnh? [đóng cửa]

Tôi có một blog với một số bài đăng và mỗi bài đăng đều có nút like trên Facebook . Nhấn nút sẽ mở hộp thoại để khách truy cập của tôi có thể chia sẻ bài đăng trên Facebook với một bình luận.

Tuy nhiên, khi chia sẻ, hình ảnh được Facebook chọn là biểu tượng thư chung chứ không phải hình thu nhỏ của bài đăng.

Làm cách nào để kiểm soát hình ảnh được sử dụng khi chia sẻ?

Hình ảnh được sử dụng để chia sẻ được lấy từ một đoạn mã trong tiêu đề của trang web của bạn sẽ trông giống như thế này:

<link rel="image_src" href="path/to/theme/screenshot.png" />

Thông thường, nó liên kết đến ảnh chụp màn hình của trang web của bạn trong chủ đề. Nếu bạn loại bỏ mã khỏi tiêu đề của tệp và trên single.php, hãy đặt nó vào trong vòng lặp và gọi hình ảnh thu nhỏ bài đăng của bạn vào phần tử href Tôi tin rằng nó sẽ hoạt động. Vì vậy, nó sẽ trông giống như:

<link rel="image_src" href="<?php the_post_thumbnail(); ?>" />

Điều này có nghĩa là nếu bạn có các nút thích trên các trang liệt kê nhiều bài đăng thì có lẽ bạn sẽ không có hình ảnh. Nếu bạn bao gồm một số mã có điều kiện chỉ loại bỏ nó trên single.php thì bạn sẽ có hình ảnh bình thường trên bất kỳ trang nào có nhiều bài đăng và nút like và hình thu nhỏ của bài đăng khi sử dụng mẫu single.php. Vì vậy, mã tiêu đề sẽ là:

<?php if ( is_single() ) { /* do nothing on single pages */ } else { ?>
<link rel="image_src" href="path/to/theme/screenshot.png" />
<?php } ?>

Sau đó, bạn vẫn sử dụng mã để bao gồm hình thu nhỏ của bài đăng trong single.php.

Facebook hiện sử dụng giao thức opengraph. Bạn có thể thêm hình ảnh bằng cách sử dụng:

<meta property = "og: image" content = "http: // YOU_IMAGE_URL" />

Thêm dòng này vào tiêu đề trang của bạn.

Ngoài ra, bạn có thể sử dụng plugin của tôi để làm điều này tự động.

Nó chỉ làm công việc này và không cần cài đặt.

http://shailan.com/wordpress/plugins/facebook-meta-tags-plugin/

Bạn cần sử dụng Giao thức đồ thị mở của Facebook. Tôi không chắc tại sao câu trả lời được chấp nhận không phải là một trong nhiều câu trả lời liên quan đến OG: mà tôi đã bình chọn) nhưng nó đã sai.

http://developers.facebook.com/docs/opengraph/

Bạn có thể tùy chỉnh nhiều thứ, bao gồm tiêu đề, hình ảnh, mô tả, danh mục, cập nhật mới nhất, v.v ... nếu bạn sử dụng Open Graph. Nếu bạn sử dụng các giải pháp nửa kia, bạn đang thiếu toàn bộ hình ảnh.

Nếu tôi không tuân theo Giao thức OG cho tất cả các công việc FB tôi làm, tôi sẽ bị sa thải.

Nếu bạn làm như sau:

<link rel="image_src" href="<?php the_post_thumbnail(); ?>" />

Bạn sẽ thấy rằng Wordpress xuất ra html cần thiết để hiển thị hình ảnh, không chỉ SRC là thứ bạn thực sự muốn.

Làm một cái gì đó như:

<?php

// Featured Image for FB Like
$feature_image = get_the_post_thumbnail($post->ID);

// Get image source
$doc = new DOMDocument();
$doc->loadHTML($feature_image);
$imageTags = $doc->getElementsByTagName('img');

foreach($imageTags as $tag) {
        $image_url = $tag->getAttribute('src');
    }
?>
<link rel="image_src" href="<?php echo $image_url; ?>" />

chỉ cho bạn URL. Đó có thể là con đường dài và có thể rút ngắn, nhưng nó chắc chắn khắc phục vấn đề.

Hy vọng điều này sẽ đưa bạn đi đúng hướng.

Matt

Hãy chắc chắn rằng bạn lint URL của bạn ở đây nếu hình ảnh được chỉ định không xuất hiện đúng cách:

http://developers.facebook.com/tools/lint/

Nếu bạn muốn sử dụng hình ảnh đầu tiên của bài đăng của mình làm hình thu nhỏ với dự phòng cho một cái gì đó giống như logo của bạn, hãy thử plugin của tôi - http://wordpress.org/extend/plugins/facebook-like-thumbnail/ Giải thích để thêm hình ảnh logo dự phòng có tại http://blog.ashfame.com/?p=888

<meta property="og:image" content="http://YOUR_IMAGE_URL" />

Phương pháp này hoạt động cho "like": s nhưng sau này nếu bạn muốn chia sẻ một liên kết trong nhật ký của bạn (Ví dụ.) Hình ảnh này được tự động chọn.

Nếu không có thẻ meta này, bạn có thể chọn từ tất cả các hình ảnh trên trang web được liên kết.

Bất cứ ai cũng biết cách giữ hình ảnh "thích" tĩnh nhưng vẫn khiến bạn chọn hình ảnh khi chia sẻ url?

OK Tôi đã viết một ít javascript để điền vào Meta og: image với hình ảnh đặc trưng mà tôi chọn. Đây là bản hack một lần bạn thêm vào tệp tiêu đề của mình.

Trong bài đăng wordpress của tôi, tôi thêm id "hình ảnh đặc trưng" (tôi biết với wordpress sau này, nó được tích hợp sẵn, tôi đang sử dụng một cái cũ).

<xmp><img src="http://mysite.com/catphoto.jpg" id="featured-image" /></xmp>

Tôi viết một thẻ meta cho og: hình ảnh với một trình giữ chỗ, chẳng hạn như nhật ký blog của tôi. Thêm "id =" meta-image "vào thẻ, nghĩa là

<meta property="og:image" src="http://mysite.com/logo.jpg" id="meta-image" />

Sau đó thêm javascript này vào tiêu đề:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"> </script>

<script type="text/javascript">
$(document).ready( function(){
    var featured_image = $("#featured-image").attr("src");
    $('meta[property="og:image"]').attr("content",featured_image);
});