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

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

Miałem ten problem i naprawiłem go za pomocą sugestii manuela-84. Używanie obrazu o wymiarach 400 x 400 pikseli działało świetnie, a mój mniejszy obraz nigdy nie pojawił się w udostępniającym.

Pamiętaj, że Facebook zaleca kwadratowy obraz o wielkości co najmniej 200 pikseli jako tag og: image: https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/#tags

— William
ź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