Facebook Sharer, URL'mi paylaşırken Resimler'i ve diğer meta verileri nasıl seçer?

393

Facebook Sharer kullanırken, Facebook kullanıcıya kaynaktan çekilen birkaç görüntünün 1'ini bağlantılarının önizlemesi olarak kullanma seçeneği sunacaktır. Bu resimler nasıl seçilir ve sayfamdaki belirli bir resmin her zaman bu listeye dahil edilmesini nasıl sağlayabilirim ?

facebook  facebook-opengraph  facebook-sharer 
— Sampson
kaynak
Meta özelliğini kullanırken gerçekten işe yarıyor, ama çok garip bulduğum geçersiz html! Bir doğrulayıcı aracılığıyla çalıştırmayı deneyin ve göreceksiniz. Neden dünyadaki geçerli html ile çalışmak için alamıyorum bana perdeler?
1
— cope360
3
İpucu- değişiklik yaptıktan sonra .. Sayfanızı
Aşağıdaki makaleyi de çok yararlı buldum:
— Paylaşılacak

Yanıtlar:

593

Facebook'a sayfam paylaşıldığında hangi görüntünün kullanılacağını nasıl söyleyebilirim?

Facebook, hangi görüntünün gösterileceğine karar vermek için baktığı bir dizi açık grafik meta etiketine sahiptir.

Facebook görüntüsü için bir anahtar:

<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />

ve <head></head>sayfanızın üst kısmındaki etiketin içinde bulunmalıdır .

Bu etiketleri mevcut değilse, bu bir görüntü belirterek onların eski yönteme arayacaktır: <link rel="image_src" href="https://stackoverflow.com/myimage.jpg"/>. İkisi de mevcut değilse, Facebook sayfanızın içeriğine bakacak ve sayfanızdan paylaşım resmi ölçütlerini karşılayan resimler seçecektir: Resmin en az 200 piksel x 200 piksel olması, maksimum en boy oranının 3: 1 olması ve PNG'de, JPEG veya GIF formatı.

Kullanıcının bir görüntü seçmesine izin vermek için birden fazla görüntü belirleyebilir miyim?

Evet, görünmelerini istediğiniz sırayla birden fazla resim meta etiketi eklemeniz yeterlidir. Kullanıcıya daha sonra bir resim seçici iletişim kutusu sunulur:
Facebook Görüntü Seçici

Uygun resim meta etiketlerini belirledim. Facebook neden değişiklikleri kabul etmiyor?

Bir URL paylaşıldıktan sonra, kullanıcı aracısı olan Facebook'un tarayıcısı facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php)sayfanıza erişecek ve meta bilgileri önbelleğe alacaktır. Önbelleği temizlemek için Facebook sunucularını zorlamak için kullanın Facebook URL Debugger / Linter Aracı onlar Haziran 2010'da başlatılan önbelleği yenilemek ve sayfanızdaki herhangi meta etiketi sorunlarını gidermek için.

Ayrıca, sayfadaki resimlerin Facebook tarayıcısı tarafından herkes tarafından erişilebilir olması gerekir. Yalnızca /yourimage.jpg yerine http://example.com/yourimage.jpg gibi mutlak URL'ler belirtmelisiniz.

Bu meta etiketleri Javascript veya jQuery gibi istemci tarafı koduyla güncelleyebilir miyim? Hayır. Arama motoru tarayıcılarına çok benzer şekilde, Facebook kazıyıcısı komut dosyaları yürütmez, böylece sayfa indirildiğinde mevcut olan meta etiketler resim seçimi için kullanılan meta etiketlerdir.

Bu etiketleri eklemek sayfamın artık doğrulanmamasına neden oluyor. Bunu nasıl düzeltebilirim?

Etiketinize gerekli Facebook ad alanlarını ekleyebilirsiniz. Sayfanız daha sonra doğrulamayı geçmelidir:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="https://www.facebook.com/2008/fbml">
— bkaid
kaynak
1
Göründüğü başka bir yer: <link rel="apple-touch-icon" href="...">(SO görüntüsünü böyle alıyor)
— Yarin
2
@Yarin Bunun doğru olduğundan emin değilim. StackOverflow, kullandığı image_src özellik kümesine sahiptir. Apple-touch-icon dosya adı farklı ve kullanılmıyor.
— bkaid
3
Görüntünün sırasını seçebilir miyim? Benim durumumda, meta etiketlerin görüntüsünün önünde başka bir resim görünüyor.
— vicenrele
23
Minimum resim boyutu şimdi 200x200 piksel.
— Tr1stan
1
Woot! IMG'nin boyutunu 300 piksel olarak ayarladım, şimdi işe yarıyor gibi görünüyor. Teşekkürler @ Tr1stan
— Urs
37

Facebook için paylaştığınızda, sonraki meta etiketlerin baş bölümüne html'nizi eklemeniz gerekir: 

<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />

Ve bu kadar!

Düğmeyi FB'nin söylediklerine göre gerektiği gibi ekleyin.

İhtiyacınız olan tüm bilgiler www.facebook.com/share/ adresinde.

— Matias
kaynak
28

2013 itibariyle, facebook.com/sharer.php (PHP) kullanıyorsanız aşağıdaki gibi herhangi bir düğme / bağlantı yapabilirsiniz:

<a class="btn" target="_blank" href="http://www.facebook.com/sharer.php?s=100&amp;p[title]=<?php echo urlencode(YOUR_TITLE);?>&amp;p[summary]=<?php echo urlencode(YOUR_PAGE_DESCRIPTION) ?>&amp;p[url]=<?php echo urlencode(YOUR_PAGE_URL); ?>&amp;p[images][0]=<?php echo urlencode(YOUR_LINK_THUMBNAIL); ?>">share on facebook</a>

Bağlantı sorgusu parametreleri:

p[title] = Define a page title
p[summary] = An URL description, most likely describing the contents of the page
p[url] = The absolute URL for the page you're sharing 
p[images][0] = The URL of the thumbnail image to be used as post thumbnail on facebook

Çok basit: js veya başka ayarlara ihtiyacınız yok. Sadece bir HTML ham bağlantısıdır. A etiketini istediğiniz şekilde biçimlendirin.

— Antonio Max
kaynak
p[images][0]tam da ihtiyacım olan şeydi. ogetiketleri aynı resmi paylaşmak için çalışır, ancak aynı sayfadan birden fazla resim paylaşmam gerekiyor.
— thekingoftruth
4
Bu yeni 'kabul edilmiş cevap' olmalıdır - çok basit ve anlaşılır. Bunun için teşekkürler dostum.
— Mike
Antonio, yukarıda gösterdiklerinle ilgili bir kaynak bağlantın var mı? Bunu developers.facebook.com'da aramaya çalışıyorum ama bunun dışında bir şey bulamıyorum . Lütfen yardım et.
— Mr_Green
@Mr_Green bu kadar. Bu özellik 'kullanımdan kaldırıldı', ancak şimdi resmi dokümanlara geri döndü. Her neyse, cevabımın çalışması için temel ayarları kapsadığına inanıyorum.
— Antonio Max
@AntonioMax lütfen yazınızda neler olduğunu açıklayınız s=100?
— Mr_Green
12

Deneyimlerime göre, http://www.facebook.com/sharer.php meta etiketleri kullanmaz. Geçtiğiniz dizeyi kullanır. Aşağıya bakınız.

http://www.facebook.com/sharer.php?s=100&p[title Karışık =THIS BENİM ADIM & p [özet] = BU ÖZETİM & p [url] = http: //www.MYURL.com&&p [resimler] [ 0] = http: //www.MYURL.com/img/IMAGEADDRESS

Meta etiketler, diğer Açık Grafik bilgileri gibi Facebook'un geliştiricisi gibi / gönder düğmeleriyle çalışır. Yani Facebook'un yorumlar ve benzeri gerçek öğelerinden birini kullanırsanız, bunların hepsi Açık Grafik öğelerine bağlanır.

GÜNCELLEME: Daha net * kullanmanın iki yolu vardır *
1 = STR> sorgu dizesindeki? U değerine karşı? S değerini not edin : http://www.facebook.com/sharer.php?s + yukarıdan gelen içerik
~ ~> Dizeden bilgi alır.
2 ==> URL: http://www.facebook.com/sharer.php?u=url burada url gerçek bir url'ye eşittir
~~> url değerinde sağlanan sayfayı kazıyordur
~~> Değerleri test edebilirsiniz burada: https://developers.facebook.com/tools/debug

— Jason Lydon
kaynak
Çok yararlı. Teşekkürler! : D
— Aaron Gray
Bir URL'den içeriği almak için başka bir web sitesinde bu paylaşımcıyı kullanmanın yasal bir yolu var mı? Facebook API ve diğer şeyler hakkında fazla bir şey bilmiyorum ...
— Lyth
URL seçeneğini kullanmayı deneyin. Sayfada OG etiketleri varsa, FB bunları kazıyacaktır. Kullanmak istediğiniz sayfayı burada test edin: developers.facebook.com/tools/debug
— Jason Lydon
11

Eski yol, artık çalışmıyor:

<link rel="image_src" href="http://yoururl/yourimage"/>

Yeni yol bildirildi, ayrıca çalışmıyor:

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

Rastgele çalıştı ve uyguladığım ilk gün boyunca devam etti, o zamandan beri hiç işe yaramadı.

Sayfanızı inceleyen bir yardımcı program olan Facebook linter sayfası, her şeyin doğru olduğunu ve seçtiğim küçük resmi görüntülediğini bildiriyor ... sadece share.php sayfasının kendisi çalışmıyor gibi görünüyor. Facebook'ta bir hata olmalı, görünüşe göre sistemlerinde gördüğüm bu sorunla ilgili her hata raporunun tümünün çözülmüş veya sabit olduğunu söylediği gibi düzeltmeyi umursamıyorlar.

— theo
kaynak
Ben de bu sorunu yaşıyorum. Linter hata bildirmiyor ve resmimi doğru gösteriyor, ancak sitemdeki paylaş düğmesine tıkladığımda paylaşım arayüzünde kesinlikle görüntü yok.
— Luke Griffiths
image_src artık Facebook için çalışmıyor, ANCAK bazı hizmetler hala kullanıyor (Telegram istemcileri, vb.)
— Andres SK
10

Başlık, Açıklama ve Görüntüyü değiştirmek için başlık etiketi altına bazı meta etiketler eklememiz gerekir.

ADIM 1:
Kafa etiketinin altına meta etiketler ekleyin 

<html>
<head>
    <meta property="og:url" content="http://www.test.com/" />
    <meta property="og:image" content="http://www.test.com/img/fb-logo.png" />
    <meta property="og:title" content="Prepaid Phone Cards, low rates for International calls with Lucky Prepay" />
    <meta property="og:description" content="Cheap prepaid Phone Cards. Low rates for international calls anywhere in the world." />

SONRAKİ ADIM:
Aşağıdaki linke tıklayın
https://developers.facebook.com/tools/debug

URL'nizi , etiketlerden bahsettiğiniz metin kutusuna (ör. Http://www.test.com/ ) ekleyin. DEBUG düğmesine tıklayın.

Bitti.

Burada doğrulayabilirsiniz https://www.facebook.com/sharer/sharer.php?u=http://www.test.com/

Yukarıdaki URL'de, u = web sitenizin bağlantısı

ZEVK ALMAK !!!!

— Gaurav123
kaynak
Hata ayıklayıcı yardımcı oldu.
— konsolebox
2

Güvenli HTTPS için 

<meta property="og:image:secure_url" content="https://image.path.png" />
— Stefan Michev
kaynak
1

Bu benim için işe yaradı: İstediğim küçük resim görüntüsünü etiketin hemen arkasına yerleştirdim ve görmek için çok küçük yaptım ..

<img src="imagename.jpg" width="1" height="1" />

Ben yükseklik 0 ve genişlik 0 ile test etmedim ama muhtemelen hala işe yarayacak .. Bu kullanıcının bu resmi seçeceğini garanti etmez ..

AYRICA Facebook sayfanızdaki küçük resimleri önbelleğe alır ve her zaman yenilerini kontrol etmez. Bunu sitenizdeki başka bir sayfaya eklemeyi deneyin ve çalıştığını görürsünüz.

— daniel bernal
kaynak
1
etiketinden sonra - "BODY etiketinden sonra" mı demek istediniz?
— Alexis Wilke
Evet, bunun demek istediklerine inanıyorum. Bunu uzun zaman önce bir sitede yaptım, ancak style="display:none;"1x1 piksele ayarlamak yerine kullandım .
— Mike
1

Özel Görseller göstermek için paylaşım iletişim kutusu yerine facebook yayın iletişim kutusunu kullanma

Misal:

https://www.facebook.com/dialog/feed?app_id=1389892087910588
&redirect_uri=https://scotch.io
&link=https://scotch.io
&picture=http://placekitten.com/500/500
&caption=This%20is%20the%20caption
&description=This%20is%20the%20description
— kittu
kaynak
0

Facebook'u belirli bir gönderiden doğru resmi seçemedim, bu yüzden bu sayfada ana hatları verilenleri yaptım:

/webapps/18468/adding-meta-tags-to-individual-blogger-posts

Başka bir deyişle, böyle bir şey:

<b:if cond='data:blog.url == "http://urlofyourpost.com"'>
  <meta content='http://urlofyourimage.png' property='og:image'/>
 </b:if>

Temel olarak, bir yayın için değiştirdiğiniz her şeyin meta içeriğini değiştirmesini sağlamak için sitenizin HTML'sine bir if ifadesini sabit olarak kodlayacaksınız. Bu dağınık bir çözüm, ama işe yarıyor.

— Michelle Glauser
kaynak
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.