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.


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

Sebko pisze...

Z niecierpliwością czekam na więcej.

Devon pisze...

W tym tygodniu będzie następna część :)

Alivea pisze...

Bardzo ciekawe dodatki :)

Prześlij komentarz

Możesz użyć niektórych tagów HTML, takich jak <b>, <i>, <u>, <a> Nie spamuj :)

Popularne posty