W jaki sposób Facebook Sharer wybiera obrazy i inne metadane podczas udostępniania mojego adresu URL?

393

Korzystając z Facebook Sharer, Facebook zaoferuje użytkownikowi opcję użycia jednego z kilku zdjęć pobranych ze źródła jako podglądu ich łącza. Jak wybierane są te obrazy i jak mogę się upewnić, że jakiś konkretny obraz na mojej stronie zawsze znajduje się na tej liście?

facebook facebook-opengraph facebook-sharer Sampson
źródło
To rzeczywiście działa podczas korzystania z właściwości meta, ale jest to nieprawidłowy HTML, co uważam za bardzo dziwne! Spróbuj uruchomić go przez walidator, a zobaczysz. Zaskakuje mnie, dlaczego, do cholery, nie mogą zmusić tego do pracy z poprawnym HTML?
1
patrz developers.facebook.com/docs/opengraph <html xmlns: og = " opengraphprotocol.org/schema " ...
cope360
3
Wskazówka: po wprowadzeniu zmian. Uruchom swoją stronę przez linijkę, a Facebook zaktualizuje miniatury itp. Dla tej strony developers.facebook.com/tools/lint
Uważam, że następujący artykuł jest również bardzo przydatny: Jak dostosować adres URL, tekst i IMG do udostępnienia
J0ANMM

Odpowiedzi:

593

Jak powiedzieć Facebookowi, którego obrazu użyć, gdy moja strona zostanie udostępniona?

Facebook ma zestaw metatagów z otwartym wykresem, na który patrzy, aby zdecydować, który obraz ma zostać wyświetlony.

Kluczami do obrazu na Facebooku są:

<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 znajdować się wewnątrz <head></head>tagu u góry strony.

Jeśli te tagi nie są obecne, wyszuka starszą metodę określania obrazu: <link rel="image_src" href="https://stackoverflow.com/myimage.jpg"/> . Jeśli żadna z nich nie jest obecna, Facebook spojrzy na zawartość strony i wybierze obrazy ze strony, które spełniają kryteria udostępniania obrazu: Obraz musi mieć rozmiar co najmniej 200 na 200 pikseli, maksymalny współczynnik kształtu 3: 1, aw PNG, Format JPEG lub GIF.

Czy mogę określić wiele obrazów, aby umożliwić użytkownikowi wybranie obrazu?

Tak, wystarczy dodać wiele metatagów obrazu w kolejności, w jakiej mają się pojawiać. Użytkownik zostanie wyświetlony w oknie dialogowym wyboru obrazu:
Selektor obrazów na Facebooku

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

Po udostępnieniu facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php)adresu URL przeszukiwacz Facebooka, który ma klienta użytkownika , uzyska dostęp do Twojej strony i buforuje meta informacje. Aby zmusić serwery Facebooka do wyczyszczenia pamięci podręcznej, użyj narzędzia Debuger / linter url Facebooka , które uruchomiono w czerwcu 2010 r., Aby odświeżyć pamięć podręczną i rozwiązać problemy z metatagami na stronie.

Ponadto obrazy na stronie muszą być publicznie dostępne dla robota Facebook. Należy podać bezwzględne adresy URL, takie jak http://example.com/twojimage.jpg zamiast po prostu /twojimage.jpg.

Czy mogę zaktualizować te metatagi za pomocą kodu po stronie klienta, takiego jak JavaScript lub jQuery? Nie. Podobnie jak przeszukiwacze wyszukiwarek, skrobak Facebooka nie wykonuje skryptów, więc wszelkie metatagi obecne podczas pobierania strony to metatagi używane do wyboru obrazu.

Dodanie tych tagów powoduje, że moja strona nie jest już sprawdzana. Jak mogę to naprawić?

Możesz dodać niezbędne przestrzenie nazw Facebooka do swojego tagu, a następnie Twoja strona powinna przejść sprawdzanie poprawności:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="https://www.facebook.com/2008/fbml">
bkaid
źródło
1
Kolejne miejsce, w którym wygląda: <link rel="apple-touch-icon" href="...">(tak dostaje obraz SO)
Yarin
2
@Yarin Nie jestem pewien, czy to prawda. StackOverflow ma ustawioną właściwość image_src, z której korzysta. Nazwa pliku ikony dotyku jabłka jest inna i nie jest używana.
bkaid
3
Czy mogę wybrać zamówienie obrazu? W moim przypadku przed obrazem metatagów pojawiają się kolejne obrazy.
vicenrele
23
Minimalny rozmiar obrazu to teraz 200 x 200 pikseli.
Tr1stan
1
Woot! Ustawiłem rozmiar obrazu na 300 pikseli, teraz wydaje się, że działa. Thanks @ Tr1stan
Urs
37

Kiedy udostępniasz dla Facebooka, musisz dodać swój html do sekcji head następnych metatagów: 

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

I to wszystko!

Dodaj przycisk zgodnie z zaleceniami FB.

Wszystkie potrzebne informacje znajdują się na stronie www.facebook.com/share/

Matias
źródło
28

Począwszy od 2013 r., Jeśli używasz facebook.com/sharer.php (PHP), możesz po prostu utworzyć dowolny przycisk / link, taki 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>

Połącz parametry zapytania:

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 żadnych plików js ani innych ustawień. To tylko zwykły link HTML. Styluj znacznik A w dowolny sposób.

Antonio Max
źródło
p[images][0]było dokładnie tym, czego potrzebowałem. ogtagi działają w celu udostępniania tego samego obrazu, ale muszę udostępnić wiele obrazów z tej samej strony.
thekingoftruth
4
To powinna być nowa „akceptowana odpowiedź” - tak prosta i jednoznaczna. Dzięki za to, kolego.
Mike
Antonio, czy masz link źródłowy do tego, co pokazałeś powyżej? Próbuję to sprawdzić w developers.facebook.com, ale nie mogę znaleźć niczego poza tym . Proszę pomóż.
Mr_Green
@Mr_Green to wszystko. Ta funkcja została „wycofana”, ale teraz powróciła do oficjalnych dokumentów. W każdym razie uważam, że moja odpowiedź obejmuje podstawowe ustawienia, aby zadziałało.
Antonio Max
@AntonioMax proszę wyjaśnić, co jest s=100w Twoim poście?
Mr_Green
13

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

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

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

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

Matt Bridges
źródło
12

Z mojego doświadczenia wynika , że http://www.facebook.com/sharer.php nie używa metatagów. Używa przekazanego ciągu. Patrz poniżej.

http://www.facebook.com/sharer.php?s=100&p[title]=THIS IS MY TITLE & p [podsumowanie] = TO JEST MOJE PODSUMOWANIE & p [url] = http: //www.MYURL.com&&p [obrazy] [ 0] = http: //www.MYURL.com/img/IMAGEADDRESS

Metatagi współpracują z programistami Facebooka, takimi jak przyciski wysyłania / wysyłania, podobnie jak inne informacje o otwartym grafie. Więc jeśli użyjesz jednego z rzeczywistych elementów Facebooka, takich jak komentarze i takie, wszystko to będzie powiązane z elementami Open Graph.

AKTUALIZACJA: Istnieją dwa sposoby użycia sharer *. Uwaga: wartość versus? U w ciągu zapytania
1 ==> STRING: http://www.facebook.com/sharer.php?s + treść z góry
~ ~> Wyciągnie informacje z łańcucha.
2 ==> URL: http://www.facebook.com/sharer.php?u=url gdzie url jest równy rzeczywistemu adresowi
~~> Zeskrobuje stronę podaną w wartości adresu
~ ~> Możesz przetestować wartości tutaj: https://developers.facebook.com/tools/debug

Jason Lydon
źródło
Bardzo pomocny. Dzięki! : D
Aaron Gray
Czy istnieje legalny sposób na wykorzystanie tego współdzielącego w innej witrynie w celu pobrania treści z adresu URL? Nie wiem wiele o API Facebooka i tym podobnych ...
Lyth
Spróbuj użyć opcji adresu URL. Jeśli strona ma tagi OG, FB je zeskrobuje. Przetestuj stronę, której chcesz użyć tutaj: developers.facebook.com/tools/debug
Jason Lydon
11

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

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

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

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

Losowo to działało i działało podczas pierwszego dnia, w którym go wdrożyłem, od tego czasu w ogóle nie działa.

Strona liniowa Facebooka, narzędzie, które sprawdza twoją stronę, zgłasza, że ​​wszystko jest poprawne i wyświetla wybraną przeze mnie miniaturę ... tylko że sama strona share.php nie działa. To musi być błąd na Facebooku, który najwyraźniej nie chce naprawić, ponieważ każdy raport o błędzie dotyczący tego problemu, który widziałem w ich systemie, mówi, że został rozwiązany lub naprawiony.

theo
źródło
Ja również mam ten problem. Liner nie zgłasza błędu i wyświetla mój obraz poprawnie, ale kiedy kliknę przycisk udostępniania w mojej witrynie, absolutnie nie ma obrazu w interfejsie udostępniania.
Luke Griffiths,
image_src nie działa już na Facebooku, ALE niektóre usługi nadal go używają (klienci Telegram itp.)
Andres SK
10

Aby zmienić tytuł, opis i obraz, musimy dodać kilka metatagów pod tagiem head.

KROK 1:
Dodaj metatagi 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." />

KOLEJNY KROK:
Kliknij poniższy link
https://developers.facebook.com/tools/debug

Dodaj swój adres URL w polu tekstowym (np. Http://www.test.com/ ), w którym wspomniano o tagach. Kliknij przycisk DEBUG.

Zrobione.

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

W powyższym adresie u = link do Twojej witryny

CIESZYĆ SIĘ !!!!

Gaurav123
źródło
Debuger był pomocny.
konsolebox
2

Dla bezpiecznego HTTPS 

<meta property="og:image:secure_url" content="https://image.path.png" />
Stefan Michev
źródło
1

Właśnie to działało dla mnie: umieściłem żądany obraz miniatury na stronie tuż za tagiem i uczyniłem go zbyt małym, aby 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.

RÓWNIEŻ wygląda na to, że Facebook buforuje miniatury na twojej stronie i nie zawsze sprawdza je pod kątem nowych. Spróbuj dodać to do innej strony w swojej witrynie, a zobaczysz, że to działa.

Daniel Bernal
źródło
1
po tagu - masz na myśli: „po tagu BODY”?
Alexis Wilke
Tak, wierzę, że o to im chodzi. Zrobiłem to na stronie dawno temu, ale użyłem style="display:none;"zamiast ustawiać ją na 1x1 pikseli.
Mike
1

Użyj okna dialogowego kanału Facebook zamiast okna udostępniania, 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
Kittu
źródło
0

Nie mogłem zmusić Facebooka do wybrania odpowiedniego obrazu z określonego postu, więc zrobiłem to, co opisano na tej stronie:

/webapps/18468/adding-meta-tags-to-indidual-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 będziesz kodować instrukcję if w kodzie HTML swojej witryny, aby zmienić meta treść tego, co zmieniłeś dla tego jednego postu. To niechlujne rozwiązanie, ale działa.

Michelle Glauser
źródło