A Google Reader hasznosítása

Blogroll és Reader-ben megosztott elemek megjelenítése saját blogunkon.

2007. november 9.

A Google Reader egy rettentő addiktív dolog, ha az ember a feedolvasást választja a hírek beszerzésének kényelmes formájaként. De mi van akkor, ha az itt olvasott dolgokat szeretnénk másokkal is megosztani a saját honlapunkon? És ha a feliratkozásainkból szeretnénk egy blogrollt csinálni az oldalunkon? Természetesen a Google is gondolt erre, ezért mindkettőre van lehetőségünk.

Az alábbiakban szeretném bemutatni, hogy hogyan is valósíthatjuk meg ezeket a dolgokat, valamint mit tehetünk, ha nem elégszünk meg az alap lehetőségekkel.

Blogroll készítése

A Reader felületén kattintsunk az egyik feedünkre és a "Feed settings..." alatt adjunk hozzá egy új könyvtárat (New folder...). Legyen a neve mondjuk "blogroll".
Kellő óvatossággal kattintsuk meg a jobb felső sarokban található "Settings" linket és azon belül is a "Subscriptions" fülecskét.
Jelöljük ki azokat az oldalakat, amiket meg szeretnénk jeleníteni a blogrollunkban és a "More options..." lenyitható űrlapelem segítségével adjuk hozzá a "blogroll" taget.
Menjünk át a "Tags" fülre. A "blogroll" neveztű tag sorában kattintsuk meg azt a kis feed ikonocskát, mire megjelenik egy csomó minden egyéb link is abban a sorban.
A minket érdeklő dolog az "add a blogroll to your site" link. A megkattintás után előjön egy popup, ahol be tudjuk állítani a blogroll dobozunk stílusát.
Most már csak az van hátra, hogy a személyre szabott kódunkat, amit alatta egy textarea-ban legenerált nekünk, kimásoljuk és beillesszük a blogunkra egy megfelelő helyre.

De tényleg csak ennyi lenne? Nem tudom, de nekem nem igazán sikerült olyan színsémát találnom, ami igazán passzolt volna a bloghoz, szóval ideje valami alternatív megoldást keresni. A popupban két <script> tag található. Az első egy olyan JavaScript fájl, ami a megjelenítésért felelős, ezért minket nem is érdekel különösebben. Ám a második egy aranyos JSON fájl, ami egy callback függvénynek átadja a nekünk szükséges adatokat. Ennek a linknek is csak az első fele érdekes számunkra a "callback" részig. A callback utáni részt pedig írjuk át nemes egyszerűséggel updateBlogroll-ra. Ezek után valahogy így fog kinézni:

http://www.google.com/reader/public/javascript-sub/user/AZONOSÍTÓ/label/blogroll?callback=updateBlogroll

Így egy olyan JavaScript kódot fog legenerálni nekünk a Google, ami meghívja az updateBlogroll függvényt és átadja neki a Reader-ünkből származó adatokat. Így már csak annyi a dolgunk, hogy ezt az updateBlogroll függvényt megírjuk, az őt tartalamzó JS fájt betöltsük a honlapunk <head> részében, a fent említett, Reader által generált JS-t pedig az után a tag után, ahova a blogrollt be szeretnénk szúrni. Egy példa az updateBlogroll függvényre (a kód prototype.js-t használ):

function updateBlogroll(data)
{
    var parent = $('blogroll-list');
    parent.innerHTML = '';
    var len = data.items.length;
    for (var i = 0; i < len; ++i)
    {
        parent.insert('<li><a href="'+data.items[i].alternate.href+'">'+data.items[i].title+'</a></li>');
    }
}

Ha ezt a függvényt mondjuk egy update.js fájlba mentjük el, akkor a HTML kódunk valahogy így nézhet ki:

...
<script language="JavaScript" type="text/javascript" src="update.js"></script>
</head>
...
<ul id="blogroll-list">Blogroll betöltése...</ul>
<script language="JavaScript" type="text/javascript" src="http://www.google.com/reader/public/javascript-sub/user/AZONOSÍTÓ/label/blogroll?callback=updateBlogroll"></script>
...

Feed elemek megosztása

Hasonló módon érhetjük el azt is, ha szeretnénk az általunk érdekesnek talált linkeket megosztani a blogunk látogatóival. A Reader beállításainál a "Tags" fülön található egy "Your shared items" (ide úgy kerülnek bele az elemek, ha "Expanded view"-ban Shift+S-t nyomunk egy bejegyzésen vagy megnyomjuk a "Share" linket az elem alján. "List view"-ban csak az utóbbira van lehetőségünk, ha már kinyitottunk egy elemet). Ennek a sorában kattintsuk meg az "add a clip to your site" linket. Egy hasonló popup ugrott fel, mint a blogroll esetében is. Ha nem szeretnénk saját formázást használni akkor a megfelelő beállítások elvégzése után a textarea-ban található kód beillesztésével végeztünk is. Ellenkező esetben ismét a második <script> tagben lévő linket kell kimásolnunk. A callback után most írjuk az updateLinks függvénynevet, valahogy így:

http://www.google.com/reader/public/javascript/user/AZONOSÍTÓ/state/com.google/broadcast?n=15&amp;callback=updateLinks

Az n utáni szám átírásával tudjuk meghatározni, hogy hány darab elemet kapjunk vissza. Az updateLinks függvény is hasonlóan fog kinézni, mint az előző updateBlogroll:

function updateLinks(data)
{
    var parent = $('link-list');
    parent.innerHTML = '';
    var len = data.items.length;
    for (var i = 0; i < len; ++i)
    {
        parent.insert('<li><a href="'+data.items[i].alternate.href+'">'+data.items[i].title+'</a></li>');
    }
}

Természetesen nem csak ennyi adatot kapunk meg az elemekről. Nézzünk pár fontosabbat a teljesség igénye nélkül (a továbbiakért érdemes a kapott fájlba belenézni):

data.items[i].published
A bejegyzés publikálásának időpontja Unix timestamp formában.
data.items[i].summarySnippet
A bejegyzés rövid, összefoglaló szövege.
data.items[i].origin.title
Az oldal neve, ahol megjelent ez a bejegyzés.
data.items[i].origin.htmlUrl
Az oldal címe.

Körülbelül ennyi lenne a Google Reader pár hasznos felhasználási módjáról. A jobb oldali sáv "Linkek" és "Blogroll" részében látható a működő példa.

deadlime