Open Graph Dan Twitter Cards Wordpress Tanpa Featured Image

Open Graph Dan Twitter Cards Wordpress Tanpa Featured Image

Bola Hero Gawai

Open Graph Dan Twitter Cards Wordpress Tanpa Featured Image

Open Graph Dan Twitter Cards Wordpress
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/

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×