Update: teodora jóvoltából a freeblog.hu közössége is okosabb lett, köszönöm!
Az API megjelenése után nem sokkal már meg is jelent az első Wordpress plugin, de mint tudjuk van élet a WP-n túl is... Pollner pedig volt olyan kedves és lehetőséget adott rá, hogy Médiablog kísérleti alanya lehessen egy sima javascript-es beépítőkód tesztelésének. Miután sikerült nagyjából belőni a dolgot, szerettem volna a (sajnos nagyon ritkán frissülő és kutyát nem érdeklő) privát blogomban is felhasználni, ami történetesen a blog.hu felségjezésű birodalom része. Itt kezdődtek a gondok (ha a végső megoldásra vagy kiváncsi, akkor irány a poszt vége)...
Nem vagyok nagy sablon buherátor, de egyből sikerült kiszúrnom hogy az általam használt alapsablonnál (WP Brown) nem igazán van lehetőség a javascript hivatkozás beszúrására úgy, hogy csak permalinkes oldalon jelenítse meg az adott bejegyzéshez tartozó megosztókat és hozzászólásokat. Gyors levél a support felé és szerencsére a válasz is gyorsan érkezett (külön dicséret, köszönet és hála a rapid reakcióért nekik!): csak akkor próbáljak kiiratni hasonló dolgokat, ha a DOM-ban ott figyel a „feedback_container” azonosítójú elem. Bingó! Ezután már percek kérdése volt megoldani, hogy beszúrja a tartalomba a kívánt elemeket. Viszont először a <blhc:postloop> belesejébe tettem a js hivatkozást, ennek hatására a főoldali lista X alkalommal (minden egyes bejegyzés esetén) lekérte a szervertől a javascript állományt, ráadásul windows.onload-ot használtam a beillesztés előtt. Nem szép…
Gondoltam ha már prototype keretrendszert használ a blog.hu, akkor megpróbálkozom DomReady kiterjesztéssel, de Explorer alatt egyszerűen képtelen voltam normálisan működésre bírni. Tovább nehezítette a helyzetemet, hogy pl. a sablon változtatása után Explorer alatt egyszerűen nem jelentek meg a változások. Átmeneti állományok stb. törlése sem segített, workaround megoldásnak nagyjából az volt használható, ha váltogattam a különböző sablonok között. Na jó, akkor búcsuzzunk el a prototype használatától, welcome jQuery! Persze ez sem ment zökkenőmentesen, hiába próbáltam külső állományból behúzni a jQuery-t, összeakadtak a prototype-al a jQuery.noConflict() ellenére. A végső megoldást az jelentette, hogy a külső hivatkozás helyett bemásoltam a jQuery csomagolt változatát a saját szkriptembe és láss csodát, működik és sikerült végre kiváltanom a window.onload-ot a hőn áhított jQuery(document).ready-vel.
A beépítés menete saját blog.hu sablonodba elég egyszerű: másold be a
<script language="javascript" type="text/javascript" src="http://turulmeme.com/api/widget/bloghu.js"></script>
hivatkozást a sablonba (nálam a <blhc:postloop> tag elé került, neked is ezt javasolnám). A formázást pedig természetesen a CSS szerkesztésével tudod tökéletesre fejleszteni, íme az én sablonomhoz tartozó rész:
/* TurulMeme */
#turulmeme
{
font-size:12px;
padding-bottom: 20px;
}
#turulHeader
{
color:#E2AF0D;
font-size:15px;
font-weight:normal;
letter-spacing:0;
padding-bottom:10px;
margin-bottom:6px;
}
#turulmeme a.sharer, #turulmeme a.turulSharer
{
color:#E6A487;
font-family:'Georgia',Lucida,Verdana;
font-size:12px;
font-weight:bold;
text-decoration:none;
}
#turulmeme a.sharer:hover, #turulmeme a.turulSharer:hover
{
background-color: #fff;
text-decoration: underline;
}
#turulmeme img.profilePic
{
border-width:0;
margin:0;
padding-top:0;
vertical-align:bottom;
width: 16px;
height: 16px;
}
#turulmeme .sharers
{
overflow:hidden;
}
#turulmeme .sharers .sharersHeader
{
color:#666666;
font-weight: bold;
float:left;
font-family:'Georgia',Lucida,Verdana;
font-size:12px;
}
#turulmeme a.turulSharer
{
padding: 0px 10px;
float:left;
}
#turulmeme .tip-box
{
margin-top: 8px;
position: relative;
}
#turulmeme .tip-box .arr
{
background-repeat: no-repeat;
font-size: 1px;
height: 100%;
left: 10px;
position: absolute;
top: -11px;
}
#turulmeme .tip-left .c
{
margin-left: 20px;
}
#turulmeme .tip-left .arr
{
background-image: url(http://turulmeme.com/images/tip-arrow-top.gif);
background-position: left bottom;
background-repeat: no-repeat;
padding-left: 26px;
}
#turulmeme .entry-annotation
{
color: #666666;
margin: 15px 0 10px; /*max-width:565px;*/
}
#turulmeme .entry-annotation-author-name
{
font-size: 13px;
font-weight: bold;
}
#turulmeme .entry-annotation-body
{
font-size: 12px;
font-style: italic;
line-height: 115%;
margin: 0.3em;
}
#turulmeme .entry-annotation-author-container
{
font-weight: bold;
padding: 0.3em 0.3em 0.3em 0;
white-space: nowrap;
}
#turulmeme .entry-annotation-profile-image
{
border: 1px solid #CCCCCC;
height: 18px;
margin-right: 0.3em;
width: 18px;
}
#turulmeme .entry-annotation-box-container
{
width: 100%;
}
#turulmeme .entry-annotation-box .round-box
{
width: auto;
}
#turulmeme .entry-annotation-box .round-box .c
{
background-color: #E1ECFE !important;
width: auto;
}
#turulmeme .entry-annotation-box .round-box .s
{
background-color: #C2D9FF !important;
}
#turulmeme .entry-annotation-box .round-box .tl, #turulmeme .entry-annotation-box .round-box .tr, #turulmeme .entry-annotation-box .round-box .bl, #turulmeme .entry-annotation-box .round-box .br
{
height: 1px;
width: 1px;
}
#turulmeme .entry-annotation .tip-left .arr
{
background-image: url(http://turulmeme.com/images/annotation-tip-arrow-top.gif);
background-position: 0 3px;
padding-left: 9px;
}
#turulmeme .entry-annotation .tip-left .c
{
margin-left: 8px;
}
#turulmeme .round-box
{
empty-cells: show;
}
#turulmeme .round-box td
{
margin: 0;
padding: 0;
}
#turulmeme .round-box .s
{
font-size: 1px;
line-height: 1px;
}
#turulmeme.round-box .s, #turulmeme .round-box .c
{
background-color: #CCCCCC;
}
#turulmeme .round-box .tl, #turulmeme .round-box .tr, #turulmeme .round-box .bl, #turulmeme .round-box .br
{
background-repeat: no-repeat;
height: 3px;
width: 3px;
}
#turulmeme .round-box .tl
{
background-image: url(http://turulmeme.com/images/corner_tl.gif);
background-position: left top;
}
#turulmeme .round-box .tr
{
background-image: url(http://turulmeme.com/images/corner_tr.gif);
background-position: right top;
}
#turulmeme .round-box .bl
{
background-image: url(http://turulmeme.com/images/corner_bl.gif);
background-position: left bottom;
}
#turulmeme .round-box .br
{
background-image: url(http://turulmeme.com/images/corner_br.gif);
background-position: right bottom;
}
#turulmeme .round-box .sq
{
background-image: none;
}
#turulmeme .entry-annotation
{
margin-top: 0;
}
#turulmeme .entry-annotation-body
{
margin: 0.1em 0.5em;
}
#turulmeme .annotations
{
padding:4px;
}
/* /TurulMeme */