Bagaimana saya bisa mengontrol gambar seperti Facebook? [Tutup]

Saya memiliki blog dengan beberapa posting, dan setiap posting memiliki tombol suka Facebook yang disematkan . Menekan tombol membuka dialog sehingga pengunjung saya dapat membagikan pos di Facebook dengan komentar.

Ketika berbagi, bagaimanapun, gambar yang dipilih oleh Facebook adalah ikon surat biasa dan bukan thumbnail posting.

Bagaimana saya bisa mengontrol gambar yang digunakan saat berbagi?

Gambar yang digunakan untuk berbagi diambil dari sepotong kode di header situs Anda yang akan terlihat seperti ini:

<link rel="image_src" href="path/to/theme/screenshot.png" />

Biasanya itu tautan ke tangkapan layar situs Anda dalam tema. Jika Anda menghapus kode dari header file dan pada single.php letakkan di dalam loop dan memanggil gambar thumbnail posting Anda ke elemen href saya percaya itu akan berhasil. Jadi akan terlihat seperti:

<link rel="image_src" href="<?php the_post_thumbnail(); ?>" />

Ini berarti bahwa jika Anda memiliki tombol suka pada halaman yang mencantumkan banyak posting, Anda mungkin tidak akan memiliki gambar. Jika Anda menyertakan beberapa kode kondisional yang menghapusnya hanya pada single.php maka Anda akan memiliki gambar normal pada halaman mana pun dengan banyak posting dan tombol suka dan thumbnail posting ketika template single.php sedang digunakan. Jadi kode tajuknya adalah:

<?php if ( is_single() ) { /* do nothing on single pages */ } else { ?>
<link rel="image_src" href="path/to/theme/screenshot.png" />
<?php } ?>

Maka Anda masih akan menggunakan kode untuk memasukkan thumbnail posting di single.php.

Facebook sekarang menggunakan protokol pembuka. Anda dapat menambahkan gambar menggunakan:

<meta property = "og: image" content = "http: // YOUR_IMAGE_URL" />

Tambahkan baris ini ke header halaman Anda.

Atau Anda dapat menggunakan plugin saya untuk melakukan ini secara otomatis.

Itu hanya melakukan pekerjaan ini dan tidak ada pengaturan yang diperlukan.

http://shailan.com/wordpress/plugins/facebook-meta-tags-plugin/

Anda perlu menggunakan Protokol Grafik Terbuka Facebook. Saya tidak yakin mengapa jawaban yang Diterima bukan salah satu dari banyak OG: jawaban terkait (yang saya pilih) tetapi itu salah.

http://developers.facebook.com/docs/opengraph/

Anda dapat menyesuaikan banyak hal termasuk judul, gambar, deskripsi, kategori, pembaruan terakhir dll ... jika Anda menggunakan Grafik Terbuka. Jika Anda menggunakan setengah solusi lainnya, Anda kehilangan seluruh gambaran.

Jika saya tidak mengikuti Protokol OG untuk semua pekerjaan FB yang saya lakukan, saya akan dipecat.

Jika Anda melakukan hal berikut:

<link rel="image_src" href="<?php the_post_thumbnail(); ?>" />

Anda akan menemukan bahwa Wordpress mengeluarkan html yang diperlukan untuk menampilkan gambar, bukan hanya SRC yang benar-benar Anda inginkan.

Melakukan sesuatu seperti:

<?php

// Featured Image for FB Like
$feature_image = get_the_post_thumbnail($post->ID);

// Get image source
$doc = new DOMDocument();
$doc->loadHTML($feature_image);
$imageTags = $doc->getElementsByTagName('img');

foreach($imageTags as $tag) {
        $image_url = $tag->getAttribute('src');
    }
?>
<link rel="image_src" href="<?php echo $image_url; ?>" />

memberi Anda URL saja. Ini mungkin jauh dan mungkin bisa disingkat, tapi itu pasti memperbaiki masalah.

Semoga ini menempatkan Anda di jalur yang benar.

Mat.

Pastikan Anda membasahi URL Anda di sini jika gambar yang ditentukan tidak muncul dengan benar:

http://developers.facebook.com/tools/lint/

Jika Anda ingin menggunakan gambar pertama dari posting Anda sebagai thumbnail dengan mundur ke sesuatu seperti logo Anda, coba plugin saya - http://wordpress.org/extend/plugins/facebook-like-thumbnail/ Penjelasan untuk menambahkan gambar logo fallback ada di http://blog.ashfame.com/?p=888

<meta property="og:image" content="http://YOUR_IMAGE_URL" />

Metode ini berfungsi untuk "seperti": s tetapi di kemudian hari jika Anda ingin membagikan tautan di log Anda (Misalnya.) Gambar ini dipilih secara otomatis.

Tanpa tag meta ini, Anda dapat memilih dari semua gambar di situs yang tertaut.

Adakah yang tahu cara untuk menjaga gambar "like" statis tetapi tetap membuat Anda memilih gambar saat berbagi url?

OK saya menulis sedikit javascript untuk mengisi Meta og: gambar dengan gambar pilihan pilihan saya. Ini adalah hack satu kali yang Anda tambahkan ke file header Anda.

Dalam posting wordpress saya, saya menambahkan id "Featured-image" (Saya tahu nanti wordpress ini built-in, saya menggunakan yang lama).

<xmp><img src="http://mysite.com/catphoto.jpg" id="featured-image" /></xmp>

Saya menulis tag meta untuk og: gambar dengan placeholder, seperti log blog saya. Tambahkan "id =" meta-image "ke tag, yaitu

<meta property="og:image" src="http://mysite.com/logo.jpg" id="meta-image" />

Kemudian tambahkan javascript ini di header:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"> </script>

<script type="text/javascript">
$(document).ready( function(){
    var featured_image = $("#featured-image").attr("src");
    $('meta[property="og:image"]').attr("content",featured_image);
});