Piszemy gadżet do Bloggera - część 2

W poprzedniej części (Piszemy gadżet do Bloggera - część 1) poznaliśmy podstawy pisania gadżetu oraz jego strukturę. Dzisiaj poznamy sposoby jego konfigurowania przez użytkownika. Pozwolimy użytkownikowi na podanie dodatkowych informacji podczas dodawania gadżetu do bloga. Dzięki temu użytkownik będzie mógł zdecydować np. o kolorach, napisach czy innych opcjach związanych z konkretnym gadżetem. Sekcją odpowiedzialną za preferencje jest <UserPref>. Opisuje ona pola, które będzie mógł modyfikować użytkownik podczas konfiguracji gadżetu. Pola mogą mieć następujące atrybuty:

Piszemy gadżet do Bloggera - część 1

Gadżety rozszerzają funkcjonalność naszych blogów. Dla platformy Blogger istnieje już kilkaset gotowych rozwiązań. Nic nie stoi na przeszkodzie, aby napisać samodzielnie taki gadżet. W kilku postach postaram się przybliżyć tematykę pisania gadżetów. Co będzie nam potrzebne:

• edytor tekstu (z możliwością zapisu w formacie UTF-8, np. Windowsowy notatnik, Notepad++, czy PSPad),
• serwer na którym zamieścimy nasz gadżet (np. Witryny Google, lub inny dowolny serwer z możliwością wgrywania plików),
• podstawową znajomość HTML'a i JavaScriptu.

Struktura gadżetu

Gadżety do Bloggera tak samo jak pozostałe gadżety Googli składają się z plików XML (kod gadżetu, pliki językowe itd.). Podstawowa struktura gadżetu została przedstawiona poniżej.

<module>
 <moduleprefs title="Przykładowy gadżet"> 
  // pozostałe ustawienia
 <content type="html">
  <![CDATA[ 
   // zawartość HTML, JavaScript
  ]]>
 </content>
 </moduleprefs>
</module>

Pierwsza linia jest obowiązkowa i informuje o rozpoczęciu pliku w formacie XML. Pozostałe to tagi związane z gadżetami i tak:

• tag <module> to oznaczenie, że plik będzie zawierał dane gadżetu,
• tag <moduleprefs> zawiera dodatkowe informacje o gadżecie (autor, tytuł, lokalizacje, używane rozszerzenia itp.)
• tag <content type="html"> informuje, że zawartością gadżetu będą polecenia HTML'a,
• sekcja <![CDATA[ rozpoczyna właściwy kod HTML'a (czy JavaScript'u), który będzie wyświetlany przez gadżet,
• ]]> zamknięcie sekcji CDATA,
• </content> - tag zamykający,
• </module> - tag zamykający.

Utwórzmy prosty gadżet wyświetlający napis "Nasz pierwszy gadżet!". Dodatkowo w sekcji <moduleprefs> zamieścimy informacje o autorze. Po wpisaniu kodu do edytora zapiszmy go pod nazwą PierwszyGadzet.xml

<module>
 <moduleprefs author="Devon" title="Przykładowy gadżet"> 
 <content type="html">
  <![CDATA[ 
   Nasz pierwszy gadżet!
  ]]>
 </content>
 </moduleprefs>
</module>

Pozostaje opublikowanie go w sieci. Możemy wykorzystać do tego celu Witryny Googli (więcej informacji o zakładaniu witryny znajdziesz tutaj). Po opublikowaniu (adres mojego gadżetu to: http://sites.google.com/site/kodatnikfiles/xml/PierwszyGadzet.xml), możemy sprawdzić jego działanie. Logujemy się do Bloggera, przechodzimy na Układ/Elementy strony, klikamy Dodaj gadżet, wybieramy Dodaj swoje własne i wpisujemy adres URL naszego gadżetu.

Klikamy Dodaj wg adresów URL i jeśli wszystko przebiegło poprawnie powinniśmy otrzymać takie okienko:

Dajemy Zapisz i nasz gadżet pojawi się na blogu.

W następnych odcinkach pokaże jak skorzystać z dodatkowych opcji, zmienić kolory gadżetu (zgodnie z szablonem bloga), dostać się do danych bloga oraz utworzyć lokalizacje językowe.

Wszystkie gadżety, które utworzymy i dodamy do Bloggera są "cache'owane". Oznacza to, że zmiany które wprowadzimy w kodzie nie będą widoczne od razu w gadżecie (Google "trzyma" wersję zbuforowaną mniej więcej 2 godziny). Jeżeli chcemy sprawdzić od razu zmiany to możemy, albo wyłączyć buforowanie (trochę pracy - modyfikacja szablonu), albo zapisać gadżet pod inną nazwą na serwerze (np. DrugiGadzet.xml) i dodać go od nowa do naszego bloga.

Podziel się - gadżet do Bloggera

Często na blogach mamy możliwość dodania czytanego posta do serwisów społecznościowych takich jak Wykop czy Twitter. W Bloggerze jedyną normalną możliwością skorzystanie z tej formy promocji bloga jest pasek nawigacyjny (Navbar). Niestety nie jest on lubiany przez twórców blogów jak i również jego oferta serwisów jest minimalna (brak jakiegokolwiek rodzimego serwisu). Gdy nie ma tego czego potrzebujemy, musimy wziąć sprawy w swoje ręce. Napisałem prosty gadżet do Bloggera umożliwiający podzielenie się blogiem/postem w serwisach społecznościowych. Dodatek dostępny jest w ogólnodostępnym katalogu gadżetów Bloggera. Jak go dodać. Logujemy się do Bloggera, wybieramy Układ/Elementy strony. Na pokazanym widoku naszego bloga, klikamy Dodaj gadżet. Otworzy się okienko z możliwością wyboru i dodania gadżetu. Wybieramy Więcej gadżetów w pole wyszukiwania wpisujemy Podziel się (patrz obrazek). Po znalezieniu gadżetu możemy go dodać klikając ikonkę z plusem.

Dodatkowo możemy dokonać prostej konfiguracji wpisując inny tytuł, położenie ikonek oraz serwisy, które mają być obsługiwane (klikając aktualizacja, nasze ustawienia odświeżą się). Gadżet dostosuje do wybranych parametrów swoją wysokość.

Po dodaniu do bloga możemy umiejscowić go albo z boku (Sidebar) albo w dowolnym innym miejscu (wystarczy przeciągnąć prostokąt z gadżetem w inne miejsce układu strony). Wersja online gadżetu obok.

W zależności od tego czy jesteśmy na stronie głównej bloga czy też czytamy post, do serwisu społecznościowego trafi odpowiednio adres URL bloga, tytuł bloga, opis bloga lub też adres URL posta, tytuł posta.

Jeśli korzystasz z Bloggera w wersji angielskiej, to po kliknięciu Add a Gadget w pole wyszukiwania wpisz Sociable.

Aktualizacja: 15-02-2010
Dodana obsługa Google Buzz.

Aktualizacja: 01-04-2010
Poprawiona obsługa Wykopu.