Jak zintegrować Facebook Open Graph z WordPress

Protokół Facebook Open Graph umożliwia udostępnianie treści swojego bloga nie tylko swoim czytelnikom, ale także ich znajomym na Facebooku. Najlepsze jest to, gdy ktoś lubiłem Twoje treści zostaną opublikowane na ich profilu na Facebooku. Ale to nie wszystko, Open Graph pozwala odkrywać ciekawsze sposoby interakcji z czytelnikami. Ostatecznie - jeśli zostanie to zrobione prawidłowo - buduje markę i zwiększa ruch w witrynie.

W dzisiejszym poście zajmiemy się jak zintegrować Facebook Open Graph z własnym hostem WordPress w szczegółowym przewodniku krok po kroku. Będzie to wymagało edycji istniejących motywów WordPress i utworzenia aplikacji Facebook (jeśli nie masz takiej).

Gotowy? Uruchommy przeglądarkę i ulubiony edytor kodu. Pełny przewodnik po skoku.

Krok 1. Utwórz aplikację na Facebooku

Potrzebujemy ID aplikacji aby to uzyskać, musisz utworzyć aplikację na Facebooku. Jeśli masz już jeden, przejdź do kroku 2.

Tworzenie aplikacji jest łatwe, oto co robisz:

1. Zaloguj się do Facebooka, przejdź do strony dla programistów.
2. Kliknij "Skonfiguruj nową aplikację„przycisk w prawym górnym rogu.
3. Podaj imię do nowej aplikacji, Zgodzić się na warunki Facebooka, hit Utwórz aplikację.
4. Iść do Stronie internetowej tab, wypełnij Strona URL i Domena witryny.
5. Zanotuj wartość ID aplikacji gdzieś i uderz w „Zapisz zmianyprzycisk.

To wszystko! Zawsze możesz wrócić później, aby uzupełnić resztę informacji.

Krok 2. Wymień Etykietka

Otwórz plik nagłówkowy motywu (header.php) w twoim ulubionym edytorze. Zawsze przechowuj kopię zapasową na wszelki wypadek.

Poszukaj następującego wiersza kodu lub takiego, który zaczyna się od >

Zastąp go:

Zachowaj plik header.php otwarty, będziemy go potrzebować do trzeciego kroku.

Krok 3. Wstaw OG tagi

Wklej następujący kod bezpośrednio po tag lub wcześniej etykietka.

      „/>        

Oto niektóre z wartości, które musisz zmienić:

• Linia 3: Wymień your_fb_app_id z ID aplikacji z kroku 1.
• Linia 4: Możesz dostać your_fb_admin_id na stronie Facebook Insights (Więcej informacji). Kliknij na "Wgląd w Twoją stronę„zielony przycisk, chwyć cały ciąg kodu i zastąp wiersz 4.
• Linia 12: Ta linia określa obraz reprezentujący Twój post. Jeśli twój motyw obsługuje miniatury Post WordPress, powinien działać poprawnie. Ale jeśli nie, zawiedzie z wdziękiem bez obrazu. Sprawdź krok 3a, aby uzyskać alternatywne obejście.
• Linia 19: Wymień logo.jpg z adresem URL do logo Twojego bloga. Zostanie wyświetlona, ​​gdy na Twoim blogu udostępniona zostanie strona niebędąca postem na Facebooku.

Krok 3a - Gdy „wp_get_attachment_thumb_url” nie powiedzie się

Gdy wp_get_attachment_thumb_url () nie powiodło się, prawdopodobnie przejdziesz do atrybutu treści bez wartości, jak pokazano poniżej:

Prostym obejściem będzie zastąpienie wiersza 12 następującym kodem:

function catch_that_image () global $ post, $ posts; $ first_img = "; ob_start (); ob_end_clean (); $ output = preg_match_all ('// i ', $ post-> post_content, $ matches); $ first_img = $ pasuje [1] [0]; if (empty ($ first_img)) // Definiuje domyślny obraz $ first_img = "/images/default.jpg";  return $ first_img; 

Ten kod zastępujący próbuje użyć wywołania funkcji catch_that_image () pobrać i wyświetlić adres URL pierwszego obrazu, z którym ma się spotkać. Zamień wiersz 10 na URL na obraz domyślny, jeśli funkcja nie znajdzie pierwszego obrazu.

Krok 4. Włóż Facebook JavaScript SDK

Poniższy Javascript daje dostęp do wszystkich funkcji Graph API i Dialogs. Umożliwia także łatwą integrację wtyczek społecznościowych Facebooka, takich jak przycisk Like, Facepile, zalecenia itp.

Umieść go header.php, zaraz po

Zastąpić your_fb_app_id w linii 4 za pomocą ID aplikacji z kroku 1 wcześniej.

Krok 5. Przetestujmy to!

Skończyliśmy integrację Facebook Open Graph z blogiem WordPress. Dajmy mu kilka testów, aby upewnić się, że zrobiliśmy wszystko poprawnie.

Test nr 1 - wyświetl kod źródłowy

Spójrz na kody źródłowe jednego z postów na blogu, powinieneś mieć coś takiego:

Sprawdź właściwości i ich wartości, upewnij się, że są poprawne.

Test # 2 - Zainstaluj podobne pudełko

Jeśli nie zainstalowałeś przycisku Facebook Like Button, to prawdopodobnie czas go zdobyć. Umieść poniższy kod w dowolnym miejscu (najlepiej przed treścią lub po treści) single.php:

Następnie zaproś przyjaciela Lubić to. Powinieneś zobaczyć coś podobnego na swoim profilu na Facebooku:

Extra: WordPress Plugin

Jeśli w jakiś sposób nie udało ci się zainstalować kodów lub potrzebujesz tego zrobić szybko i łatwo - jest do tego plugin WordPress.

Facebook Open Graph Meta w WordPress jest wtyczką WordPress, która dodaje metadane Facebooka, aby uniknąć problemów z miniaturami, błędnego wydania tytułu, błędnego opisu itp..