Facebook Open Graph

- autor: tsissput

Podczas tegorocznej konferencji f8 2011 Facebook zaprezentował rozszerzoną wersję Open Graph (Open Graph Beta). Dla tych, którzy jeszcze nie wiedzą co kryje się za tym terminem, napiszę najpierw pokrótce o jego historii.

Wprowadzony w 2010 roku protokół Open Graph pozwolił połączyć strony internetowe tak, aby stworzyły graf społeczny. Został zaprojektowany dla stron www związanych z otaczającym nas światem, a więc z bytami takimi jak drużyny sportowe, filmy, znani ludzie, czy restauracje. Zamieszczenie znaczników Open Graph na stronie internetowej pozwala połączyć ją profilem na Facebook. Oznacza to, że gdy użytkownik klika przycisk lubię to na jakiejś stronie, następuje pewnego rodzaju połączenie użytkownika z tą stroną. Dokładniej mówiąc strona ta pojawi się w sekcji zainteresowania na jego profilu oraz będzie ona miała możliwość publikowania wpisów na tablicy użytkownika. Co więcej, możliwe stanie się jej wyszukiwanie na Facebook i serwowanie użytkownikom spersonalizowanych reklam. Należy tutaj dodać, że właściciel strony nie pośredniczy w żaden sposób w wymianie informacji pomiędzy użytkownikiem, wtyczką i Facebookiem. Ponadto nie ma potrzeby dodatkowego logowania na danej stronie, jeśli już to zrobiliśmy na Facebooku.

Tegoroczne rozszerzenie Open Graph umożliwia dodanie pewnych akcji i obiektów stworzonych przez aplikacje zewnętrznych firm i umożliwienie im głębokiej integracji z Facebookiem.

Inną z tegorocznych nowości powiązaną Open Graph, ale jeszcze nie dostępną dla zwykłych użytkowników, jest timeline. Twórcy facebooka doszli do wniosku, że większość ważnych informacji pojawiających w profilach użytkowników po prostu znika. Jest to spowodowane tym, że mało kto klika w starsze posty, poza tym wszystko co pojawia się na tablicy jest w równy sposób widoczne, co powoduje że w tym gęstym strumieniu informacji szybko znikają ważne życiowe wydarzenia takie jak ukończenie studiów, narodziny dziecka itd. Aby temu zapobiec postanowiono wprowadzić profil w postaci linii czasu (Timeline). Cała idea polega na tym, że przeglądający go użytkownik widzi najpierw duże zdjęcie – coś jakby okładkę albumu, a dalej przewijając stronę ma przed sobą kolejne posty przeglądanego profilu użytkownika uporządkowane chronologicznie. Najważniejsze jednak jest to, że są to wydarzenia które sami wybierzemy, a więc te które są dla nas najważniejsze. Co więcej Facebook wprowadzi również nowy rodzaj aplikacji społecznościowych, które zaprezentują jaką muzykę słuchaliśmy, jaki film oceniliśmy albo pokażą trasę z naszej wycieczki rowerowej.

Oczywiście wszystkie specyficzne akcje danej aplikacji dodawanej do Timeline (i/lub ticker, wall), są integrowane z Facebook przy pomocy opisanego wcześniej Open Graph.

W jaki sposób to jest możliwe?

Open Graph pozwala aplikacjom modelować aktywność użytkownika w oparciu o akcje i obiekty. Działająca aplikacja może zdefiniować możliwość rozpoczęcie (akcja) trasy (obiekt). Czytająca aplikacja może definiować czytanie (akcja) książki (obiekt). Aplikacja zawierająca przepisy może zdefiniować czynność gotowanie (akcja) przepisu (obiekt). Akcje są więc czasownikami – czynnościami, które użytkownik wykonuje w aplikacji. Z kolei obiekty są rzeczownikami, których dotyczą czynności.

Istnieje lista predefiniowanych zbiorów akcji i obiektów wykorzystywanych w zwyczajnych zajęciach, dano jednak także narzędzie do tworzenia własnych.

Gdy użytkownicy używają aplikację, czynności społecznościowe są publikowane na Facebooku, który łączy użytkownika z obiektami aplikacji, przy pomocy czynności.

Jak widać, dzięki Open Graph, tworzone aplikacje stają się elementem tożsamości użytkowników oraz integrują się z grafem społecznyn. Dzięki udostępnionemu API można we własnej aplikacji korzystać z takich elementów facebooka jak: Timeline, App Views, News Feed i Ticker. Podczas interakcji użytkowników z aplikacją, wyświetlają się odpowiednie akcje na jego Timeline, News Feeds i Ticker. Wszystko to ma na celu stworzenie głębokiej i trwałej więzi pomiędzy taką aplikacją oraz jej użytkownikami i ułatwi pozyskiwanie nowych.

Postaram się teraz bardziej szczegółowo opisać sposób działania i elementy składowe Open Graph.

Jak zostało to wcześniej przeze mnie wspomniane, na Open Graph składają się pewnego rodzaju klocki jakimi są akcje i obiekty. Akcje to czynności jakie może wykonywać użytkownik korzystający z aplikacji, natomiast obiekty to rzeczy, z którymi użytkownicy mogą się powiązać w aplikacji. Poprzednio możliwe było tylko powiązanie typu lubię to, natomiast teraz możemy sami tworzyć nowe typy połączeń.

Gdy już zdefiniujemy akcje i obiekty w Dev App, musimy stworzyć obiekty. Obiekty Open Graph są prostymi stronami internetowymi zawierającymi w sekcji <head> strony odpowiednie tagi <meta> zawierające informacje Open Graph. Tagi te opisują typ obiekty, jego nazwę i inne ważne informacje.

Posłużę się przykładem pieczenia ciastka wg przepisu w celu zaprezentowania sposobu działania Open Graph.

Kiedy użytkownik wykonuje jakąś akcję w aplikacji, taką jak właśnie pieczenie ciastka, aplikacja odwołuje się do Graph API aby stworzyć nową czynność pieczenie, która łączy użytkownika z obiektem ciastko. Dzieje się to za pośrednictwem metody http post wywołanej na adres użytkownika: /me/myapp:pieczenie wraz z URL do obiektu przepisu. Następnie Facebook wyciąga URL do obiektu, odczytuje metadane i łączy obiekt z grafem użytkownika za pomocą akcji.

Poniższy diagram prezentuje ten proces:

  1. Użytkownik wykonuje akcję taką jak „pieczenie” według „przepis”
  2. Aplikacja wywołuje Graph API /me/action:object=Object_URL
  3. Facebook wyciąga URL do obiektu, odczytuje metadane i łączy obiekt z grafem użytkownika za pomocą akcji.

Rozszerzenie funkcjonalności pociągnęło za sobą wprowadzenie dodatkowych możliwości prezentowania połączeń w sposób zagregowany lub w postaci raportów.

Agregacje to podsumowanie sposobu w jaki użytkownik korzystał z danej aplikacji. Można będzie je znaleźć w Timeline użytkownika przedstawione w przyjaznej i atrakcyjnej formie. Ponadto będzie możliwość wpływania na wyświetlane dane i wcześniejsze podglądanie tego widoku wypełnionego przykładowymi danymi za pośrednictwem Dev App.

Jeśli aplikacja zdefiniuje wiele Agregacji, pojawi się możliwość przedstawiania ich na Timeline w formie raportu. Raport jest kolekcją agregacji znajdujących się na Timeline użytkownika. Będą one wyświetlane dla okresów czasu w których użytkownik miał kontakt z aplikacją. Zapewnia to spójny sposób prezentacji i sprawia, że użytkownikom będzie łatwiej odnaleźć się w gąszczu informacji.

Na koniec chciałbym szczegółowiej przyjrzeć się samemu protokołowi Open Graph, odpowiedzieć na pytanie dlaczego powstał i być może zaprezentować przykładowy kod 😉

Podczas gdy istnieje wiele różnych technologii i mamy możliwości ich łączenia, nie istnieje pojedyncza technologia zdolna do bogatego prezentowania stron internetowych w grafie społecznym. Protokół Open Graph powstał w odpowiedzi na ten problem, umożliwiając dowolnej stronie internetowej stać się bogatym obiektem (rich object) w takim grafie.

Aby zamienić nasze strony w obiekty grafu, należy dodać do niej podstawowe metadane. Cztery podstawowe właściwości dla każdej strony pokazane na przykładzie filmu z serwisu IMDB to:

– og:title – Tytuł obiektu. Będzie reprezentował obiekt w grafie. Na przykład The Rock.

– og:type – Typ obiektu np.: movie. W zależności od tego jaki typ wybierzemy, może okazać się konieczne dodanie innych właściwości.

– og:image – URL do obrazka, który będzie reprezentował obiekt w grafie.

– og:url – kanoniczny adres URL obiektu, który będzie wykorzystany jako stały ID w grafie np.: http://www.imdb.com/title/tt0117500/

I na koniec przykładowy kod protokułu Open Graph dla filmu The Rock na IMDB :

<html prefix=”og: http://ogp.me/ns#”&gt;

<head>

<title>The Rock (1996)</title>

<meta property=”og:title” content=”The Rock” />

<meta property=”og:type” content=”movie” />

<meta property=”og:url” content=”http://www.imdb.com/title/tt0117500/&#8221; />

<meta property=”og:image” content=”http://ia.media-imdb.com/images/rock.jpg&#8221; />

</head>

</html>

 

Więcej informacji:

http://developers.facebook.com/docs/beta/opengraph/tutorial/ – tutorial do Open Graph

http://ogp.me/ – Protokół Open Graph

Marek Bachorski (84772)

Reklamy

One Trackback to “Facebook Open Graph”

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Wyloguj / Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Wyloguj / Zmień )

Zdjęcie na Facebooku

Komentujesz korzystając z konta Facebook. Wyloguj / Zmień )

Zdjęcie na Google+

Komentujesz korzystając z konta Google+. Wyloguj / Zmień )

Connecting to %s

%d blogerów lubi to: