[Poprawione elementy zaznaczone na zielono]
Od momentu
premiery protokołu pod koniec kwietnia coraz więcej stron wzbogaca swoje strony o znaczniki
Open Graph oraz nowe kontrolki Facebooka. Szczególnie para kontrolek
'aktywność znajomych' i
'lubię to' jest popularna. Pierwsza ułatwia poinformowanie znajomych że coś się lubi, druga pokazuje co warto przeczytać. Kluczowe są jednak nie same kontrolki a uniwersalne znaczniki Open Graph. Do tej pory ze znaczników tych korzystał tylko serwis Facebook jednak po niedawnym
przejęciu MetaWeb przez Google także ten gigant zacznie "proces skanowania internetu" w poszukiwaniu znaczników. Myślę że także polskie serwisy wkrótce skorzystają z tego standardu.
To właśnie te znaczniki informują inne serwisy/aplikacje co to za strona, co fizycznego ona reprezentuje, gdzie się znajduje dane miejsce etc. Jeżeli np. na stronie mamy przepis na 'Tequile sunrise' dodajemy znacznik 'drink' i system będzie wiedział jak taką stronę potraktować. Jeżeli ktoś polubi naszą stronę to polubi dany przepis nie zwykły URL (odpowiednia sekcja profilu, pozycja w grafie, możliwość wyszukiwania, agregacji...). Oczywiście znajomi tej osoby zainteresowani przepisem na Tequilę będą trafiali na naszą stronę. Jakaś inna aplikacja może pobrać wszystkie drinki lubiane przez naszych znajomych (o ile tą informację oni udostępnią) lub wszystkie drinki/strony znalezione w systemie.
Jak jednak dodać znaczniki na bloga w serwisie Google Blogspot? To na szczęście jest bardzo proste. Poniżej przedstawię co należy zrobić by nasz blog mógł zostać poprawnie zinterpretowany.
Serwis blogspot działa na zasadzie szablonu. Szablon ten opisuje jak ma wyglądać nasza strona główna oraz strony poszczególnych wpisów. To rozróżnienie jest podstawowym elementem na który należy zwrócić uwagę. Jeżeli przez pomyłkę strona artykułu zostanie oznaczona jako 'blog' dla każdego wpisu zostanie w serwisie Facebook założona automatycznie osobna strona fanów. Tak więc ważne jest by tylko strona główna została oznaczona jako 'blog' lub 'website' a zwykłe strony wpisów jako 'article'. Oczywiście jeżeli nasze wpisy są przepisami na drinki powinny zostać one oznaczone jako 'drink' :)
Konieczna jest więc modyfikacja naszego szablonu. By to zrobić wybieramy opcję 'Ustawienia' a następnie wybieramy zakładkę 'Projekt'. W zakładce tej znajduje się opcja 'Edytuj kod HTML'. By widzieć całość musimy dodatkowo wybrać opcję 'Rozszerz szablony widżetów'. Uzyskamy w ten sposób dostęp do pełnego kodu naszego szablonu. Oczywiście przed modyfikacjami warto zrobić sobie kopię zapasową. Panel prezentuje poniższy rzut ekranu.
Dodanie meta-informacji wymagać będzie zdefiniowania przestrzeni nazw XML dla standardu Open Graph oraz jego rozszerzeń specyficznych dla Facebooka. Z pewnością niedługo pojawią się także rozszerzenia specyficzne dla Google.
xmlns:og='http://opengraphprotocol.org/schema/'
xmlns:fb='http://www.facebook.com/2008/fbml'
Kolejnym krokiem jest modyfikacja znacznika HEAD. Znacznik ten w szablonie jest wspólny zarówno dla strony głównej jak i stron wpisów należy więc dodać w nim zawartość warunkowo. Warunek powinien wyglądać następująco
Zacznijmy od pojedynczych wpisów. Open Graph wymaga zdefiniowania czterech podstawowych parametrów 'og:title' 'og:type' 'og:url' oraz 'og:image'. Pierwszym elementem jest typ który wybieramy z pośród listy typów wspieranych przez protokół. W naszym przypadku będzie to 'article'. Drugim ważnym polem jest tytuł który ustawiamy na wartość 'data:blog.pageTitle'. Wartość ta jest zmienną dostępną w szablonie w trakcie generowania znacznika HEAD. Ważne jest by atrybut 'content' w znaczniku 'meta' który wykorzystuje zmienne szablonu został oznaczony prefixem 'expr:'. Tylko w takim przypadku silnik generujący będzie wiedział że ma podstawić w tym miejscu wartość zmiennej. Kolejnym polem jest adres naszej strony który ustawiamy na wartość zmiennej 'data:blog.url'. Następnie należy zdefiniować obrazek.
Kolejne atrybuty z jakim warto skorzystać to 'og:site_name' pozwalający nam zdefiniować czytelną krótką nazwę dla naszego bloga oraz 'og:description'.
W przypadku strony głównej poszczególne wartości to:
'og:title' - stała nazwa naszego bloga/strony,
'og:type' - typ ustawiony na 'blog' lub 'website'
'og:url' - adres naszej strony głównej
'og:image' - grafika
'og:site_name' - czytelna krótka nazwa
'og:description' - opis strony
Jeżeli nasza strona reprezentuje fizyczne miejsce takie jak restauracja lub jest przykładowo wydarzeniem (koncert lub jakaś inna impreza) należy podać także adres najlepiej z dokładną pozycją GPS (z Google Maps). Poszczególne znaczniki można sprawdzić w dokumentacji protokołu. To chyba jeden z fajniejszych elementów. Facebook aktualnie z tych danych jeszcze nie korzysta ale myślę że jest to tylko kwestią czasu. W końcu czy nie byłoby fajnie wybrać opcję 'lubię to' na stronie jakiegoś koncertu a serwis automatycznie by nas do tego zdarzenia przypisał w serwisie Facebook? W wyniku nasi znajomi mogliby zobaczyć na mapie co dzieje się ciekawego w okolicy. Wszystko całkowicie automatycznie. Dyskusję na temat wydarzeń można znaleźć w Google Groups.
Dodatkowo w przypadku strony głównej możemy także skorzystać z rozszerzonych znaczników przygotowanych przez serwis Facebook i zdefiniować administratorów strony. Jest to bardzo ciekawa funkcjonalność. W wyniku w serwisie Facebook automatycznie utworzy się wirtualna strona fanów naszego bloga/strony (dzięki danym które zdefiniowaliśmy w Open Graph). Dlaczego wirtualna? Ponieważ nie będzie widoczna dla użytkowników, ci będą kierowani bezpośrednio na naszego bloga. Strona ta będzie jedynie ułatwiała nam administrację i dostęp do statystyk. Dodatkowo nasz blog będzie dostępny w wyszukiwarce serwisu Facebook
Znacznik ten to 'fb:admins'. Administratorem może być także aplikacja co definiujemy za pomocą znacznika 'fb:app_id'. Po zdefiniowaniu administratora na blogu musimy wykorzystać przycisk Like na stronie by administrator potwierdził przynależność do tej strony (można skorzystać z wtyczki Facebook Like Plus która udostępnia 'przenośny Like' dla każdej strony). Więcej informacji można znaleźć na stronie dokumentującej rozszerzenia protokołu.
Całość znacznika 'IF' dla mojego bloga wygląda następująco (nie ma w nim znacznika 'admins'):
W zasadzie jest to już koniec definiowania znaczników Open Graph. Warto jednak dodać jeszcze przycisk 'Lubię to!' pod naszymi wpisami. By to zrobić należy w kodzie odszukać 'stopkę' naszych wiadomości. Jest ona oznaczona jako: <div class='post-footer'>. Ramkę przycisku 'Lubię to' należy umieścić zaraz pod tym znacznikiem. Całość powinna wyglądać następująco.
Oczywiście sam kod można wygenerować na stronie prezentującej przycisk Like. Wartość adresu strony powinna być ustawiona na wartość 'data:post.url'. Znaczniki należy przekonwertować zgodnie z wzorem oraz pamiętać o prefixie 'expr' w atrybucie 'src'.
W wyrażaniu należy dodać także spacje przy znakach '+' w otoczeniu zmiennej 'data:post.url' (nie ma tego na obrazku). W przeciwnym wypadku blog nie pokaże się poprawnie. Więcej informacji dodałem
w kolejnym wpisie wyjaśniającym
Zapisujemy nasz szablon i testujemy wynik. Najlepiej poprawność sprawdzić za pomocą narzędzia Facebook URL Linter. Wpisujemy w nim zarówno adres strony głównej jak i przykładowego wpisu. Całość pokazuje jakie dokładnie informacje znajdą się w grafie gdy strona do niego dołączy.
Jak widać całość zabiera kilka minut (w przeciwieństwie do napisania tak długiego opisu). Jeżeli się komuś wpis spodobał zachęcam do kliknięcia w 'Lubię to'. Będę wiedział że tak szczegółowe tutoriale ma sens umieszczać na blogu. Choć następny będzie raczej znów w tematyce Eclipse lub OSGi.
Jak zwykle zachęcam także do wypróbowania wtyczki dla Google Chrome - Facebook Like Plus.
Zainstalowało ją już ponad 450 osób z czego 100 osób zostało fanami :)
