Envato Elements - pobierasz co chcesz, ile chcesz

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.

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

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

Sharing Debugger

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:

(!) Zgłoś błąd na stronie
Potrzebujesz profesjonalnej pomocy? Skontaktuj się z nami!
Spodobał Ci się artykuł? Zapisz się do naszego Newslettera - ZERO SPAMu, same konkrety, oraz dostęp do dodatkowych materiałów przeznaczonych dla subskrybentów!
Na podany adres e-mail otrzymasz od nas wiadomość e-mail, w której znajdziesz link do potwierdzenia subskrypcji naszego Newslettera. Dzięki temu mamy pewność, że nikt nie dodał Twojego adresu przez przypadek. Jeśli wiadomość nie przyjdzie w ciągu najbliższej godziny (zazwyczaj jest to maksymalnie kilka minut) sprawdź folder SPAM.
Młody Szymon dzięki motywowi Divi od Elegant Themes zrobił stronę dla firmy ojca
WebInsider poleca księgowość wFirma
WebInsider korzysta z VPSa w HitMe.pl
WebInsider poleca VPSy DigitalOcean
WebInsider poleca serwis Vindicat
Napisz komentarz
wipl_napisz-komentarz_01Jeśli informacje zawarte na tej stronie okazały się pomocne, możesz nam podziękować zostawiając poniżej swój komentarz.

W tej formie możesz również zadać dodatkowe pytania dotyczące wpisu, na które – w miarę możliwości – spróbujemy Ci odpowiedzieć.
Linki partnerskie
Niektóre z linków na tej stronie to tzw. „linki partnerskie”, co oznacza, że jeśli klikniesz na link i dokonasz wymaganej akcji (np. zakup/rejestracja) możemy otrzymać za to prowizję. Pamiętaj, że polecamy tylko te produkty i usługi, z których sami korzystamy, i uważamy, że są tego na prawdę warte… :-)
Znaki towarowe i nazwy marek
W niektórych wpisach (oraz innych miejscach na stronie) mogą być przedstawione/użyte znaki towarowe i/lub nazwy marek, które stanowią własność intelektualną tych podmiotów, a zostały użyte wyłącznie w celach informacyjnych.
Spodobał Ci się artykuł? Zapisz się do naszego Newslettera!