Open Graph Dan Twitter Cards Wordpress Tanpa Featured Image

Setelah kemarin kita mengganti thumbnail Wordpress untuk tema Anew dengan gambar pertama postingan yang dihosting di pihak ketiga, kini kita akan memperbaiki thumbnail yang tidak muncul ketika postingan dishare di sosial media karena tidak memiliki featured image.

Cara termudah untuk menambahkan Open Graph dan Twitter Cards pada Wordpress adalah dengan menggunakan plugin, misalnya dengan plugin Yoast. Namun jika postingan menggunakan image dari pihak lain (tanpa diupload di Wordpress) dalam hal ini berarti tanpa featured image, maka ketika postingan di share di sosial media tidak akan memiliki thumbnail atau diganti dengan no-image thumbnail.

Nah untuk itu, kita akan membuat Open Graph dan Twitter Cards agar postingan memiliki thumbnail walaupun tidak menggunakan featured image. Jika Anda menggunakan plugin untuk Open Graph dan Twitter Cards, silahkan matikan terlebih dahulu.

Silahkan masuk ke Dashboard > Appearance > Editor > header.php

Kemudian silahkan simpan kode di bawah ini di atas kode <?php wp_head(); ?>


<?php if (have_posts()):while(have_posts()):the_post(); endwhile; endif;?>
<!-- the default values -->
<meta property="fb:admins" content="URL PROFIL FB" />
<meta property="fb:profile_id" content="URL PAGE FB" />
<meta property="og:title" content="<?php single_post_title(''); ?>" />
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@TWITTER USERNAME' name='twitter:creator'/>

<!-- if page is content page -->
<?php if (is_single()) { ?>
<meta property="og:url" content="<?php the_permalink() ?>"/>
<meta property="og:description" content="<?php echo strip_tags(get_the_excerpt($post->ID)); ?>" />
<meta property="og:type" content="article" />
<meta property="og:image" content="<?php if (function_exists('catch_that_image')) {echo catch_that_image(); }?>" />

<!-- if page is others -->
<?php } else { ?>
<meta property="og:url" content="<?php echo site_url(); ?>"/>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="og:description" content="<?php bloginfo('description'); ?>" />
<meta property="og:type" content="website" />
<meta property="og:image" content="URL LOGO BLOG" />
<?php } ?>

Silahkan sesuaikan url page facebook, url profil facebook, url logo blog, dan twitter username. Kemudian silahkan simpan perubahannya.

Di bawah ini adalah postingan yang dishare di fb, google+, dan twitter dari blog Wordpress saya yang menggunakan image dari pihak ketiga (Picassa) atau tanpa featured image.



Sumber Code: http://www.hongkiat.com/blog/facebook-open-graph-wordpress/

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments