Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem
WebHelp.pl Warsztat Artykuły Facebook: protokół Open Graph

Warsztat / Artykuły i tutoriale

Facebook: protokół Open Graph

Bartosz Romanowski 11 marca 2012 komentarze ()

Protokół Open Graph pozwala na integrację serwisów internetowych z Facebookiem. Umożliwia kontrolę nad prezentacją naszych treści w tym serwisie społecznościowym, a jednocześnie na lepszą ich interakcję z użytkownikami. Zobaczmy jak można wykorzystać to narzędzie na naszej stronie.

Protokół Open Graph został po raz pierwszy zaprezentowany w kwietniu 2010 roku. Jest to w praktyce zestaw specjalnych znaczników, które umieszcza się w sekcji head strony internetowej i które mają na celu dokładne opisanie tego, co się na tej stronie znajduje. Przekazywane w ten sposób informacje są później wyświetlane na tablicy użytkownika, który kliknął “Lubię to”, a także odpowiednio umieszczane w jego profilu - ogólnie rzecz biorąc opisują sposób, w jaki dana strona będzie widoczna w Facebooku. Protokół powstał do opisywania stron reprezentujących rzeczywiste byty, takie jak filmy, miejsca, osoby, gry czy zespoły muzyczne, ale można za jego pomocą opisywać również artykuły czy wpisy na blogu.

Więcej informacji na ten temat można znaleźć w dokumentacji Facebooka. Warto też zerknąć na oficjalną stronę protokołu Open Graph, gdzie zapoznać się można z wszystkimi jego możliwościami.

Znaczniki Open Graph opisujące zawartość strony mogą wyglądać na przykład tak:

Kod: Zaznacz cały
<meta property="og:site_name" content="WebHelp" />
<meta property="og:title" content="wp-cli - administracja WordPressem z linii komend" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://webhelp.pl/blog/wpcli-administracja-wordpressem-z-linii-komend/" />
<meta property="og:image" content="http://webhelp.pl/pictures/blog/wordpress-logo_654.png" />
Pisząc o “stronie” mam na myśli podstronę naszego serwisu, a nie serwis internetowy jako całość czy stronę w serwisie Facebook.

Tak opisana strona po “polubieniu” lub opublikowaniu w statusie zaprezentuje się następująco:

Facebook Open Graph

Nieco głębiej mogą integrować się z Facebookiem strony, które poświęcone są konkretnym osobom, miejscom lub przedmiotom, na przykład aktorowi, filmowi, zespołowi muzycznemu, restauracji czy hotelowi. Gdy użytkownik “polubi” taką stronę, zostanie ona automatycznie dodana do sekcji “Ulubione” jego profilu.

Zobaczmy jak wyglądają znaczniki OG w poświęconym filmom serwisie Filmweb. Poniższe znaczniki posłużyły do opisu filmu “Zaplątani”:

Kod: Zaznacz cały
<meta property="og:title" content="Zaplątani / Tangled" />
<meta property="og:type" content="movie" />
<meta property="og:url" content="http://www.filmweb.pl/film/Zapl%C4%85tani-2010-122832" />
<meta property="og:site_name" content=""Filmweb" />
<meta property="og:image" content="http://1.fwcdn.pl/po/28/32/122832/7343444.1.jpg" />

Jeśli ktoś “polubi” stronę “Zaplątanych” w serwisie Filmweb, film ten automatycznie zostanie umieszczony w sekcji “Ulubione -> Filmy” w profilu na Facebooku.

Facebook Open Graph

Jeśli natomiast ktoś udostępni link do tej strony na swojej tablicy, będzie to wyglądało tak:

Facebook Open Graph

Jak widać warto zadbać o to, aby nasza strona (do jakiejkolwiek kategorii tematycznej by nie należała) posiadała poprawne znaczniki OG. W przeciwnym przypadku po “polubieniu” lub umieszczeniu jej adresu w statusie Facebook pobierze sobie wszystkie potrzebne dane sam - tytuł ze znacznika title, opis z pierwszego napotkanego fragmentu tekstu, a obrazek wybierze niemalże losowo (i na pewno mało trafnie) z wszystkich dostępnych na stronie.

Zobacz również jak zintegrować swój serwis z Twitterem za pomocą Twitter Cards

Wymagane znaczniki Open Graph

Facebook wymaga aby strona posiadała w sekcji head cztery znaczniki OG:

  • og:title - tytuł strony
  • og:type - typ treści (dostępne typy zostały wymienione w dalszej części tekstu)
  • og:url - adres strony
  • og:image - obrazek, który będzie użyty jako miniaturka; musi mieć rozmiary co najmniej 50 x 50 pikseli, proporcje maksymalnie 3:1 i być zapisany w formacie JPG, PNG lub GIF; można umieścić kilka znaczników og:image, ale jako główny będzie traktowany pierwszy z nich

Opcjonalnie możemy umieścić kilka dodatkowych znaczników:

  • og:site_name - nazwa serwisu; będzie wyświetlona pod tytułem strony jako link prowadzący do strony głównej naszego serwisu
  • og:description - krótki opis treści
  • fb:app_id - identyfikator aplikacji w serwisie Facebook (jeśli takową posiadamy - na przykład do automatycznej publikacji wpisów na stronie)
  • fb:admins - administratorzy strony (identyfikatory liczbowe oddzielone przecinkami)

Warto wiedzieć, że znaczniki og:title i og:type można zmieniać tylko do pewnego momentu. Gdy nasza strona zostanie “polubiona” 50 razy nie będziemy mogli zmienić tytułu strony, a po osiągnięciu 10 tysięcy “lajków” nie będziemy mogli zmienić jej typu. Oznacza to, że niezależnie od zawartości tych znaczników Facebook będzie “pamiętał” ich poprzednie wartości.

Typy treści

Każda strona powinna posiadać znacznik określający typ treści. Znacznik taki może wyglądać na przykład tak:

Kod: Zaznacz cały
<meta property="og:type" content="movie" />

Dostępne znaczniki Open Graph określające typ treści są pogrupowane w kategorie. Do wyboru mamy:

Aktywności:

  • activity - aktywność (np. bieganie, pływanie)
  • sport - sport, dyscyplina sportowa (np. skoki narciarskie, piłka nożna)

Biznes:

  • bar - bar, pub
  • company - firma
  • cafe - kawiarnia
  • hotel - hotel
  • restaurant - restauracja

Grupy:

  • sports_league - liga sportowa
  • sports_team - drużyna sportowa

Organizacje:

  • band - zespół muzyczny
  • government - organizacja rządowa
  • non_profit - organizacja non-profit (np. fundacja, stowarzyszenie)
  • school - szkoła
  • university - uniwersytet, uczelnia wyższa

Ludzie:

  • actor - aktor
  • athlete - sportowiec
  • author - autor (np. książki, tekstu)
  • director - reżyser
  • musician - muzyk
  • politician - polityk
  • public_figure - osoba publiczna (np. celebryta)

Miejsca:

  • city - miejscowość
  • country - kraj
  • landmark - punkt w terenie (np. jakiś charakterystyczny obiekt, punkt widokowy)
  • state_privince - region kraju (np. stan, województwo)

Produkty i rozrywka:

  • album - album muzyczny
  • book - książka
  • drink - napój
  • food - jedzenie
  • game - gra (planszowa, komputerowa, konsolowa)
  • product - produkt
  • song - piosenka
  • movie - film
  • tv_show - program telewizyjny (również serial)

Jeśli produkt posiada kod UPC lub numer ISBN, można skorzystać ze znaczników og:upc lub og:isbn aby umożliwić jego jednoznaczną identyfikację.

Strony internetowe:

  • blog - blog
  • website - strona internetowa
  • article - artykuł na stronie internetowej (dotyczy praktycznie każdej treści)

Dołączanie muzyki i filmów

Niezależnie od wybranego typu treści do naszej strony możemy dołączyć załącznik audio lub wideo. Jeśli to zrobimy, miniaturka zostanie odpowiednio oznaczona, a po jej kliknięciu wyświetlony zostanie odtwarzacz umożliwiający przesłuchanie utworu lub obejrzenie filmu (bez konieczności odwiedzania naszej strony). Aby zobaczyć jak to działa wystarczy opublikować wpis na Facebooku zawierający link do na przykład YouTube czy Vimeo.

Aby wskazać Facebookowi plik audio wystarczy dodać znacznik og:audio:

Kod: Zaznacz cały
<meta property="og:audio" content="http://twoja-domena.pl/piosenka.mp3" />

Opcjonalnie możemy dodać znaczniki opisujące załączony utwór:

Kod: Zaznacz cały
    <meta property="og:audio:title" content="Tytuł piosenki" />
    <meta property="og:audio:artist" content="Nazwa wykonawcy lub zespołu" />
    <meta property="og:audio:album" content="Tytuł płyty" />
    <meta property="og:audio:type" content="application/mp3" />

W przypadku dołączania materiału wideo poza adresem URL pliku z filmem (to jedyny wymagany znacznik) możemy również zdefiniować rozmiar filmu. Jeśli dodajemy film w formacie SWF (Flash) dobrze jest również zadbać o użytkowników urządzeń, które Flasha nie wspierają (na przykład iPada czy iPhone) i dołączyć film w formacie MP4. Komplet znaczników może wyglądać na przykład tak:

Kod: Zaznacz cały
    <meta property="og:video" content="http://nasza-domena.pl/film.swf" />
    <meta property="og:video:height" content="640" />
    <meta property="og:video:width" content="360" />
    <meta property="og:video:type" content="application/x-shockwave-flash" />
    <meta property="og:video" content="http://nasza-domena.pl/film.mp4" />
    <meta property="og:video:type" content="video/mp4" />

Dodatkowe atrybuty

Dla niektórych typów treści dostępne są dodatkowe (opcjonalne) znaczniki, pozwalające na bardziej szczegółowy opis zawartości naszej strony. Na przykład typ article pozwala na określenie daty publikacji (article:published_time), daty ostatniej modyfikacji (article:modified_time), daty wygaśnięcia (article:expiration_time - przydatna przy treściach, które w pewnym momencie stają się nieaktualne), autora (article:author), kategorii tematycznej (article:section) czy tagów (article:tag). Do strony dotyczącej jakiegoś miejsca możemy z kolei dodać informacje o jego lokalizacji, adresie czy dane kontaktowe (telefon, e-mail). Więcej informacji na temat dodatkowych znaczników można znaleźć w oficjalnej dokumentacji.

Powiązanie treści z autorem

Niektóre typy treści (na przykład article czy book) pozwalają na zdefiniowanie powiązania z autorem. Aby stworzyć takie powiązanie musimy przede wszystkim mieć stronę z profilem autora - może być nią strona z listą jego artykułów. Na takiej stronie dodajemy znaczniki profile (możemy w razie potrzeby pominąć dowolne z nich):

Kod: Zaznacz cały
<meta property="profile:first_name" content="Bartosz" />
<meta property="profile:last_name" content="Romanowski" />
<meta property="profile:username" content="toszcze" />
<meta property="profile:gender" content="male" />

Następnie na stronie z artykułem dodajemy znacznik article:author (zakładając, że strona dotyczy artykułu), w którym przekazujemy adres URL strony autora:

Kod: Zaznacz cały
<meta property="article:author" content="http://nasza-domena.pl/autor/bartosz-romanowski/" />

Podsumowanie

Jak widać protokół Open Graph daje nam spore możliwości jeśli chodzi o kontrolę sposobu prezentacji naszych treści w Facebooku. Mając na uwadze nieustannie rosnącą popularność tego serwisu w Polsce, warto poświęcić trochę czasu na dopracowanie znaczników OG - na pewno zwróci się nam to w postaci nowych użytkowników.

Masz pytania lub wątpliwości? Odwiedź nasze forum dyskusyjne.

Bartosz Romanowski

Programista, gadżeciarz, krytyczny miłośnik produktów Apple, fan ciężkich brzmień i niepoprawny pesymista.


Komentarze


HTML CSS JavaScript PHP bazy danych MySQL Flash grafika framework hosting domeny pozycjonowanie wordpress Facebook