Bagaimana cara menampilkan gambar tertentu sebagai thumbnail saat menerapkan share di Facebook?

Saya mencoba menerapkan berbagi metode ini. Saya menggunakan kode sebagai berikut

http://www.facebook.com/share.php?u=my_website_url

Sekarang ketika Facebook menampilkannya menunjukkan beberapa thumbnail di sisi kiri. Gambar-gambar ini diambil dari situs web saya. Bagaimana cara memilih gambar tertentu sebagai thumbnail atau setidaknya menghentikannya menampilkan thumbnail?

Anda dapat memeriksanya dengan alamat blog saya .

Entri blog ini sepertinya memiliki jawaban Anda: http://blog.capstrat.com/articles/facebook-share-thumbnail-image/

Secara khusus, gunakan tag seperti berikut:

<link rel="image_src" 
      type="image/jpeg" 
      href="http://www.domain.com/path/icon-facebook.gif" />

Nama gambar harus sama seperti pada contoh.

Klik "Memastikan Pratinjau Bekerja"

Catatan: Tag bisa benar tetapi Facebook hanya menghapus setiap 24 jam, menurut dokumentasinya. Gunakan halaman Facebook Lint untuk memasukkan gambar ke Facebook.

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

Dari spesifikasi Facebook, gunakan kode seperti ini:

<meta property="og:image" content="http://siim.lepisk.com/wp-content/uploads/2011/01/siim-blog-fb.png" />

Sumber: Bagikan Facebook

Tag saya benar tetapi Facebook hanya menggores setiap 24 jam, menurut dokumentasi mereka. Menggunakan halaman Facebook Lint memasukkan gambar ke Facebook.

Masukkan URL Anda di sini dan FB akan memperbarui metadata dari halaman Anda:

https://developers.facebook.com/tools/debug (tautan diperbarui)

Facebook menggunakan og:tagsdan Open Graph Protocol untuk menguraikan informasi apa yang akan ditampilkan saat mempratinjau URL Anda dalam dialog berbagi atau dalam umpan berita di facebook.

The og:tagsberisi informasi seperti:

• Judul halaman
• Jenis halaman
• URL
• Nama situs web
• Deskripsi halaman
• Facebook user_id dari administrator halaman (di facebook)

Berikut ini contoh (diambil dari dokumentasi facebook ) dari beberapaog:tags

<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>

Setelah Anda menerapkan markup yang benar dari og:tagsdan menetapkan nilainya, Anda dapat menguji bagaimana facebook akan melihat URL Anda dengan menggunakan Facebook Debugger . Alat debugger juga akan menyoroti masalah apa pun yang ditemukannya og:tagspada laman atau kekurangannya.

Satu hal yang perlu diingat adalah facebook memang melakukan beberapa cache berkenaan dengan informasi ini, jadi agar perubahan diterapkan, halaman Anda tidak akan dihapus seperti yang dinyatakan dalam dokumentasi:

Mengedit Tag Meta

Anda dapat memperbarui atribut halaman Anda dengan memperbarui tag halaman Anda. Perhatikan bahwa og: title dan og: type pada awalnya hanya dapat diedit - setelah halaman Anda menerima 50 suka, judul menjadi tetap, dan setelah halaman Anda menerima 10.000 suka, jenisnya menjadi tetap. Properti ini diperbaiki untuk menghindari pengguna yang mengejutkan yang sudah menyukai halaman tersebut. Mengubah judul atau jenis tag setelah batas ini tercapai tidak berarti apa-apa, halaman Anda mempertahankan judul dan jenis aslinya.

Agar perubahan dapat diterapkan di Facebook, Anda harus memaksa halaman Anda untuk dihapus. Halaman ini dikikis ketika admin untuk halaman mengklik tombol Suka atau ketika URL dimasukkan ke dalam URL Facebook Linter Facebook Debugger ...

Saya melihat bahwa semua jawaban yang diberikan benar. Namun, satu detail penting terlewat: Ukuran gambar HARUS minimal 200 X 200 piksel, jika tidak, Facebook akan mengganti thumbnail dengan gambar pertama yang tersedia yang memenuhi kriteria di halaman. Fakta lainnya adalah bahwa persyaratan minimum adalah menyertakan 3 metas yang dibutuhkan Facebook agar og: image diterapkan:

<meta property="og:title" content="Title of the page" />
<!-- NEXT LINE Even if page is dynamically generated and URL contains query parameters -->
<meta property="og:url" content="http://yoursite.com" />
<meta property="og:image" content="http://convertaholics.com/convertaholics-og.png" />

Debug halaman Anda dengan debugger Facebook dan perbaiki semua peringatan dan itu akan bekerja seperti pesona! https://developers.facebook.com/tools/debug

Saya mengalami masalah yang sama dan yakin saya telah menyelesaikannya. Saya menggunakan tag meta tautan seperti yang disebutkan di sini untuk menunjuk ke gambar yang saya inginkan, tetapi kuncinya adalah jika Anda melakukan itu, FB tidak akan menarik gambar lain sebagai pilihan. Juga jika gambar Anda terlalu besar, Anda tidak akan punya pilihan sama sekali.

Inilah cara saya memperbaiki situs saya http://gnorml.com/blog/facebook-link-thumbnails/

Begini cara kerjanya:

1. Anda memerlukan kemampuan untuk mengakses HTML pada halaman web tertentu yang Anda bagikan. Ini mungkin akan berfungsi di seluruh situs juga jika Anda menggunakan file header umum. Saya belum mencoba ini, tetapi seharusnya berhasil. Anda hanya akan mendapatkan gambar yang sama untuk semua halaman jika Anda melakukan ini.

2. Anda perlu menambahkan tag meta HTML ini ke halaman di. Ini tidak akan berhasil jika Anda memasukkannya ke dalam. Pastikan untuk menyesuaikan sesuai a) gambar, b) deskripsi, c) URL, dan d) judul.

Contoh Nyata.

<meta property="og:image" content="http://www.coachesneedsocial.com/wp-content/uploads/2014/12/BannerWCircleImages-1.jpg" />

<meta property="og:description" content="Coaches share their secrets to success so you can rock 2015." />

<meta property="og:url"content="http://www.coachesneedsocial.com/coacheswisdomtelesummit/" />

<meta property="og:title" content="Coaches Wisdom Telesummit" />

3. Menyimpan
4. Buka kiriman Facebook baru, dan coba lagi halaman yang ingin Anda bagikan.
5. Jika Anda mengalami masalah… Anda dapat men-debugnya dengan alat Facebook ini. Ini terlihat lebih culun daripada yang sebenarnya. Ini memberi tahu Anda apa yang dilihat Facebook saat Anda memposting di URL untuk dibagikan.

https://developers.facebook.com/tools/debug/og/object/

Tip Besar .. pastikan “tanda kutip” sama di HTML Anda (seharusnya terlihat seperti 2 tanda lurus dan tidak ada kurva… terkadang program mengubahnya menjadi font yang berbeda dan kode tersebut akan salah.

Berbagi di Facebook: Cara Meningkatkan Hasil Anda dengan Menyesuaikan Gambar, Judul, dan Teks

Dari tautan di atas. Untuk mendapatkan hasil terbaik, Anda sebaiknya menyarankan 3 bagian data di HTML Anda:

• Judul
• Deskripsi Singkat
• Gambar

Ini dilakukan dengan hal berikut, ditempatkan di dalam tag 'head' di HTML Anda:

• Judul: <title>INSERT POST TITLE</title>
• Gambar: <meta property=og:image content="http://site.com/YOUR_IMAGE.jpg"/>
• Deskripsi: <meta name=description content="INSERT YOUR SUMMARY TEXT"/>

Jika situs web Anda adalah HTML statis, Anda harus melakukan ini untuk setiap halaman menggunakan editor HTML Anda.

Jika Anda menggunakan CMS seperti Drupal, Anda dapat mengotomatiskannya (lihat tautan di atas). Jika Anda menggunakan wordpress, Anda mungkin dapat mengimplementasikan sesuatu yang serupa dengan menggunakan contoh Drupal sebagai pedoman. Saya harap Anda menemukan ini berguna.

Terakhir, Anda selalu dapat mengedit posting berbagi Anda secara manual. Lihat contoh ini dengan ilustrasi .

Saya juga mengalami masalah di situs yang saya kerjakan minggu lalu. Saya menerapkan kotak suka dan menguji kotak sejenis. Lalu saya melanjutkan untuk menambahkan gambar ke header saya (ob: meta gambar). Masih gambar yang benar tidak muncul di notifikasi facebook saya.

Saya mencoba segalanya, dan sampai pada kesimpulan bahwa setiap implementasi tombol suka di-cache. Jadi katakanlah Anda menentukan waktu tombol Suka di url A, lalu Anda menentukan gambar di tajuk dan Anda mengujinya dengan mengklik lagi tombol Luke di url A. Anda tidak akan melihat gambar tersebut saat halaman di-cache. Gambar akan muncul ketika Anda mengklik tombol Suka di halaman B.

Untuk mengatur ulang cache, Anda harus menggunakan alat debugger lint yang disebutkan di atas, dan memvalidasi semua Url untuk mereka yang di-cache ... Itulah satu-satunya hal yang berhasil bagi saya.

Cara termudah yang saya temukan untuk mengatur Facebook Open Graph ke setiap artikel Joomla, adalah dengan meletakkan di com_content / article / default.php override, kode berikut:

$app    = JFactory::getApplication();
$path   = JURI::root();

$document = JFactory::getDocument();
$document->addCustomTag('<meta property="og:title" content="YOUR SITE TITLE" />');
$document->addCustomTag('<meta property="og:name" content="YOUR SITE NAME" />');
$document->addCustomTag('<meta property="og:description" content="YOUR SITE DESCRIPTION" />');
$document->addCustomTag('<meta property="og:site_name" content="YOUR SITE NAME" />');
if (isset($images->image_fulltext) and !empty($images->image_fulltext)) : 
    $document->addCustomTag('<meta property="og:image" content="'.$path.'<?php echo htmlspecialchars($images->image_fulltext); ?>" />');
else :
    $document->addCustomTag('<meta property="og:image" content="'.$path.'images/logo.png" />');
 endif;

Ini akan menempatkan tag meta di kepala dengan detail dari artikel saat ini.