protokol Open Graph - FaceBook.pdf

(223 KB) Pobierz
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:
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.
Jeśli natomiast ktoś udostępni link do tej strony na swojej tablicy, będzie to wyglądało tak:
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
actor
- aktor
athlete
- sportowiec
author
- autor (np. książki, tekstu)
director
- reżyser
musician
- muzyk
politician
- polityk
public_figure
- osoba publiczna (np. celebryta)
city
- miejscowość
country
- kraj
landmark
- punkt w terenie (np. jakiś charakterystyczny obiekt, punkt widokowy)
state_privince
- region kraju (np. stan, województwo)
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)
Ludzie:
Miejsca:
Produkty i rozrywka:
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
<meta
<meta
<meta
flash" />
<meta
<meta
property="og:video" content="http://nasza-domena.pl/film.swf" />
property="og:video:height" content="640" />
property="og:video:width" content="360" />
property="og:video:type" content="application/x-shockwave-
property="og:video" content="http://nasza-domena.pl/film.mp4" />
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
<meta
<meta
<meta
property="profile:first_name" content="Bartosz" />
property="profile:last_name" content="Romanowski" />
property="profile:username" content="toszcze" />
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.

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika:

Zgłoś jeśli naruszono regulamin