Setup Opengraph di Themes WordPress

Sebenarnya postingan semacam ini sudah banyak sekali beredar, dan tawaran solusi dari mulai berbentuk plugins sampai themes yang sudah dilengkapi dengan meta opengraph juga sudah berlimpah, hanya saja kebetulan themes yang saya pakai kok tidak support hal ini, jadilah saya meng-extend themesnya.

Opengraph ini dipakai terutama (yang paling kelihatan) untuk share post di facebook. Dengan memasang meta opengraph (ini istilah saya sendiri, silakan cari istilah yang lebih benar deh) di themes, maka kita bisa memasang thumbnail, mengatur excerpt dan lain-lain ketika postingan kita di share ke halaman facebook.

Nah, tidak perlu berpanjang-panjang, ada dua cara untuk memperbaiki themes yang tidak support opengraph ini (nampak ketika dishare di facebook, caption dan thumbnail tidak muncul). Satu, dengan memasang script/kode ini di functions.php atau bisa juga dipasang di header.php sebelum tag penutup head.

Untuk dipasang di functions.php

function insert_fb_in_head() {
    global $post;
    if ( !is_singular()) //jika bukan post atau page return kosong
        return;
    echo '<meta property="fb:admins" content="ID_AKUN_FB_ANDA"/>';
    echo '<meta property="og:title" content="' . get_the_title() . '"/>';
    echo '<meta property="og:type" content="article"/>';
    echo '<meta property="og:url" content="' . get_permalink() . '"/>';
    echo '<meta property="og:site_name" content="NAMA_SITUS_ANDA"/>';
    $args = array(
        'post_type'   => 'attachment',
        'numberposts' => -1,
        'post_status' => null,
        'post_parent' => $post->ID,
        'exclude'     => get_post_thumbnail_id()
    );

    $attachments = get_posts( $args );

    if ( !$attachments ) {
        $default_image="URL_IMAGE_DEFAULT_ANDA"; //isi dengan url image Anda lengkap dg http-nya
        echo '<meta property="og:image" content="' . $default_image . '"/>';
    } else{
        foreach ( $attachments as $attachment ) {
            $thumbnail_src = wp_get_attachment_image_src($attachment->ID,'large');
        }
        echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
    }
    echo "";
}
add_action( 'wp_head', 'insert_fb_in_head', 5 );

 .. atau script ini pasang di header.php

function insert_fb_in_head() {
    global $post;
    if ( !is_singular()) //jika bukan post atau page return kosong
        return;
    echo '<meta property="fb:admins" content="ID_AKUN_FB_ANDA"/>';
    echo '<meta property="og:title" content="' . get_the_title() . '"/>';
    echo '<meta property="og:type" content="article"/>';
    echo '<meta property="og:url" content="' . get_permalink() . '"/>';
    echo '<meta property="og:site_name" content="NAMA_SITUS_ANDA"/>';
    $args = array(
        'post_type'   => 'attachment',
        'numberposts' => -1,
        'post_status' => null,
        'post_parent' => $post->ID,
        'exclude'     => get_post_thumbnail_id()
    );

    $attachments = get_posts( $args );

    if ( !$attachments ) {
        $default_image="URL_IMAGE_DEFAULT_ANDA"; //isi dengan url image Anda lengkap dg http-nya
        echo '<meta property="og:image" content="' . $default_image . '"/>';
    } else{
        foreach ( $attachments as $attachment ) {
            $thumbnail_src = wp_get_attachment_image_src($attachment->ID,'large');
        }
        echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
    }
    echo "";
}
insert_fb_in_head();

Untuk mengecek apakah settingan Anda sudah benar, silakan kunjungi halaman fb lint ini. Masukkan URL postingan Anda di sana (bukan URL homepage, karena dari script di atas, kalau bukan postingan, meta-nya dikosongi), maka kalau sudah benar, Anda akan mendapatkan hasil seperti di bawah ini:

fblint

 

Untuk mendapatkan FB ID, Anda bisa menggunakan tools di halaman ini.

Demikian.

Nggak penting? Lha emang iya 😀

vale, demi pokokmen

el rony, sing penting

4 thoughts on “Setup Opengraph di Themes WordPress

Leave a Reply

Your email address will not be published. Required fields are marked *