Integracja dWorld z Bloggerem

Dzięki Grzegorzowi Dudzie zostałem dodany do jednego z najciekawszych w Polsce serwisów o Javie w Polsce - dWorld.pl . Od tego momentu moje posty mają się automatycznie pojawiać na dWorld w zakładce Blogosfera. Dzięki Grzegorz!

Marek Podsiadły przygotował specjalny widget do umieszczenia na blogu, aby bezpośrednio z bloga dało się głosować na dany artykuł. Wystarczy umieścić:

<script type="text/javascript" src="http://www.dworld.pl/js/bs_widget.js"> </script>

Kod ten powoduje umieszczenie małej ramki "iframe" z źródłem do serwisu dworld (w parametrach przekazując adres bieżącej strony).

Moje pierwsze podejście aby zrobić to za pomocą Edycji Html-a szablonu, było mało udane, po umieszczenie powyższego kodu Blogger wywoływał gdzieś swoje akcje javascript w których podmieniał dworldowe iframe na swoje z polem do dodawania komentarza.

Następnie zastosowałem się do wskazówki Marka i w układzie strony dołożyłem nowy Widget, typu "Html", jako treść wpisałem powyższy kod html i .. działa :) Prawie idealnie ... bardzo dobrze działa jak jest wyświetlany jeden artykuł.
Na stronie głównej też ten widget jest wyświetlany, ale nie dotyczy on żadnego artykułu. W dodatku mimo że w dokumentacji Marek napisał, że jeżeli urla który jest przekazywany jako parametr nie będzie w bazie artykułów (czyli np. będzie to strona główna) to wyświetlany będzie widget bez możliwości głosowania, aby nie wprowadzać chaosu. U mnie na stronie głównej widget niestety ma +/-.

Na moim blogu artykuły nie są długie (choć może kiedyś się rozpiszę ;) ), więc chciałbym umożliwić głosowanie już na stronie głównej. Taki widget powinien być wyświetlany pod każdym postem. Wróciłem do zabawy z Edycją Html szablonu.
Po włączeniu "Rozszerz szablony" znalazłem dobre miejsce na umieszczenie widgeta.

<div class='post-header'>
    <div class='post-header-line-1'/>
</div>

<div class='post-body entry-content'>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Powyższy kod odpowiada za wyświetlenie artykułu, mogę umieścić widgeta za nim.

Trochę musiałem pokombinować jak połączyć iframe, jscript z tagami bloggera. Kilka różnych koncepcji padło, jako nie dające się zrealizować.
W końcu po przyjrzeniu się gotowemu szablonowi udało mi się wymyślić coś takiego:

<div class='dworld' id='dworld'>
<iframe expr:src='&quot;http://www.dworld.pl/blogEntry/widget?url=&quot; + data:post.url' frameborder='0' height='90' scrolling='no' width='70'/>
</div>

Po kilku tekstach, wygląda że działa, więc może komuś to się jeszcze przyda :)
Swoją drogą system templetów Bloggera jest naprawdę ciekawy i umożliwia sporo.

Uruchomienie SyntaxHighlighter na Bloggerze

Po ostatnim poście o nowościach w JDK7 stwierdziłem, że konieczne jest dodanie jakiegokolwiek formatowania dla wklejanego kodu. Najbardziej popularnym rozwiązaniem chyba w tej chwili jest SyntaxHighlighterhttp://alexgorbatchev.com/wiki/SyntaxHighlighter. Rozwiązanie całkowicie oparte na JavaScripcie i css.
Jak go jednak uruchomić na platformie Blogger?
Tutaj znalazłem rozwiązanie: http://blog.cartercole.com/2009/10/awesome-syntax-highlighting-made-easy.html

1. W Ustawieniach wybierz Edytuj kod HTML
2. W okienku z kodem zjedź na dół i przed sekcją zamykającą </body> dodaj:

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script> 
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

3. Podjedź na górę i przed zamknięciem </head> dodaj css:

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 

I gotowe ;)
Teraz aby tego używać przy edycji postów należy wejść w "Edytuj kod HTML" i tam otoczyć swój kod znacznikami pre.

<pre class="brush:html">
To jest jakis kod html z tagami skonwertowanymi 
</pre>

UWAGA: Kod musi być zeskejpowany (jakiś polski odpowiednik?) czyli wszystkie znaki np ">" zamienione na & gt; Jedno z narzędzi do tego dostępnych online to np:
http://accessify.com/tools-and-wizards/developer-tools/quick-escape/default.php

Klasa css oznacza nam w jaki sposób biblioteka będzie kolorowała składnię. Dostępne są składnie dla większości języków programowania (java, jscript, ruby, groovy, c, c#, delphi, etc.) jak i innych przydatnych formatów (xml, sql, etc.).

Jeżeli chcemy pominąć konieczność konwertowania znaków specjalnych to możemy zamiast tagu pre użyć tagu script:

<script type="syntaxhighlighter" class="brush: java"><![CDATA[
//java kod nie skonwertowany
]]></script>

Można trochę przyśpieszyć ładowanie całej strony kasując nie potrzebne skrypty do języków których nie zamierzamy używać. Jeżeli dysponujemy też w miarę szybkim serwerem www warto pliki biblioteki zgrać na swój serwer i podmienić w kodzie templatki.