Dodajemy przycisk +1 do Bloggera

Odpowiedzią Google na Facebookowe  "Lubię to" jest przycisk "+1". Możemy obdarzyć plusem strony, które nam się podobają i zwiększyć ich popularność w sieci. Oczywiście musimy być zalogowani na konto w dowolnej usłudze Google. Standardowo Blogger obsługuje nowy przycisk w domyślnych szablonach (wystarczy włączyć odpowiednią opcję). Sytuacja wygląda gorzej jeśli korzystamy z własnych szablonów.

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.

Dodajemy Wykop do Bloggera

Wykop to serwis do którego możemy dodawać ciekawe strony. Każda dodana informacja jest oceniana i dyskutowana przez społeczność internautów. Od niej zależy czy dany wpis będzie popularny czy też nie. Jednym ze sposobów wzbogacenia Bloggera o możliwość dodawania wpisów do wykopu jest mój gadżet Podziel się. W tym poście przedstawię drugą możliwość. Na stronie wykopywarki mamy dostępne kilka kodów, które można umieścić bezpośrednio w szablonie naszej strony. Informacja o osobach, które również uznały nasz post za ciekawy (wykopały go) będzie na bieżąco aktualizowana. Pytanie tylko gdzie go wkleić. Możliwości jest kilka, albo na początku treści posta, albo w jego nagłówku, albo pod postem. Przyjrzyjmy zatem się standardowej wykopywarce (duża ikona z ilością wykopów). Zmodyfikujmy trochę kod tak, aby edytor Bloggera przyjął go bez zastrzeżeń.

<script language='javascript'>
var wykop_url=location.href;
var wykop_title=document.title; 
var wykop_desc=encodeURIComponent('Podaj opis');
var widget_bg='FFFFFF';
var widget_type='normal';
var widget_url='http://www.wykop.pl/widget.php?url='+(wykop_url)+'&amp;title='+(wykop_title)+'&amp;desc='+(wykop_desc)+'&amp;bg='+(widget_bg)+'&amp;type='+(widget_type);
document.write("<div style='float: right;'><iframe border='0' frameborder='0' scrolling='no' src='"+widget_url+"' style='border:none;width:72px;height:65px;overflow:hidden;margin:0;padding:0;'/></div>");
</script>

Dodałem dodatkowo umiejscowienie ikony (prawa strona - <div style='float: right;'>) oraz zamieniłem kilka znaków, które powodują błędy Bloggera. Mając już kod, spróbujmy go dodać do naszych postów, a dokładnie do tytułu posta. Logujemy się do Bloggera, wybieramy Układ/Edytuj kod HTML. Zaznaczamy Rozszerz szablony widżetów. W podglądzie źródła naszego szablonu szukamy (Ctrl+F) następującego fragmentu:

<b:includable id='post' var='post'>
  <div class='post hentry uncustomized-post-template'>

Wklejamy poniżej zmodyfikowany kod wykopu. Wszystko funkcjonuje prawidłowo przy wyświetlonych pojedynczych wpisach. Na stronie głównej naszego bloga ikonka wykopu będzie niestety starała się dodać adres bloga, a nie poszczególnych postów, więc....wykorzystamy wyrażenie warunkowe, które będzie dodawało wykopywarkę tylko na stronach postów, a nie na stronie głównej.

<b:if cond='data:blog.pageType != "index"'>
 Nasz zmodyfikowany kod wykopu
</b:if>

Efekt widoczny na moim blogu. Oczywiście możemy zmienić miejsce dodania ikony jak i również jej położenie (do prawej, do lewej, na środku itd.). Na przykład dodanie ikony do treści posta, to odnalezienie w szablonie następującego kodu:

<div class='post-body entry-content'>

...i wstawienie poniżej tego co poprzednio. Sposób ten umożliwia, w zależności od naszych preferencji, dodanie ikon/linków do dowolnych serwisów (zobacz np. serwis Wyczaj to)

Jeśli nie odpowiada nam duża ikona to możemy wybrać z wykopywarki kod obsługujący wersję compact.

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.

Dodajemy Favicon do Bloggera

Standardowo Blogger udostępnia dla blogów pomarańczową ikonkę pojawiającą się przy pasku adresu naszej przeglądarki, Nic nie stoi na przeszkodzie, aby ją zmienić na własną bardziej oddającą treść naszego bloga. Plik ikony powinien mieć rozmiary 16x16 pikseli. Domyślny format to ICO (większość przeglądarek obsługuje również poprawnie pliki PNG i GIF). Do skonwertowania pliku graficznego do pliku ICO możemy wykorzystać darmowy program IrfanView, bądź też poszukać darmowych ikonek w sieci. Idealnie do tego nadaje się wyszukiwarka Google (wybieramy grafika/wyszukiwanie zaawansowane/określamy rozmiar 16x16). Wybrany obrazek musimy umieścić na serwerze i dokonać zmian w kodzie naszego szablonu (nadpisać domyślne ustawienia Bloggera). Logujemy się do Bloggera, wybieramy Układ/Edytuj kod HTML. W podglądzie źródła naszego szablonu szukamy (Ctrl+F) następującego fragmentu:

<b:include data='blog' name='all-head-content'/>

Jest to fragment odpowiedzialny za utworzenie zawartości nagłówka naszej strony. Poniżej powyższego kodu dopisujemy linijkę:

<link href='Adres URL pliku ikonki' rel='shortcut icon' 
type='image/vnd.microsoft.icon'/>

Gdzie Adres URL pliku ikonki to ścieżka dostępu do naszej ikonki (pliku z rozszerzeniem .ico). Efekt widoczny jest na moim blogu (zobacz w pasku tytułu przeglądarki).

Ikonki mogą być również animowane. Wykorzystywany jest do tego celu format GIF.

Rozmiar ikonki może być większy (np. 32x32 czy 48x48). Przeglądarka odpowiednio przeskaluje sobie nasz plik.

Zmieniamy tytuł strony w Bloggerze

Standardowo tytuł pojedynczego postu w Bloggerze jest umieszczany w kolejności (tytuł bloga + tytuł postu). Większość wyszukiwarek internetowych opiera swoje wyniki między innymi na tytule strony. Spróbujmy zatem zmienić kolejność elementów (najpierw tytuł posta, potem tytuł bloga). Logujemy się do Bloggera, wybieramy Układ/Edytuj kod HTML. W podglądzie źródła naszego szablonu szukamy (Ctrl+F) następującego fragmentu:

<title><data:blog.pageTitle/></title>

Jest to fragment odpowiedzialny za stworzenie tytułu strony. Zamieniamy go z następującym kodem:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>

Dajemy Zapisz i gotowe. Powyższy fragment będzie tworzył tytuł strony w zależności od tego czy jesteśmy na stronie głównej (tytuł bloga) czy też na stronie konkretnego posta (tytuł posta | tytuł bloga). Oczywiście znak rozdzielający tytuły możemy wybrać dowolnie (w przykładzie jest to pionowa kreska). Efekt widoczny jest na moim blogu (zobacz w pasku tytułu przeglądarki).

Wszystkie tagi, z których możesz korzystać w swoim szablonie (np. <data:blog.title/> - tytuł bloga) znajdziesz tutaj (język ang.).