Hướng dẫn sửa lỗi hiển thị sai Thumbnail khi Share Facebook

Vietchiase.com | Góc chia sẻ dành cho người Việt | 14/10/15

Hôm nay Vietmkt360.com hướng dẫn các bạn lấy ảnh đầu tiên trong bài để làm Thumbnail khi bấm like hoặc Share lên Facebook. Thường thì nếu không để các thẻ meta thích hợp để miêu tả, Facebook sẽ chọn đại một số ảnh trên Site của bạn để làm Thumbnail, tuy nhiên đa số các ảnh này thường là sai hoặc không hợp nội dung với bài viết bạn định Share.

Sau đây mình xin hướng dẫn các bạn làm trên WordPress, còn các mã nguồn khác làm tương tự nhé! Bạn nào rành code thì đây là cách hay vì không phải cài thêm bất cứ plugin nào khiến cho Site bạn trở nên cồng kềnh, còn nếu bạn nào muốn tiện, nhanh gọn lẹ thì xem bên dưới có hướng dẫn làm bằng Plugin đơn giản hơn rất nhiều nhé!

Đầu tiên thì chúng ta phải biết là Facebook check rất nhiều thẻ dạng

Nội dung:

<meta property=”og:kiểu” content=”nộidung” />

để hiểu được cái link mình đang Like hoặc Share nó chứa những thông tin gì.

Trong đó có 1 thẻ để hiển thị ảnh đại hiện cho bài viết, hay còn có thể hiểu là chỉ ra ảnh nào để cho Facebook lấy thu nhỏ lại làm Thumbnail cho link đó khi share trên Facebook. Đó là thẻ

Nội dung:

<meta property="og:image" content="link_ảnh" />

Đầu tiên bạn vào thư mục chứa Theme đang dùng tìm file functions.php, thường là

Nội dung:

/wp-content/themes/tên_theme/functions.php

thêm đoạn code sau vào cuối file functions.php

nhớ thay https://pbs.twimg.com/media/CQVGIvlUwAEE6d3.png bằng link đến hình hoặc logo mặc định của bạn nếu bài post nào không có ảnh thì nó sẽ hiển thị ảnh mặc định này, và lưu ý là logo phải có size ít nhất 200×200 mới được nhé.

Nội dung:

function catch_first_image() {

global $post, $posts;
$first_img = ”;
ob_start();
ob_end_clean();
$output = preg_match_all(‘/<img.+src=[\'”]([^\'”]+)[\'”].*>/i’, $post->post_content, $matches);
$first_img = $matches [1] [0];

// no image found display default image instead
if(empty($first_img)){
$first_img = “https://pbs.twimg.com/media/CQVGIvlUwAEE6d3.png”;
}
if( is_home() ) {
$first_img = “https://pbs.twimg.com/media/CQVGIvlUwAEE6d3.png”;
}
return $first_img;
}

Sau đó tìm đến File nào trong Theme chứa thẻ <head> thêm đoạn code sau vào sau thẻ <head> hoặc trước thẻ đóng</head>

Nội dung:

<meta property=”og:image” content=”<?php echo catch_first_image(); ?>”/>

Xong rồi đó!

Bây giờ bạn View source một bài post nào đó và kiểm tra thử đã có thẻ
<meta property=”og:image”
chưa nhé, và cũng đừng quên check coi mã PHP đã trả về đúng link ảnh đầu tiên chưa.

Bạn có thể vào link sau: https://developers.facebook.com/tools/debug nhập URL của bài nào đó trong trang của bạn và test thử xem Facebook đã nhận đúng ảnh chưa.

Thêm : Ngoài ra thì nếu bạn nào muốn đơn giản hơn, không muốn động đến code thì có thể search và cài Plugn in có tên là Fix Facebook Like. Có chức năng tự thêm đầy đủ các thẻ meta cho từng page, từng post, rất tiện lợi và đơn giản!

Chúc các bạn thành công !!!!!

Like , G+ và Share ủng hộ Vietchiase.com - Góc chia sẻ dành cho người Việt nhé ! ❤ Cám ơn ❤

Chia sẻ: