Đối với những webmaster thường hay tiếp xúc với mạng xã hội Facebook thì họ không còn lạ lẫm với Open Graph.
Giới thiệu về Open Graph
Giao thức Open Graph được tạo bởi Facebook, với chức năng làm cho bất kỳ trang web nào cũng có thể có các chức năng tương tự như các đối tượng (object) trên Facebook, hay với chức năng làm cho nội dung của website chúng ta dễ dàng được nhận ra bởi các mạng xã hội, khi ai đó chia sẻ nội dung của chúng ta thì với việc sử dụng Open Graph, mạng xã hội có thể hiển thị thông tin chính xác về nội dung được chia sẻ.
Bạn có thể kiểm tra đầy đủ tại trang web của Open Graph.
Ví dụ về việc sử dụng Open Graph cho WordPress
Sử dụng Open Graph cho website WordPress như thế nào, dưới đây là một ví dụ về việc chúng ta sẽ lấy tiêu đề, trích đoạn (excerpt), URL và hình ảnh thumbnail của bài viết và sử dụng chúng như Metadata của Open Graph.
Nhưng đầu tiên giải thích tại sao chúng ta lại chọn ví dụ này, vì chức năng này khá quan trọng, mỗi lần chia sẻ thông tin thì Facebook sẽ hiển thị Title, URL, Thumbnail và trích đoạn chuẩn theo nội dung của bài viết gốc.
Chúng ta sẽ sử dụng các Open Graph metadata như sau:
function wptuts_opengraph_for_posts() {
if ( is_singular() ) {
global $post;
setup_postdata( $post );
$output = '<meta property="og:type" content="article" />' . "\n";
$output .= '<meta property="og:title" content="' . esc_attr( get_the_title() ) . '" />' . "\n";
$output .= '<meta property="og:url" content="' . get_permalink() . '" />' . "\n";
$output .= '<meta property="og:description" content="' . esc_attr( get_the_excerpt() ) . '" />' . "\n";
if ( has_post_thumbnail() ) {
$imgsrc = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
$output .= '<meta property="og:image" content="' . $imgsrc[0] . '" />' . "\n";
}
echo $output;
}
}
add_action( 'wp_head', 'wptuts_opengraph_for_posts' );
Đoạn code này sẽ chèn các Open Graph metadata vào trong cặp thẻ <head>. Dán đoạn code trên vào vị trí cuối cùng của file functions.php của themes bạn đang dùng. Hãy xem mã nguồn trang web thay đổi (nằm trong cặp thẻ <head>) trước và sau khi dán đoạn code này vào.
Tiếp theo, chúng ta cập nhật phần thẻ mở <html> của WordPress
Phần thẻ <html> mặc định như sau:
<html <?php language_attributes(); ?>>
Chúng ta sẽ đổi thành:
<html <?php language_attributes(); ?> prefix="og: http://ogp.me/ns#">
Tiến hành Save lại.
Đến đây là xong rồi, các bài viết, page đã tương thích với Open Graph, đơn giản quá phải không. Bạn hãy thử test lại bằng việc chia sẻ một bài viết lên facebook và xem thử các thông tin Title, URL, Thumbnail và trích đoạn hiển thị đó có chuẩn (khác với lúc chưa sử dụng Open Graph) hay không :sexy:
Chúc bạn thành công!
Cách làm nổi bật màu nền comment trong WordPress
Link author bị dư cái chữ h ngay https kìa bạn:
Mà sao web bạn lại không dùng Open Graph vậy? bạn có thể cho mọi người biết tại sao không.
p/s: nếu có thể bạn email cho mình nhé, vì đôi lúc mình comment nhiều bài trên Internet, mình không thể nhớ hết các đã comment ở đâu để bậc xem lại được, hic 😥