Memasang Facebook Meta Og WordPress

Share artikel ke facebook adalah salah satu cara kita untuk mempromosikan web atau blog yang kita punya. Seperti kita ketahui Facebook merupakan web social network tersukses saat ini, sehingga wajib hukumnya mempromosikan web atau blog ke facebook  untuk menambah kepopuleran web atau blog kita.

Namun masalah yang sering muncul ketika kita coba share salah satu artikel kita ke facebook adalah image dan text decription (review artikel) yang tidak muncul. Alhasil yang muncul cuma alamat link artikelnya saja, seperti contoh gambar dibawah ini.

Ada beberapa faktor yang menyebabkan hal tersebut terjadi, diantaranya karena penyedia hosting tidak memberikan akses terhadap layanan tersebut atau karena anda belum menyertakan meta tag yang diperlukan oleh facebook untuk menggali informasi dari artikel yang akan anda share.

Jika faktornya adalah penyedia hosting, maka anda dapat menghubungi cs penyedia hosting tersebut untuk memecahkan persoalan anda. Tapi sebelum anda lapor, ada baiknya anda mencoba menambahkan meta tag yang diperlukan facebook, siapa tahu berhasil. Apa itu meta tag? silakan anda browsing saja di google, anda pasti akan menemukan jawabannya.

Langsung ke TKP

1. Silakan login ke wordpressnya masing2, www.namadomain.com/wp-admin

2. Pada bagian Appearance, klik Editor

3. Dibagian sebelah kanan, klik file bernama functions.php

4. Kotak editor ditengah akan berubah isinya, menampilkan isi dari file functions.php. Geser slidebar kebawah sampai pada script yang terakhir.

5. Copy seluruh  kode yang ada dibawah ini

function add_opengraph_doctype( $output ) {
        return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"';
    }
add_filter('language_attributes', 'add_opengraph_doctype');

//Menambahkan Facebook Meta

function insert_fb_in_head() {
    global $wp_query;
    global $post;
    if ( !is_singular())
        {
        echo "\n";
        echo '<meta property="og:title" content="' . get_bloginfo('name') . '"/>';
        echo "\n";
        echo '<meta property="og:type" content="website"/>';
        echo "\n";
        echo '<meta property="og:url" content="' . get_bloginfo('url') . '"/>';
        echo "\n";
        echo '<meta property="og:site_name" content="GANTI DENGAN NAMA DOMAIN"/>';
        echo "\n";
        echo '<meta property="og:description" content="' . get_bloginfo('description') . '"/>';
        echo "\n";
        echo '<meta property="og:image" content="GANTI DENGAN LINK IMAGE"/>';
        echo "\n";
        echo "\n";
        }
    else
        {
        $thePostID = $wp_query->post->ID;
        $the_post = get_post($thePostID);

        // Description
        if($the_post->post_excerpt)
            {
            $desc = trim(esc_html(strip_tags(do_shortcode( apply_filters('the_excerpt', $the_post->post_excerpt) ))));
            }
        else
            {
            $text = strip_shortcodes( $the_post->post_content );
            $text = apply_filters('the_content', $text);
            $text = str_replace(']]>', ']]&gt;', $text);
            $text = addslashes( strip_tags($text) );
            $excerpt_length = apply_filters('excerpt_length', 55);

            $words = preg_split("/[\n\r\t ]+/", $text, $excerpt_length + 1, PREG_SPLIT_NO_EMPTY);
            if ( count($words) > $excerpt_length )
                {
                array_pop($words);
                $text = implode(' ', $words);
                $text = $text . "...";
                }
            else
                {
                $text = implode(' ', $words);
                }

            $desc =  $text;
            }

function get_fbimage() {
  if ((function_exists('has_post_thumbnail')) && (has_post_thumbnail())) {
  $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), '', '' );
  $fbimage = $src[0];
  } else {
    global $post, $posts;
    $fbimage = '';
    $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i',
    $post->post_content, $matches);
    $fbimage = $matches [1] [0];
  }
  if(empty($fbimage)) {
        $default_image="GANTI DENGAN LINK IMAGE";
        $fbimage = $default_image;
  }
  return $fbimage;
}

        echo '<meta property="og:image" content="'.get_fbimage().'"/>';
        echo "\n";
        echo '<meta property="og:title" content="' . get_the_title() . '"/>';
        echo "\n";
        echo '<meta property="og:type" content="article"/>';
        echo "\n";
        echo '<meta property="og:url" content="' . get_permalink() . '"/>';
        echo "\n";
        echo '<meta property="og:site_name" content="GANTI DENGAN NAMA DOMAIN"/>';
        echo "\n";
        echo '<meta property="og:description" content="'. $desc .'" />';
        echo "\n";
        echo "\n";
        }
}
add_action( 'wp_head', 'insert_fb_in_head', 5 );

6. Paste kode tersebut ke dalam file functions.php, tepat sebelum tanda ?>

7. Setelah di Paste, lakukan perubahan pada kode tersebut. Carilah tulisan berikut pada kode tadi :

  • GANTI DENGAN NAMA DOMAIN (ada 2), contoh http://myjayvyn.com
  • GANTI DENGAN LINK IMAGE (ada 2), terlebih dahulu anda upload image yang akan menjadi logo dari web anda (ukuran image 100×100 pixel), lalu copy link URLnya. contoh http://myjayvyn.com/wp-content/uploads/2012/02/logo1.jpg.

8. Klik update file

9. Selesai… sekarang cobalah share artikel anda ke facebook. Mestinya muncul seperti gambar dibawah ini

10. Good luck :)

Author: Agie

Mun teu ngopek moal nyapek, mun teu ngakal moal ngakeul, mun teu ngarah moal ngarih... Shou Zhu Dai Tu

More Posts - Website

Follow Me:
TwitterFacebookPinterestGoogle Plus

Advertisment
7 Ibu rumah tangga DAN mantan karyawan
BEKERJA online DARI RUMAH

DAN KINI BERPENGHASILAN 7-20jt per bulan
DARI BISNIS Oriflame MELALUI d'BC Network

Kami telah membuktikannya
Ingin tahu apa saja yang telah kami lakukan?


Follow my biz on Facebook



9 Comments

  • Sari Rickerman |

    ada cara lebih mudah untuk mengganti link image yang emang ada di website pribadi saya?

  • Ida |

    pak ini gambarnya bebas atau harus yang sudah pernah di upload di web yg bersangkutan??

    pas disharing ke FB kan biasanya nanti ada pilihan utk ganti image sesuai dengan postingan kan ya …. gak melulu image yang linknya kita taruh di dalam kode2 diatas tadi setiap kali kita ganti link sharenya…

  • Ida |

    apa karena pengaruh saya pasang kode2 ini dan ada kesalahan saat kopas bisa menyebabkan eror di web saya???
    dari kemarin gak keliatan page2nya… hanya dalam bentuk seperti directory gitu pak Agi hihihh begitupun saat masuk ke wp-admin … jadi mau di refresh lagi gak bisa dan gak tahu gimana caranya … :D

    Bisa bantu cek tampilannya di http://www.roemah-imoet.com
    nuhun

So, what do you think ?