Jak pokazać konkretny obrazek jako miniaturę podczas wdrażania udostępniania na Facebooku?

Próbuję wdrożyć udostępnianie tej metody. Używam kodu w następujący sposób

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

Teraz, gdy Facebook pokazuje to, pokazuje kilka miniatur po lewej stronie. Te obrazy są pobierane z mojej witryny internetowej. Jak mogę wybrać konkretny obraz jako miniaturę lub przynajmniej zatrzymać wyświetlanie miniatury?

Możesz to sprawdzić na moim blogu .

Wydaje się, że ten post na blogu zawiera Twoją odpowiedź: http://blog.capstrat.com/articles/facebook-share-thumbnail-image/

W szczególności użyj tagu podobnego do następującego:

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

Nazwa obrazu musi być taka sama jak w przykładzie.

Kliknij „Upewniam się, że podgląd działa”

Uwaga: tagi mogą być poprawne, ale Facebook zeskrobuje tylko co 24 godziny, zgodnie z ich dokumentacją. Użyj strony Facebook Lint, aby przenieść obraz do Facebooka.

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

Ze specyfikacji Facebooka użyj następującego kodu:

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

Źródło: Facebook Share

Moje tagi były poprawne, ale Facebook zeskrobuje tylko co 24 godziny, zgodnie z ich dokumentacją. Korzystając ze strony Facebook Lint, obraz został przesłany do Facebooka.

Wpisz tutaj swój adres URL, a FB zaktualizuje metadane z Twojej strony:

https://developers.facebook.com/tools/debug (zaktualizowany link)

Facebook używa og:tagsi protokołu Open Graph do odszyfrowywania informacji do wyświetlenia podczas podglądu adresu URL w oknie udostępniania lub w kanale wiadomości na Facebooku.

og:tagsZawierać takie informacje jak:

• Tytuł strony
• Rodzaj strony
• URL
• Nazwa strony internetowej
• Opis strony
• Facebook user_id's administratorów strony (na Facebooku)

Oto przykład (zaczerpnięty z dokumentacji na Facebooku ) niektórychog: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"/>

Po zaimplementowaniu poprawnych znaczników og:tagsi ustawieniu ich wartości możesz przetestować, jak Facebook będzie wyświetlać Twój adres URL, używając debugera Facebooka . Narzędzie debugera podświetli również wszelkie znalezione problemy ze og:tagsstroną lub jej brak.

Jedną z rzeczy, o których należy pamiętać, jest to, że Facebook wykonuje pewne buforowanie w odniesieniu do tych informacji, więc aby zmiany odniosły skutek, Twoja strona nie zostanie usunięta, jak określono w dokumentacji:

Edycja metatagów

Możesz zaktualizować atrybuty swojej strony, aktualizując jej tagi. Zauważ, że og: title i og: type są edytowalne tylko na początku - po tym, jak twoja strona otrzyma 50 polubień, tytuł zostanie naprawiony, a po otrzymaniu 10000 polubień, typ zostanie naprawiony. Te właściwości są naprawione, aby uniknąć zaskakujących użytkowników, którzy już polubili tę stronę. Zmiana tytułu lub znaczników typu po osiągnięciu tych limitów nic nie robi, strona zachowuje oryginalny tytuł i typ.

Aby zmiany zostały odzwierciedlone na Facebooku, musisz wymusić skrobanie swojej strony. Strona jest pobierana, gdy administrator strony kliknie przycisk Lubię to lub gdy adres URL zostanie wprowadzony do Facebook URL Linter Facebook Debugger ...

Widzę, że wszystkie podane odpowiedzi są prawidłowe. Jednak jeden ważny szczegół został przeoczony: rozmiar obrazu MUSI wynosić co najmniej 200 x 200 pikseli, w przeciwnym razie Facebook zastąpi miniaturę pierwszym dostępnym obrazem, który spełnia kryteria na stronie. Innym faktem jest to, że wymagane minimum to uwzględnienie 3 metas, których Facebook wymaga, aby og: image odniosło skutek:

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

Debuguj swoją stronę za pomocą debugera Facebooka i napraw wszystkie ostrzeżenia, a powinno działać jak urok! https://developers.facebook.com/tools/debug

Miałem te same problemy i wierzę, że je rozwiązałem. Użyłem metatagu linku, jak wspomniano tutaj, aby wskazać obraz, który chciałem, ale kluczem jest to, że jeśli to zrobisz, FB nie pobierze żadnych innych obrazów jako wyborów. Jeśli twój obraz jest zbyt duży, nie będziesz miał żadnego wyboru.

Oto jak naprawiłem moją witrynę http://gnorml.com/blog/facebook-link-thumbnails/

Oto jak to wszystko działa:

1. Potrzebujesz możliwości dostępu do kodu HTML na określonej udostępnianej stronie internetowej. Prawdopodobnie będzie działać również w całej witrynie, jeśli użyjesz wspólnego pliku nagłówkowego. Nie próbowałem tego, ale powinno działać. Jeśli to zrobisz, uzyskasz ten sam obraz dla wszystkich stron.

2. Musisz dodać te metatagi HTML do strony w pliku. Nie będzie działać, jeśli umieścisz go w. Upewnij się, że dostosowałeś się do a) obrazu, b) opisu, c) adresu URL id) tytułu.

Prawdziwy przykład.

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

3. Zapisać
4. Otwórz nowy post na Facebooku i ponów próbę udostępnienia strony.
5. Jeśli masz problem… możesz go zdebugować za pomocą tego narzędzia Facebooka. Wygląda bardziej geekowo niż w rzeczywistości. Informuje, co widzi Facebook, gdy piszesz w adresie URL do udostępnienia.

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

Ważna wskazówka… upewnij się, że „cudzysłowy” są takie same w Twoim HTML (powinny wyglądać jak 2 proste znaki i bez krzywych… czasami programy zmieniają je na inne czcionki, co powoduje błędy w kodzie).

Udostępnianie na Facebooku: jak poprawić swoje wyniki, dostosowując obraz, tytuł i tekst

Z linku powyżej. Aby zapewnić jak najlepsze udostępnianie, zasugeruj 3 fragmenty danych w swoim HTML:

• Tytuł
• Krótki opis
• Wizerunek

Osiągnięto to w następujący sposób, umieszczonym wewnątrz tagu „head” kodu HTML:

• Tytuł: <title>INSERT POST TITLE</title>
• Wizerunek: <meta property=og:image content="http://site.com/YOUR_IMAGE.jpg"/>
• Opis: <meta name=description content="INSERT YOUR SUMMARY TEXT"/>

Jeśli Twoja witryna jest statycznym kodem HTML, musisz to zrobić dla każdej strony za pomocą edytora HTML.

Jeśli korzystasz z CMS, takiego jak Drupal, możesz zautomatyzować wiele z nich (patrz powyższy link). Jeśli używasz wordpressa, prawdopodobnie możesz zaimplementować coś podobnego, używając przykładu z Drupala jako wytycznej. Mam nadzieję, że te informacje okazały się przydatne.

Wreszcie, zawsze możesz ręcznie edytować swoje posty udostępniania. Zobacz ten przykład z ilustracjami .

Miałem też problem z witryną, nad którą pracowałem w zeszłym tygodniu. Zaimplementowałem like box i przetestowałem like box. Następnie poszedłem dalej, aby dodać obraz do mojego nagłówka (meta ob: image). Nadal poprawny obraz nie pojawił się w moim powiadomieniu na Facebooku.

Próbowałem wszystkiego i doszedłem do wniosku, że każda implementacja podobnego przycisku jest buforowana. Więc powiedzmy, że wpisujesz zegar na przycisk Lubię to na adresie URL A, następnie określasz obraz w nagłówku i testujesz go, klikając ponownie przycisk Łukasza na adresie URL A. Nie zobaczysz obrazu, ponieważ strona jest buforowana. Obraz pojawi się po kliknięciu przycisku Lubię to na stronie B.

Aby zresetować pamięć podręczną, musisz użyć narzędzia do debugowania lint, które zostało wspomniane powyżej, i zweryfikować wszystkie adresy URL dla tych, które są w pamięci podręcznej ... To jedyna rzecz, która działała dla mnie.

Najłatwiejszym sposobem, jaki znalazłem, aby ustawić Facebook Open Graph dla każdego artykułu Joomla, było umieszczenie w com_content / article / default.php override, następny kod:

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

Spowoduje to umieszczenie tagów meta og w głowie ze szczegółami z bieżącego artykułu.