piątek, 31 października 2008

Godzimy blogaska z BLIP-em

A dokładniej bloggerowego/blogspotowego blogaska z tzw. Wklejkami oferowanymi przez BLIP-a. Od razu zaznaczam, że ten wpis nie był wcześniej planowany. Po prostu chciałem na moim blogasku umieścić listę moich ostatnich blipnięć (jakby to kogos interesowało;) i napotkałem po drodze na parę przeszkód, które uniemożliwiły mi zrobienie tego metodą Kopiego-Pejsta. W związku z tym, iż mój upór czasami jest zbawienny, bo działa mobilizująco - zabrałem się za grzebanie w kodzie i po paru mykach i obejściach udało mi się doprowadzić ten widżecik do działania (jak widać po prawej). Wiem, że nie są to hacki wymagające doktoratu z algorytmiki, ale w związku z faktem, że Google mi (o dziwo!) nie pomogło, a wołanie na #drogiblipie pozostało bez echa - zrobiłem to sam i postanowiłem podzielić się tą wiedzą z potomnymi. Tak, wiem - jestem zajebisty i w ogóle ;>

Jeszcze apropos Google - niektóre ich próby poprawiania zapytań wymiatają:


Ale wracając do meritum. Jeżeli masz już konto na BLIP-ie (mam nadzieję, że masz, bo inaczej nie masz po co czytać dalej tego posta), wybierz z górnego Menu Wklejki i sformatuj sobie swoją wklejkę wedle upodobań. Jak już będziesz miał ją odpimpowaną, skopiuj kod HTML, który Ci się automatycznie wygenerował. Teraz (w teorii) wystarczyć powinno wklejenie tego kodu na stronę, blogaska czy forum i gra gitara Może i tak, ale nie na Blogspocie :P Co więc należy zrobić? Już piszę.

Przejdź do zakładki Układ w ustawieniach blogaska, następnie wybierz Edytuj kod HTML. Tam zaznacz checkbox przy opcji Rozszerz szablony widżetów i zaczynamy zabawę. Na początek musimy znaleźć miejsce, które pasowało będzie do listingu naszych blipnięć, a przy okazji miejsce to powinno pozwalać na dodawanie własnego kodu. W sumie do wyboru mamy głównie sidebar lub stopkę - IMO estetyczniej i sensowniej będzie jednak umieścić wspomnianą wklejkę w sidebarze (np. tak jak u mnie - pod profilem). Poszukajmy zatem w kodzie bloku rozpoczynającego i kończącego się tak:

<b:widget id='Profile1' locked='false' title='O mnie' type='Profile'>
<b:includable id='main'>
<!-- masa nie interesującego nas kodu -->
</b:includable>
</b:widget>

Znaleźliśmy? Super. To skopiujmy sobie zatem powyższe i przeklejmy je ponownie zaraz po końcu tego bloku, ale przed początkiem następnego. Przy okazji możemy zauważyć, że przeklejenie tam na pałę kodu wygenerowanego przez BLIP-a nie zadziała - po prostu nic się nie pokaże. Dlaczego? Bo musimy trochę oszukać system i pościemniać go, że to co wklejamy to zwykły widżet. A guglowe widżety mają uporządkowaną strukturę, która to mówi m.in. o tym, iż kod każdego widżetu znaleźć się powinien pomiędzy dwoma głównymi znacznikami - tymi, które widać wyżej. Oka - dość teorii. Przeklejamy zatem powyższy kod, zmieniamy mu parametr id na np. Profile2, title na byle co (i tak się nie pokaże), a resztę zostawiamy jak widać. Teraz w miejsce wklepanego przeze mnie komentarza HTML wstawiamy kod, który dostaliśmy od BLIP-a. Dobra nowina - jesteśmy już prawie na finiszu. Próba podglądu wyniku działania kodu wyrzuci nam jednak kilka błędów. Blogger nie za bardzo lubi konwencje XHTML-owe, a ampersandy (&), których używamy do oddzielania poszczególnych parametrów w URL-u, podnoszą mu ciśnienie. Co musimy zatem zrobić, aby wszystko śmigało? Otóż zamienić musimy fragmenty kodu wg poniższych zaleceń:
  • wszelkie znaki "&" w kodzie wklejki podmieniamy na odpowiednie encje HTML-owe, czyli "& amp ;" (tylko bez spacji pomiędzy znakami, które ja byłem zmuszony wstawić, żeby było widać o czym piszę)
  • domknięcia dwóch znaczników robione na modłę XHTML-ową, czyli " />" zamieniamy na oldschoolowe domknięcia z pełną nazwą znacznika (</param>, </embed>). Znaczniki, w których powinniśmy poprawić domknięcia, to: znacznik <param> z parametrem name="flashvars" oraz znacznik <embed> (jest tylko jeden)
To powinno wystarczyć. Po zapisaniu kodu i odświeżeniu strony cieszyć się powinniśmy działającym self-made widżetem BLIP-a na swoim blogasku :>

7 komentarzy:

  1. Ten komentarz został usunięty przez administratora bloga.

    OdpowiedzUsuń
  2. hmm a jak odnalezc ten kod dla sidebaru? "Poszukajmy zatem w kodzie bloku rozpoczynającego i kończącego się tak" ...?

    OdpowiedzUsuń
  3. AHA juz wszytsko wiem. troche skomplikwana ta operacja blipowania na blogusie wydaje, wedlug powyzszego przepisu. Proponuje zrobic to po mojemu, tak dla ozywienia marketu przez konkurecje: po sformatowaniu wedle gustow wklejki na BLIPie, i skopiowaniu kodu HTML, wchodzimy na Uklad w Bloggerze, Dodaj Nowy Gadzet, i wybiermamy Java/HTML. Wklejamy HTML, dajemy tytul i GOTOWE jeje jeeee :D

    OdpowiedzUsuń
  4. tyle, że strona http://www.blip.pl/widgets
    nie działa:/
    co można w takim razie zrobić?

    OdpowiedzUsuń
  5. http://www.blip.pl/widgets działa, trzeba być zalogowanym...
    Ja tylko nie rozumiem potrzeby tej instrukcji. Bez problemu dodałam blipa do mojego bloga za pomocą "gadżetu" - te różne bajery dodawane do paska bocznego na bloggerze. Wystarczy tylko wybrać gadżet HTML/JavaScript i tam wkleić kod wklejki, po czym zapisać i wsjo... Dowód, że działa jest u mnie.

    OdpowiedzUsuń
  6. Wielkie dzięki, nie poradziłbym bym sobie bez tego wpisu.

    OdpowiedzUsuń