Dziś zwróciła się do mnie z prośbą koleżanka, która zespole odpowiada za obsługę profili w mediach społecznościowych klientów (Facebook, Twitter, Google+, itp.) oraz “teksty marketingowe” (nie udało mi się jeszcze jej “zmotywować” na tyle, by zechciała coś napisać na Webinsider.pl, ale prace nad tym trwają ;-)). Problem niby banalny – brak możliwości podmiany grafiki zaczytanej przez Facebooka z linkowanej strony.
Spis treści w artykule
Facebook i grafika z linkowanej strony
Problem nie jest całkowicie nowy, bo z mniejszą czy większą częstotliwością powtarza się przy tej czy innej okazji – czasem dotyczy grafiki, innym razem tytułu strony czy pobranej treści… Zresztą problemy tego typu są dość powszechne, stąd na różnych grupach związanych z “marketingiem społecznościowym” (nie lubię takiego sztucznego dzielenia, bo marketing to marketing, reszta to np. tylko kanał komunikacji) co chwilę można trafić na pytania typu:
Nie ma tu znaczenia, czy winny jest jakiś mechanizm keszujący po stronie Facebooka, czy zmiany/modyfikacje w silnikach odpowiedzialnych za pobieranie i przetwarzanie danych. Ważne, że problem istnieje.
Wspomniana wcześniej koleżanka tak do mnie dziś napisała:
W momencie dodawania postu z linkiem na Facebooku zwykle było tak, że można było z łatwością podmienić grafikę, która była na stronie na wybraną przez siebie. Dziś pojawił się zonk – Facebook zaczął umożliwiać edycję dodanego foto, ale nie umożliwiał zmiany grafiki, która będzie widoczna docelowo w poście.
W tym konkretnym przypadku Facebook pobrał grafikę z linkowanej strony, i za nic nie można było jej podmienić na inną – co niby wydaje się standardem. Jednak nie tym razem. Jeśli to element walki z tzw. “fake news” to być może najciekawsze zmiany dopiero przed nami. Pomijając już nawet to, że jedynym sposobem na wyeliminowanie tego typu “wiadomości” wydaje się być… likwidacja samego Facebooka… ;-)
Tymczasowy link
Do problemu można podejść zapewne na co najmniej kilka sposobów, ale dalej koleżanka pisze, że wprawdzie nie może wybrać innej grafiki niż pobrana automatycznie, to może zmienić adres na który będzie ona kierować:
Zauważyłam za to, że jest aktywna opcja edycji linku docelowego, która wcześniej była dostępna tylko w karuzeli…
Stąd tym razem zdecydowałem się na przygotowanie alternatywnej strony, na której znajdą się tylko te informacje, które chcemy by Facebook pobrał:
- Grafika promująca (baner)
- Tytuł strony
- Krótki opis strony
Strona została umieszczona pod tymczasowym adresem, tak by Facebook mógł ją przetworzyć – potem nie będzie już potrzebna:
<!DOCTYPE html>
<html lang="pl">
<html>
<head>
<meta charset="utf-8">
<title>Tytuł naszej "wirtualnej" strony</title>
<meta name="description" content="Jakiś opis strony...">
</head>
<body>
<div class="div-img">
<img src="jakas-grafika.jpg" class="" alt="">
</div>
<div class="div-txt">
<p>Tekst na stronie</p>
</div>
</body>
</html>Następnym krokiem było dodanie wpisu na Facebooku jeszcze raz, z tym, że tym razem został wykorzystany adres naszej strony tymczasowej, by Facebook zaciągnął dane takie jak chcemy. Na koniec jeszcze tylko zmiana adresu docelowego i zadanie wykonane, koleżanka szczęśliwa:
Po tym, jak to zrobiłeś, dodałam Twój link i podmieniłam go – udało się to zrobić przez Mozillę (…) no i po edycji linku post wygląda tak, jak chciałam…
Facebook Open Graph
Taką stronę można też uzupełnić o tagi Open Graph, które dodatkowo poinformują mechanizmy Facebooka o tym co i gdzie ma wyświetlić (choć z doświadczenia wiem, że przy tak prostej stronie nie ma takiej potrzeby).
W tym celu w nagłówku strony (sekcja “head”) dodajemy:
<head>
[...]
<meta property="og:title" content="Tytuł (pod)strony"/>
<meta property="og:url" content="Adres strony"/>
<meta property="og:site_name" content="Tytuł strony"/>
<meta property="og:image" content="grafika-promująca.jpg" />
<meta property="og:description" content="Opis strony..."/>
[...]
</head>Przekierowanie stałe
Może się jednak zdarzyć, że w danym momencie i/lub na danym koncie i/lub w danej przeglądarce (tak, czasem nawet to ma znaczenie) nie będzie możliwości zmiany wklejanego to posta adresu strony. W takim – zwłaszcza, jeśli nie mamy możliwości zmiany URLa bezpośrednio na stronie docelowej – możemy skorzystać ze strony pośredniczącej.
W zasadzie może ona wyglądać tak jak powyżej, z tym, że po tym jak już Facebook zaczyta dane ze strony tymczasowej dodajemy w nagłówku linijkę, która przekieruje odwiedzających na prawidłowy adres docelowy:
<head>
[...]
<meta http-equiv="Refresh" content="0; url=https://link-docelowy" />
[...]
</head>Oczywiście adres (domena) strony tymczasowej w takim przypadku będzie widoczna, stąd warto skorzystać z jakiejś subdomeny dla linków tymczasowych/przekierowujących, np. strony Webinsider.pl może to być:
facebook.webinsider.plW takim przypadku wygląda to bardziej profesjonalnie niż jakiś przypadkowy lub niezwiązany ze stroną docelowa adres.
Facebook Debugger
Na koniec warto chyba wspomnieć o dwóch narzędziach (stronach), które mogą się przydać nie tylko przy rozwiązywaniu problemów, ale ogólnie by zobaczyć jak Facebook widzi Waszą stronę.
Open Graph Object Debugger
Za pomocą “Open Graph Object Debugger” możecie sprawdzić jak Facebook widzi Waszą stronę (lub wybrany adres) w kontekście danych “Open Graph” i umieszczania linków w postach:
Natomiast za pomocą “Sharing Debugger” możecie sprawdzić jak Facebook widzi Waszą stronę (lub wybrany adres) w kontekście danych “Open Graph” i udostępniania Waszej strony przez użytkowników Facebooka:
| Lub postaw nam kawę :-)
Pasjonat nowych technologii - od sprzętu po oprogramowanie, od serwerów po smartfony i rozwiązania IoT. Potencjalnie kiepski bloger, bo nie robi zdjęć "talerza" zanim zacznie jeść.
Dumny przyjaciel swoich psów :-)
- Mały dron, duże zamieszanie, czyli seria DJI Mini i zabawa w klasy (unijne klasy dla dronów) z EASA i użytkownikami - 1970-01-01
- Opcja “restore_from_flash”, czyli sposób na zapamiętywanie ustawień w ESPHome na układach ESP8266 - 1970-01-01
- Blokowe szablony powiadomień (block notice) w WooCommerce, nawet w klasycznych motywach - 1970-01-01
