Facebook'ta paylaşımı uygularken belirli bir resmi küçük resim olarak nasıl gösterebilirim?


98

Bu yöntemi paylaşmaya çalışıyorum. Kodu aşağıdaki gibi kullanıyorum

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

Şimdi Facebook gösterdiğinde sol tarafta bazı küçük resimler gösteriyor. Bu resimler web sitemden seçildi. Küçük resim olarak belirli bir resmi nasıl seçebilirim veya en azından küçük resim göstermesini nasıl durdurabilirim?

Blog adresimle kontrol edebilirsiniz .


Yanıtlar:


80

Bu blog gönderisinde cevabınız var gibi görünüyor: http://blog.capstrat.com/articles/facebook-share-thumbnail-image/

Özellikle aşağıdaki gibi bir etiket kullanın:

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

Görselin adı örnekteki ile aynı olmalıdır.

"Önizlemenin Çalıştığından Emin Olma" yı tıklayın

Not: Etiketler doğru olabilir, ancak belgelerine göre Facebook yalnızca 24 saatte bir kazıma yapar. Resmi Facebook'a taşımak için Facebook Lint sayfasını kullanın.

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


6
Facebook, link rel özelliğini kullanmanın her zaman bazı insanlar için işe yaramayacağını belirttiler. Meta özelliğini = "og: image" çok daha güvenilir buluyorum. Aşağıdaki cevap doğru cevap olmalıdır.
Dwayne Charrington

belki de en iyi her iki seçeneği de kullanın
Yosef

6
bu durumda resim türü 'image / gif' olmalıdır, değil mi?
Joaquín L. Robles

98

Facebook'un teknik özelliklerine göre şuna benzer bir kod kullanın:

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

Kaynak: Facebook Paylaşımı


bu eski share.php bağlantısı için değil, sadece daha yeni api için çalışıyor gibi görünüyor
chrismarx

34

Etiketlerim doğruydu ancak belgelerine göre Facebook yalnızca her 24 saatte bir kazıma yapıyor. Facebook Lint sayfasını kullanmak resmi Facebook'a taşıdı.

URL'nizi buraya girin ve FB, sayfanızdaki meta verileri güncelleyecektir:

https://developers.facebook.com/tools/debug (güncellenmiş bağlantı)


22

Facebook, URL'nizi bir paylaşım iletişim kutusunda veya facebook'taki bir haber akışında önizlerken hangi bilgilerin görüntüleneceğini deşifre etmek için og:tagsve Open Graph Protokolünü kullanır .

Aşağıdakiler og:tagsgibi bilgileri içerir:

  • Sayfanın başlığı
  • Sayfanın türü
  • URL
  • Web sitelerinin adı
  • Sayfanın bir açıklaması
  • Sayfanın yöneticilerinin Facebook user_id'leri (facebook'ta)

İşte bazılarının bir örneği ( facebook belgelerinden alınmıştır )og: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"/>

Doğru işaretlemeyi uyguladıktan og:tagsve değerlerini ayarladıktan sonra, Facebook Hata Ayıklayıcı'yı kullanarak facebook'un URL'nizi nasıl görüntüleyeceğini test edebilirsiniz . Hata ayıklayıcı aracı og:tags, sayfada bulduğu veya orada olmayan sorunları da vurgulayacaktır .

Akılda tutulması gereken bir şey facebook olmasıdır gelmez böylece sayfa t edilmesi gerekir değişikliklerin etkili olması için sırayla, bu bilgilere ilişkin bazı önbelleğe alma yapmak kazınmış belgelerinde belirtildiği gibidir:

Meta Etiketleri Düzenleme

Sayfanızın etiketlerini güncelleyerek sayfanızın özniteliklerini güncelleyebilirsiniz. Og: title ve og: type'ın yalnızca başlangıçta düzenlenebilir olduğunu unutmayın - sayfanız 50 beğeni aldıktan sonra başlık sabit hale gelir ve sayfanız 10.000 beğeni aldıktan sonra tür sabitlenir. Bu özellikler, sayfayı zaten beğenen şaşırtıcı kullanıcıları önlemek için düzeltilmiştir. Bu sınırlara ulaşıldıktan sonra başlık veya tür etiketlerini değiştirmek hiçbir şey yapmaz, sayfanız orijinal başlığı ve türü korur.

Değişikliklerin Facebook'a yansıması için sayfanızı kazınmaya zorlamalısınız. Sayfanın yöneticisi Beğen düğmesini tıkladığında veya URL, Facebook URL Linter Facebook Hata Ayıklayıcısına girildiğinde sayfa silinir ...


1
Aşağıdaki etiketleri kullandım: <meta property = "og: url" content = "72.5.167.17:8003/"; /> <meta property = "og: image" content = "72.5.167.17:8003/img/header-logo.png"; /> <meta property = "og: title" content = "Bu benim başlığım" /> <meta property = "og: description" content = "Bu benim açıklamam" /> Başlık ve Açıklama başarıyla değiştirildi, ancak resim hala gelmiyor.
Gaurav123

11

Verilen tüm cevapların doğru olduğunu görüyorum. Bununla birlikte, önemli bir ayrıntı göz ardı edildi: Görüntünün boyutu en az 200 X 200 piksel OLMALIDIR, aksi takdirde Facebook, küçük resmi sayfadaki kriterleri karşılayan mevcut ilk görüntü ile değiştirecektir. Diğer bir gerçek de, gerekli olan minimum şeyin, Facebook'un og: image'ın yürürlüğe girmesi için gerektirdiği 3 metası eklemektir:

<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" />

Sayfanızın hatalarını Facebook hata ayıklayıcı ile ayıklayın ve tüm uyarıları düzeltin, bir cazibe gibi çalışmalıdır! https://developers.facebook.com/tools/debug


Yukarıdaki metin başka bir cevaba göre (yanlış olarak) bir düzeltme olarak önerildi. Daha sonra reddedildi , ancak önemli bilgiler içeriyor gibiydi, bu yüzden düzenlemeyi buraya taşıdım.
chue x

2

Ben de aynı sorunları yaşıyordum ve çözdüğüme inanıyorum. Burada bahsettiğim gibi link meta etiketini istediğim görüntüye işaret etmek için kullandım, ancak anahtar şu ki, eğer bunu yaparsanız FB'nin seçenek olarak başka herhangi bir görüntü çekmeyeceği. Ayrıca görüntünüz çok büyükse, hiçbir seçeneğiniz olmayacak.

Sitemi şu şekilde düzelttim http://gnorml.com/blog/facebook-link-thumbnails/


2

İşte tüm bunların nasıl işlediği:

  1. Paylaştığınız web sayfasındaki HTML'ye erişebilmeniz gerekir. Ortak bir başlık dosyası kullanırsanız, muhtemelen site genelinde de çalışacaktır. Bunu denemedim ama işe yaramalı. Yine de bunu yaparsanız, tüm sayfalar için aynı resmi alırsınız.

  2. Bu HTML meta etiketlerini sayfasındaki sayfaya eklemeniz gerekir. İçine koyarsanız çalışmaz. A) resminize, b) açıklamanıza, c) URL’nize ve d) başlığınıza göre özelleştirdiğinizden emin olun.

Gerçek Bir Örnek.

<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" />
  1. Kayıt etmek
  2. Yeni bir Facebook gönderisi açın ve paylaşmak istediğiniz sayfayı yeniden deneyin.
  3. Eğer sorun yaşıyorsanız… bu Facebook aracıyla hata ayıklayabilirsiniz. Olduğundan daha zeki görünüyor. Paylaşmak için URL'de gönderi paylaştığınızda Facebook'un ne gördüğünü size söyler.

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

Büyük İpucu .. HTML'nizde "tırnak işaretlerinin" aynı olduğundan emin olun (2 düz işaret gibi görünmeli ve eğri olmamalıdır ... bazen programlar bunları farklı yazı tipleriyle değiştirir ve kodu aldatır.


1

Facebook'ta Paylaşım: Görüntüyü, Başlığı ve Metni Özelleştirerek Sonuçlarınızı Nasıl İyileştirebilirsiniz?

Yukarıdaki bağlantıdan. Mümkün olan en iyi paylaşım için, HTML'nizde 3 parça veri önermek isteyeceksiniz:

  • Başlık
  • Kısa Açıklama
  • Resim

Bu, HTML'nizin 'head' etiketinin içine yerleştirilen aşağıdakiler tarafından gerçekleştirilir:

  • Başlık: <title>INSERT POST TITLE</title>
  • Resim: <meta property=og:image content="http://site.com/YOUR_IMAGE.jpg"/>
  • Açıklama: <meta name=description content="INSERT YOUR SUMMARY TEXT"/>

Web siteniz statik HTML ise, HTML düzenleyicinizi kullanarak bunu her sayfa için yapmanız gerekir.

Drupal gibi bir CMS kullanıyorsanız, çoğunu otomatikleştirebilirsiniz (yukarıdaki bağlantıya bakın). WordPress kullanıyorsanız, muhtemelen Drupal örneğini bir kılavuz olarak kullanarak benzer bir şey uygulayabilirsiniz. Umarım bunları yararlı bulmuşsunuzdur.

Son olarak, paylaşım yayınlarınızı her zaman manuel olarak düzenleyebilirsiniz. Bu örneğe resimlerle bakın .


0

Geçen hafta üzerinde çalıştığım bir sitede de sorun yaşadım. Benzer bir kutu uyguladım ve benzer kutuyu test ettim. Sonra başlığıma bir resim eklemeye gittim (ob: image meta). Yine de doğru görüntü facebook bildirimimde görünmedi.

Her şeyi denedim ve beğenme düğmesinin her bir uygulamasının önbelleğe alındığı sonucuna vardım. Diyelim ki url A'daki Beğen düğmesini ayarlıyorsunuz, sonra başlıkta bir resim belirliyorsunuz ve url A'da Luke düğmesine tekrar tıklayarak test ediyorsunuz. Sayfa önbelleğe alındığında resmi görmeyeceksiniz. Resim, B sayfasındaki Beğen düğmesine tıkladığınızda görünecektir.

Önbelleği sıfırlamak için, yukarıda bahsedilen lint hata ayıklayıcı aracını kullanmanız ve önbelleğe alınmış olanlar için tüm URL'leri doğrulamanız gerekir ... Bu benim için çalışan tek şey.


0

Facebook Open Graph'i her Joomla makalesine ayarlamanın en kolay yolu, com_content / article / default.php override, sonraki kodu yerleştirmekti:

$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;

Bu, meta og etiketlerini mevcut makalenin ayrıntılarıyla birlikte başlığa yerleştirecektir.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.