Jak Facebook Sharer wybiera Obrazy i inne metadane podczas udostępniania mojego adresu URL?

Facebook udostępnia Facebook ' owi możliwość wykorzystania jednego z kilku obrazów pobranych ze źródła jako podgląd łącza. Jak te obrazy są wybierane i jak mogę upewnić się, że każdy konkretny obraz na mojej stronie jest Zawsze uwzględniony na tej liście?

Author: Igy, 2009-07-16

12 answers

Jak powiedzieć Facebook, który obraz używać, gdy moja strona zostanie udostępniona?

Facebook ma zestaw meta tagówopen-graph , na które patrzy, aby zdecydować, który obrazek pokazać.

Klucze dla obrazu Facebook to:

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

I powinien być obecny wewnątrz znacznika <head></head> na górze strony.

Jeśli te znaczniki nie są obecne, będzie szukać ich starszej metody określania obrazu: <link rel="image_src" href="/myimage.jpg"/>. Jeśli żadna z nich nie jest obecna, Facebook spojrzy na zawartość strony i wybierz ze strony obrazy, które spełniają kryteria udostępniania obrazu: obraz musi mieć co najmniej 200px na 200px, mieć maksymalny współczynnik proporcji 3:1 oraz w formacie PNG, JPEG lub GIF.

Czy Mogę określić wiele obrazów, aby umożliwić użytkownikowi wybór obrazu?

Tak, wystarczy dodać wiele metatagów obrazu w kolejności, w jakiej mają się pojawić. Użytkownikowi zostanie wyświetlone okno dialogowe wyboru obrazu:
Facebook Image Selector

Podałem odpowiednie meta tagi obrazu. Dlaczego Facebook nie akceptuje zmian?

Po udostępnieniu adresu url, Robot Facebook, który ma agenta użytkownika facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php), uzyska dostęp do twojej strony i buforuje meta informacje. Facebook Facebook Url Debugger / Linter narzędzie że {32]}uruchomione w czerwcu 2010 aby odświeżyć pamięć podręczną i rozwiązać wszelkie problemy meta tag na stronie.

Również obrazy na stronie MUSZĄ BYĆ publicznie dostępny dla robota Facebook. Powinieneś podać absolutny adres URL http://example.com/yourimage.jpg zamiast tylko / ciebie..jpg

Czy mogę zaktualizować te meta tagi za pomocą kodu po stronie klienta, takiego jak Javascript lub jQuery? Nie. Podobnie jak crawlery wyszukiwarek, skrobak Facebook nie wykonuje skryptów, więc niezależnie od meta tagów są obecne podczas pobierania strony są meta tagi, które są używane do wyboru obrazu.

Dodawanie tych tagi powodują, że moja strona nie jest już weryfikowana. Jak mogę to naprawić?

Możesz dodać niezbędne przestrzenie nazw Facebook do swojego tagu, a Twoja strona powinna przejść walidację:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="https://www.facebook.com/2008/fbml">  
 585
Author: bkaid,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-01-26 21:37:17

Kiedy udostępniasz Facebook, musisz dodać w swoim html do sekcji head następne meta tagi:

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

I to wszystko!

Dodaj przycisk Tak, jak powinieneś, zgodnie z tym, co mówi ci FB.

Wszystkie potrzebne informacje są w www.facebook.com/share/

 36
Author: Matias,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-23 08:19:09

Od 2013 roku, jeśli używasz facebook.com/sharer.php (PHP) można po prostu zrobić dowolny przycisk / link jak:

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

Parametry zapytania linku:

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

To proste: nie potrzebujesz żadnego js ani innych ustawień. To tylko HTML raw link. Styl tag A w dowolny sposób chcesz.

 28
Author: Antonio Max,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-20 15:28:28

Umieść następujący tag w head:

<link rel="image_src" href="/path/to/your/image"/>

Z http://www.facebook.com/share_partners.php

Jeśli chodzi o to, co wybiera jako domyślne w przypadku braku tego tagu, nie jestem pewien.

 13
Author: Matt Bridges,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-06-21 22:12:57

Z mojego doświadczenia wynika, że http://www.facebook.com/sharer.php nie używa meta tagów. Używa sznurka, który przechodzisz. Patrz poniżej.

Http://www.facebook.com/sharer.php?s=100&p[title] = THIS IS MY TITLE&p[summary]=THIS is MY SUMMARY&p[url]= http://www.MYURL.com&&p[images] [0]=http://www.MYURL.com/img/IMAGEADDRESS

Meta tagi działają z deweloperem Facebook like / send przyciski, podobnie jak inne otwarte informacje grafu. Więc jeśli używasz jednego z rzeczywistych Facebook elementy takie jak komentarze i takie, które będą wiązać się z Open Graph stuff.

UPDATE: istnieją dwa sposoby korzystania z sharer * Uwaga ?s kontra the ?wartość u w łańcuchu zapytania
1 ==> STRING: http://www.facebook.com/sharer.php?s + treść z góry
~ ~ > Pobierze informacje z łańcucha.
2 ==> URL: http://www.facebook.com/sharer.php?u=url gdzie url równa się rzeczywistemu url
~ ~ > Zeskrobie stronę podaną w adresie url wartość
~ ~ > Możesz przetestować test wartości tutaj: https://developers.facebook.com/tools/debug

 12
Author: Jason Lydon,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-29 15:33:29

Stary sposób, już nie działa:

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

Zgłoszone nowy sposób, również nie działa:

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

Przypadkowo zadziałał i w ciągu pierwszego dnia wdrożyłem go, nie działa w ogóle od tego czasu.

Facebook linter page, narzędzie, które sprawdza twoją stronę, informuje, że wszystko jest poprawne i wyświetla wybraną miniaturę... tylko ta część.strona php sama w sobie nie działa. To musi być błąd na Facebook ' u, którego widocznie nie chcą naprawić jak każdy raport o błędzie dotyczący tego problemu widziałem w ich systemie wszystkie powiedzieć rozwiązany lub naprawiony.

 11
Author: theo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-06-21 22:12:38

Aby zmienić tytuł, opis i Obrazek, musimy dodać kilka meta tagów pod tagiem head.

Krok 1:
Dodaj meta tagi pod tagiem head

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

NASTĘPNY KROK:
Kliknij na poniższy link
https://developers.facebook.com/tools/debug

Dodaj swój adres URL w polu tekstowym (np http://www.test.com / ) gdzie wspomniałeś o tagach. Kliknij przycisk Debuguj.

Zrobione.

Możesz sprawdzić tutaj https://www.facebook.com/sharer/sharer.php?u=http://www.test.com/

In above url, u = your website link

Smacznego !!!!
 10
Author: Gaurav123,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-02-20 11:41:42

Dla bezpiecznego HTTPS

<meta property="og:image:secure_url" content="https://image.path.png" />
 2
Author: Stefan Michev,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-06-21 22:18:28

Miałem ten problem i naprawiłem go za pomocą sugestii Manuela-84. Używanie obrazu 400x400px działało świetnie, podczas gdy mój mniejszy obraz nigdy nie pojawił się w sharerze.

Zauważ, że Facebook zaleca minimum 200px kwadratowy obraz jako og: tag obrazu: https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/#tags

 1
Author: William,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-23 18:01:54

To mi się udało: umieściłem pożądany obraz miniatury na stronie tuż za tagiem i sprawiłem, że był zbyt mały, aby go zobaczyć..

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

Nie testowałem go z wysokością 0 i szerokością 0, ale prawdopodobnie nadal będzie działać.. Nie gwarantuje to, że użytkownik wybierze ten obraz..

Wydaje się również, że Facebook buforuje miniatury na twojej stronie i nie zawsze sprawdza je pod kątem nowych.. spróbuj dodać to do innej strony w witrynie, a zobaczysz, że to działa.

 1
Author: daniel bernal,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-06-21 22:13:03

Użyj okna dialogowego facebook feed zamiast okna share, aby wyświetlić Niestandardowe obrazy

Przykład:

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
 1
Author: kittu,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-04-04 10:01:08

Facebook nie mógł wybrać odpowiedniego obrazu z konkretnego postu, więc zrobiłem to, co jest opisane na tej stronie:

Https://webapps.stackexchange.com/questions/18468/adding-meta-tags-to-individual-blogger-posts

Innymi słowy, coś takiego:

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

Zasadniczo, zamierzasz zakodować oświadczenie if W HTML witryny, aby zmienić zawartość meta dla tego, co zmieniłeś dla tego jednego posta. To brudne rozwiązanie, ale działa.

 0
Author: Michelle Glauser,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-04-13 12:57:16