A Google Reader hasznosítása
Blogroll és Reader-ben megosztott elemek megjelenítése saját blogunkon.
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&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.