Blogger z mikroblogami część 1 – integracja z Flakerem (FP)

Mikroblogi przeżywają w na świecie szalony rozwój. W Polsce mamy Blipa, Śledzika, Spinacza i Flakera, który niby jest agregatorem, niby platformą mikroblogów, ale przede wszystkim dysponuje najbardziej zgraną społecznością w polskim świecie mikrotwóców (do której ja rónież się zaliczam – jeśli jeszcze tego nie robisz, to możesz mnie obserwować). Flaker ma rónież całkiem pokaźną liczbę dodatków i aplikacji wykorzystujących jego API. Jednym z nich jest FlakPress - dodatek do twojego bloga, który przy każdym wpisie prezentuje reakcje i komentarze z serwisu Flaker.pl powiązane z danym wpisem.
Dokładniej gdy wchodzisz pierwszy raz na stronę z aktywnym FlakPress’em tworzy się specjalny użytkownik na Flakerze – np. dla poradnika jest to użytkownik poradnik.webatech.pl. Użytkownik ten gromadzi informacje o nowych postach na twojej stronie i do jego wpisów podpinają się komentarze pozostawiane przez użytkowników.
Podpowiem jak zintegrować Flakera z Bloggerem i dodać do niego FlakPress. Wszystko co należy zrobić, to dodać kod skryptu w odpowiednim miejscu.

1. Na początku otwieramy Pulpit nawigacyjny Bloggera dostępny po zalogowaniu na stronie http://blogger.com. Następnie klikamy na link Układ (patrz zrzut poniżej). Spowoduje to otwarcie się nowej strony z możliwością zmian wyglądu bloga.
2. W celu przejścia do edycji kodu, klikamy na zakładkę . Następnie zaznaczamy opcję i po przeładowaniu strony w obszarze w polu tekstowym w kodzie odnajdujemy (stosując skrót wyszukiwania Ctrl + F) znacznik </title>, by wstawić podany w następnym punkcie kod.
3. FlakPress działa dzięki bibliotece jQuery, dlatego w kodzie strony musimy dodać jej pobranie. Wstawiamy również odwołanie do funkcji JS dostępnej na serwerze Flakera, arkusz styli CSS i samą funkcję.
   

   <!-- flakpress -->
   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
   <script src='http://static0.flaker.pl/static/js/flaker/flaker.blog.js' type='text/javascript'/>
   <link href='http://static0.flaker.pl/static/css/flaker/widgets.css' rel='stylesheet' type='text/css'/>
   <script type='text/javascript'>
       jQuery(function(){
           var flakpress1 = new flaker_c({&quot;target&quot;:&quot;#flakpress_1&quot;, &quot;form_width&quot;:&quot;695px&quot;,&quot;form_add&quot;:1,&quot;show_visits&quot;:1, &quot;show_flaker_button&quot;:1, &quot;show_favs&quot;:1, &quot;show_comments&quot;:1, &quot;show_reactions&quot;:1, &quot;comments_position&quot;:&quot;above&quot;,&quot;height&quot;:&quot;auto&quot;, &quot;bg&quot;:&quot;#fff&quot;,&quot;anonim&quot;:1,&quot;sort&quot;:&quot;asc&quot;,&quot;singlemode&quot;:1,&quot;border&quot;:&quot;auto&quot;});
           flakpress1.blog_init();
         });
   </script>
   <!-- flakpress koniec -->
   

4. Na koniec musimy jedynie wstawić ramkę, czyli znacznik <div> z odwołaniem do Flakera, w odpowiednie miejsce w kodzie. Ja proponu ję umieścić go tuż przed komentarzami. Dlatego ponownie uruchamiamy wyszukiwanie, tyle że tym razem odnajdujemy wyrażenie <b:includable id='comments' var='post'> tuż za nim wstawiamy <div id='flakpress_1'/>.
5. Na koniec, w celu zatwierdzenia nowej konfiguracji klikamy na przycisk . Od teraz komentarze z flakera do naszych wpisów i odwiedziny naszej strony przez flakerowiczów będą wyświetlane na naszym blogu tuż przed komentarzami (patrz zrzut poniżej).
   

Poprawiamy SEO Bloggera część 1: lepsze indeksowanie podstron

Domyślnie Blogger wyświetla tytuły podstron w postaci “tytuł strony + tytuł wpisu”. Jednak by być bardziej widocznym w wyszukiwarce lepiej zdecydować się na odwrotną budowę tytułu podstrony. Okazuje się, że w Bloggerze możemy to prosto zrobić, pokażę jak.

1. Rozpoczynamy od otwarcia Pulpitu nawigacyjnego Bloggera dostępnego na stronie http://blogger.com. Następnie klikamy na link Układ (patrz zrzut poniżej). Spowoduje to otwarcie się nowej strony z możliwością zmian wyglądu bloga.
2. W celu przejścia do edycji kodu, klikamy na zakładkę . Następnie w obszarze w polu tekstowym w kodzie odnajdujemy (korzystając ze skrótu skrót Ctrl + F) wyrażenie <title><data:blog.pageTitle/></title>. W zmiennej blog.pageTitle przechowywany jest tytuł strony, który dodawany jest do kodu HTML dzięki znacznikom <title></title>.
3. Następnie zamiast niego wpisujemy warunek if-else, w którym sprawdzamy czy jesteśmy na stronie głównej bloga (zmienna blog.homepageUrl), jeśli tak to wyświetlamy tylko tytuł bloga. W przeciwnym przypadku tytuł składa się z tytułu wpisu i tytułu bloga połączonych słowem na, które można dowolnie zmienić.
   <b:if cond='data:blog.url == data:blog.homepageUrl'>
   <title><data:blog.pageTitle/></title>
   <b:else/>
   <title><data:blog.pageName/> na <data:blog.title/></title>
   </b:if>
4. Na koniec, w celu zatwierdzenia nowej konfiguracji klikamy na przycisk . Od teraz nasz tytuł będzie wyglądać inaczej.

Wpis zainspirowany blogiem Devona.

Polonizujemy Bloggera część 4: poprawiamy datę – sposób drugi

Przedstawiony przeze mnie wcześniej opis zmiany daty na polską w Bloggerze można nieco udoskonalić. Korzystając z domyślnego rozwiązania dateHeader skazujemy się na wyświetlanie daty tylko przy pierwszym wpisie (jeśli wybranego dnia jest stworzyliśmy ich kilka). Jednak problem ten można rozwiązać stosując funkcję timestamp, która wykorzystywana jest m.in. do określania czasu dodania komentarza do wpisu. Pokażę jak zmodyfikować ustawienia, by osiągnąć sukces. Poradę przedstawię od strony osoby, która jeszcze nie uruchomiła polskiej daty na swoim blogu.

1. Rozpoczynamy od otwarcia Pulpitu nawigacyjnego Bloggera dostępnego na stronie http://blogger.com. Następnie klikamy na link Układ (patrz zrzut poniżej). Spowoduje to otwarcie się nowej strony z możliwością zmian wyglądu bloga.
2. W celu przejścia do edycji kodu, klikamy na zakładkę . Następnie zaznaczamy opcję i po przeładowaniu strony w obszarze w polu tekstowym w kodzie odnajdujemy (skrót Ctrl + F) wyrażenie
   <span class='date-header'><data:post.dateHeader/></span>  
   Zamiast <data:post.dateHeader/> wpisujemy wywołanie funkcji w JavaScript, którą za chwilę dodamy. Jako argument podajemy już nową zmienną data:post.timestamp. Całe wyrażenie ma wtedy postać:
   <SCRIPT> poprawna_data(&#39;<data:post.timestamp/>&#39;);</SCRIPT>
3. Następnie przechodzimy na początek kodu szablonu i po wierszu:
   <title><data:blog.pageTitle/></title>
   wklejamy wspomnianą funkcję JS:
   
   
   

   <SCRIPT type='text/javascript'>

   //<![CDATA[
   function poprawna_data(date) {
   var data = date.split('/');
   var dzien = data[1], miesiac = data[0], rok = data[2];
   var miesiace = ['0','stycznia','lutego','marca','kwietnia','maja','czerwca','lipca',
   'sierpnia','września','października','listopada','grudnia'];
   document.write(dzien+" "+miesiace[miesiac]+" "+rok); }
   //]]>
   </SCRIPT>
   
   
   
4. Na koniec, w celu zatwierdzenia nowej konfiguracji klikamy na przycisk . To jednak nie wszystko musimy jeszcze zmienić format daty, tak żeby funkcja split(‘/’) mogła zadziałać. W tym celu przechodzimy na główną zakładkę i następnie na .
5. Na nowo otwartej stronie odnajdujemy listę Format znacznika czasu i wybieramy z niej sposób wyświetlania daty z ‘/’, na przykład dla daty 5 września 2009, będzie to 09/05/2009. Na koniec w celu zapisania nowej konfiguracji klikamy na przycisk . Od teraz miesiące na blogu będą podawane we właściwym przypadku i co ważne data będzie występować przy każdym z postów.

Nowy widżet tłumaczący z Google Translate

Kilka tygodni temu opisywałem usługi Google korzystające z serwisu, tudzież API Google Translate. Można je znaleźć pod tagiem Google Translate. Jednak w tym czasie Google postanowił przebudować nieco tą część serwisu, w której do dyspozycji mamy widżet umożliwiający tłumaczenie stron WWW. Pokażę jak z niego skorzystać.

1. Otwieramy stronę http://translate.google.pl i klikamy na link/zakładkę . Zostajemy przeniesieni na nową podstronę serwisu. Zakładamy, że nasza strona jest w języku polskim, dlatego z listy 1. Wybierz język swojej strony internetowej: wybieramy .
2. Domyślnie widżet umożliwia tłumaczenie na wszystkie 52 języki dostępne w usłudze. Jednak jeśli chcemy wybrać tylko te najpopularniejsze w punkcie 2. Wybierz ustawienia opcjonalne: zaznaczamy opcję i na liście wybieramy te, o których wcześniej myśleliśmy.
3. Następnie kopiujemy kod umieszczony w polu oznaczonym punktem 3. i wklejamy go na swoją stronę. Efekt jest następujący (patrz zrzut po prawej). Wystarczy teraz wybrać z listy język i strona zostanie przetłumaczona. Nowością stosowaną przy tej wersji widżeta jest pasek Google Translate, wyświetlany w celach informacyjnych – zawiera m.in. opcje tłumaczenia i wyświetla procent przetłumaczenia strony w trakcie trwania procesu (patrz zrzut poniżej). Zachęcam do testów.

Startujemy z Google Wave

Kiedy udało nam się zdobyć zaproszenie do Google Wave, warto je wykorzystać. Krótko charakteryzując nowy produkt Google można napisać, że jest to multikombajn do komunikacji: połączenie komunikatora internetowego IM (np. takiego jak Gadu-Gadu, czy Miranda) z klientem e-mail do odbierania poczty (np. Gmail, lub inne podobne usługi firm takich jak Wirtualna Polska, Onet, Interia, czy O2). Warto się nim zainteresować  zwłaszcza, że jego kod zostanie udostępniony na otwartej licencji, co zapewni powstanie jego wielu niezależnych implementacji. Na początku pokażę jak zalogować się do Google Wave.

1. Kiedy w naszej skrzynce znajdziemy e-mail od “wave-noreply” z tematem “xaxbxc has invited you to preview Google Wave” możemy czuć się wyróżnieni, bowiem Google rozdaje dostęp do GW poprzez zaproszenia. Scenariusz pozyskiwania nowych użytkowników (znajomych znajomych) jest już sprawdzony, podobny był wykorzystywany w pierwszych latach istnienia Gmaila (poczta Google). Otwieramy zatem wspomniany e-mail i upewniając się, że rzeczywiście jest to zaproszenie od Google klikamy na link, który powinien mieć budowę podobną do tego: https://wave.google.com/wave/invite?a=pre&wtok=90067d7d764d3718&wsig=ABk8uhQYzaN2oOJJhF6_mGHjU6wEOhqI_Q
2. Zostaniemy przekierowani do strony logowania do Wave (patrz poniżej). W celu skorzystania z usługi należy dysponować kontem Google Account (klikamy na link Create an account now i postępujemy według porady Zakładamy konto) lub skorzystać z konta Gmaila (jak założyć konto w Gmailu czytaj w poradniku). Kiedy mamy już stosowne konto to uzupełniamy dane w polach Email (adres e-mail) i Password (hasło). Następnie klikamy na przycisk .
3. Spowoduje to zalogowanie się do Google Wave. Po lewej stronie okna znajdziemy panel , w którym znajdziemy wszystkie przesyłane do nas informacje. Poniżej znajduje się box z kontaktami do osób, które mamy w książce kontaktowej Google (tzw. do tych, do których pisaliśmy e-maile). Centralne miejsce w Wave zajmuje obszar wyświetlający wszystkie fale . Za to najbardziej po prawej znajduje się panel w którym prowadzimy korespondencję i uczestniczymy w tzw. fali komunikacyjnej tzn. właśnie wave. W kolejnych częściach przedstawię jak korzystać z Wave.

Piszemy bloga z Google Sidewiki

Prawdopodobnie jedyną użyteczną funkcją Google Sidewiki jest możliwość dodawania wpisów do Bloggera. Aby skorzystać z Sidewiki musisz najpierw zainstalować Google Toolbar (dostępny na stronie http://google.com/toolbar) i uruchomić Sidewiki. Kiedy będziesz gotowy wystarczy, że przeczytasz poniższą poradę, na końcu której prezentuję wideo objaśniające jak korzystać z funkcji.

1. Na początku otwieramy Firefoksa lub Internet Explorer, bo tylko dla nich dostępny jest Google Toolbar. Następnie wchodzimy na stronę, na temat której chcemy stworzyć wpis i w toolbarze klikamy na ikonę , co spowoduje otwarcie się po lewej stronie sidebara.
2. Jeśli nie jesteśmy zalogowani na konto w Google zobaczymy informację “Aby utworzyć wpis, zaloguj się na konto Google.” Klikamy wtedy na link zaloguj się i w kolejnym oknie, które się otworzy (patrz zrzut ekranowy obok) w polu E-mail wpisujemy adres e-mail konta w serwisie Google (jeśli go nie masz przeczytaj poradę), a w Hasło, hasło do niego. Następnie klikamy na przycisk .
3. Jeśli chcemy opublikować informację na temat całej strony, to nic nie zmieniamy, jednak gdy chcemy skomentować tylko wybrany tekst znajdujący się na danej witrynie, to musimy go najpierw zaznaczyć.
4. Następnie musimy uzupełnić dwa pola: Tytuł wpisu i Pomocne informacje na temat strony (czyli treść wpisu) – patrz zrzut obok.
5. Na koniec pozostaje już tylko wybranie bloga, na którym chcemy opublikować notkę. W tym celu klikamy na link Moje blogi w Bloggerze i z listy wybieramy określony dziennik. W celu akceptacji klikamy na przycisk .
6. Wpis zostanie stworzony na wybranym blogu. Możemy go dodatkowo udostępnić znajomym za pomocą e-maila, facebooka, czy twittera. Stworzony tekst będzie widoczny również w naszym profilu. 

Jak uruchomić Google Sidewiki?

Przed przystąpieniem do porady warto, abyś przeczytał tekst Google Sidewiki – czy to się komuś przyda? i zdecydował, czy na prawdę chcesz korzystać z nowego wynalazku Google. Jeśli jesteś pewien, to pokażę jak ci jak uruchomić funkcję komentowania stron za pomocą Sidewiki. Warunkiem koniecznym jest posiadanie przeglądarki Mozilla FIrefox lub Internet Explorer i narzędzia Google Toolbar.

1. Otwieramy przeglądarkę i wchodzimy na stronę http://www.google.com/toolbar. Następnie klikamy na przycisk Zainstaluj pasek narzędzi Google Toolbar. Na kolejnej stronie, która się otworzy klikamy na przycisk .
2. Jeśli korzystasz z przeglądarki Mozilla Firefox, którą osobiście polecam, to pojawi się okno instalacji dodatku (patrz zrzut poniżej). Musisz w nim kliknąć na przycisk . Uruchomi to proces pobierania rozszerzenia, po zakończeniu którego należy zamknąć i uruchomić Firefoksa.
3. Przy kolejnym starcie przeglądarki zobaczysz ekran konfiguracyjny (patrz zrzut poniżej). Na nim będziesz mógł uruchomić funkcję Sidewiki. Wszystko co musisz zrobić to kliknąć na przycisk . Następnie w lewej części okna przeglądarki zobaczysz pasek, po kliknięciu na który zostanie wyświetlona część Sidewiki. 

Zakładamy konto, blog w Blogger.com

Kiedy dysponujemy już kontem Google (jeśli nie przeczytaj najpierw porady Zakładamy konto w Google - sposób pierwszy przez GMail i Zakładamy konto w Google – sposób drugi przez dowolny e-mail) możemy bez problemu przejść do etapu założenia bloga w serwisie Blogger.com. Według mnie takie rozwiązanie sprawuje się znacznie lepiej niż WordPress - jest darmowe, uruchomione na wydajnych serwerach (bez limitu transferu), jest pełna ingerencja w kod/wygląd strony i możliwość podpięcia dowolnej domeny.

1. Rozpoczynamy od otwarcia w przeglądarce strony Blogger.com i w obszarze Zaloguj się za pomocą konta Google (patrz zrzut poniżej) wpisania loginu (pole Użytkownik) i hasła (pole Hasło). Następnie klikamy na przycisk .
2. Spowoduje to otwarcie się strony rejestracji w serwisie Blogger.com. W polu Nazwa wyświetlana wpisujemy swój pseudonim lub imię i nazwisko. Pod taką nazwą będziemy występować na blogu. Następnie zaznaczamy Akceptacja warunków, poprzez który zgadzamy się na warunki na jakich Google udostępnia nam usługę. Później klikamy na przycisk Dalej.
3. W kolejnym kroku będziemy wybierać nazwę bloga i adres pod jakim ma być dostępny w internecie (oczywiście będzie to adres w domenie blogspot.com, czyli np. http://pmwebatech.blogspot.com). Dlatego w polu Tytuł bloga wpisujemy tytuł jaki ma być wyświetlany na blogu i w Adres bloga (URL) podajemy pierwszy człon adresu według schematu np. http://pmwebatech.blogspot.com. Należy pamiętać, że wybrany przez nas adres może być już zajęty, dlatego kliknij najpierw na link Sprawdź dostępność i jeśli zobaczysz komunikat Ten adres bloga jest dostępny możesz przejść do kolejnego kroku. W przeciwnym przypadku wyświetli się lista proponowanych adresów, z których możesz wybrać ten, pod którym będzie dostępny twój blog. Na koniec ponownie kliknij na przycisk Dalej.
4. W tym momencie otworzy się strona z dostępnymi szablonami. Musisz wybrać jeden z nich, później będzie można dokonać zmiany na przygotowany przez niezależnego webdewelopera. Dlatego kliknij na wybranym i ponownie na przycisk Dalej.
5. Po tym kroku twój blog jest już gotowy. W tym momencie możesz jeszcze przeprowadzić zaawansowaną konfigurację domeny lub import bloga np. z WordPressa. Pokażę jak tego dokonać w przyszłych wpisach. Na razie kliknij na Rozpocznij blogowanie i zgłębiaj tajniki Bloggera.
6. W tym momencie powinny ci się już przydać poprzednie wpisy:
   • Dodawanie wiadomości z RSS-ów do Bloggera, Flakera i Twittera
   • Jak prosto promować wpisy i blogi z Bloggera
   • Polskie komentarze w Bloggerze
   • Osadzamy komentarze pod postem
   • Polonizujemy bloga na platformie Blogger.com - część 2
   • Polonizujemy Bloggera część 3: poprawiamy datę
   • Opcja “czytaj dalej…” dostępna w Bloggerze
   • Pokaż się, czyli zdjęcia pod wpisami na Bloggerze

Zakładamy konto w Google – sposób drugi przez dowolny e-mail

W poprzedniej poradzie pokazałem jak założyć konto w Gmailu, które później będzie można przekształcić w konto do każdego serwisu Google. Mogliśmy do tego celu wykorzystać dowolny adres e-mail, jednak znacznie wygodniej (choć mniej bezpiecznie) jest mieć zintegrowane wszystkie usługi. Jeśli jednak nie chcesz zakładać nowego adresu e-mailu, a chcesz korzystać z usług Google, to postępuj według poniższej porady.

1. W przeglądarce otwórz stronę www.google.pl i kliknij w prawym górnym rogu na link Zaloguj. Na stronie, która się otworzy, w celu przejścia do formularza rejestracyjnego klikamy na link utwórz konto za darmo lub Stwórz konto (patrz zrzut obok).
2. Następnie w obszarze Informacje wymagane dla konta Google uzupełniamy odpowiednie pola. W Twój obecny adres email wpisujemy wykorzystywany adres e-mail np. pmtest@o2.pl. W kolejnym kroku uzupełniamy pola Wybierz hasło – hasło dostępu do Google Accounts (nie do o2.pl), musi być przynajmniej 8 znakowe i najlepiej gdy zawiera zarówno litery, znaki, jak i cyfry oraz Ponownie wpisz hasło – powtórzenie hasła podanego we wcześniejszym polu.
3. Na koniec w polu Weryfikacja obrazkowa podajemy litery odczytane z obrazka np. dla przykładu obok będzie to soffyinles. Na koniec czytamy regulamin (na szczęście dostępny jest po polsku) i klikamy na przycisk . Pokaże się strona podobna do tej zamieszczone na zrzucie poniżej.
4. Konto zostanie automatycznie powiązane z Google, należy jedynie kliknąć na link wysłany e-mailem na podany login. Po tym fakcie z kontem Google możesz na przykład:
   • Uzyskać dostęp do bezpłatnych produktów Google, w tym iGoogle, Albumy zdjęć programu Picasa, Blogger, orkut, Grupy dyskusyjne Google i wielu innych
   • Dodać adres Gmail do konta Google*
   • Korzystać z Google AdWords i Google Checkout