Blogger: Ähnliche Beiträge/Post zu einem Artikel anzeigen lassen

Update: Ich habe das Script noch um eine Hinweismeldung ergänzt, falls im Browser JavaScript nicht aktiviert ist.

Was Wordpress kann (Related Posts), kann Blogger auch ;-).
Ein Feature was ich schon länger in meinen Blogger-Blog einbauen wollte, habe ich nun auch gefunden. Es sind verschiedene Variationen bzw. Versionen davon im Umlauf.

Auch mit Blogger kann man sich bzw. dem Leser, Posts anzeigen lassen, die sich mit einem verwandten Thema (Kategorie) befassen und zu dem es mehrere Post gibt. Die Steuerung der Themen erfolgt über Kategorien oder wie es bei Blogger heißt, über Labels (Tags, Stichworte).

Wenn ihr sofort sehen wollt um was es geht, scrollt mal den Beitrag runter ;-).
Die Zeichen %3A kommen leider vom Doppelpunkt, das ich dem Label mitgegeben habe.

Diese Möglichkeit verwandte Beiträge unterhalb des einzelnen Post anzeigen zu lassen, wird u.a. mit JavaScript ermöglicht.
Die Lösung dazu habe ich von Hoctro und von Jackbook übernommen und ein wenig modifiziert. Die Links im Widget habe ich zwar entfernt, dafür lasse ich den Jungs jeweils einen Link über dieses Post - und meinem Test-Blog - zukommen.

Sehr schön finde ich auch, dass der Ursprungs-Code mitgeliefert wird und nicht nur ein Aufruf des JavaScript das auf einen anderen Server hinterlegt ist. So mag ich das ...
Was ist wenn der Server zu schwach für die Last von zu vielen Blogs ist, die ein solches Script eingebunden haben? Was ist, wenn der Programmierer das Script auf seinem Server einfach löscht?


Bitte vor Änderungen an eurem Template eine aktuelle Sicherungskopie machen!
Ich empfehle allerdings zuerst ein Test auf einem Extra-Test-Blog und eurem eingesetzten Template.

Im Template sucht man nach <data:post.body> bzw. data:post.body (falls die erste Variante nicht funktioniert) und fügt dahinter den folgenden Code ein:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='similiar'>
<!-- *****************Related Articles by Labels - Take Two****************** -->

<div class='widget-content'>
<h4>Weitere Beiträge zum Thema/Kategorie: </h4>
<div id='data2007' style='height:200px;overflow:auto;border:1px solid brown'/><br/><br/>


<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 6;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;


function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(decodeURI(label));
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
<noscript> Hier erscheint normalerweise ein Fenster mit dem Verweis auf Beiträge zum gleichen Thema/Stichwort.
Dazu wird aber JavaScript benötigt.
Deshalb bitte JavaScript in deinem Browser aktivieren!</noscript>
</div>

</div>
</b:if>
<!-- *****************Related Articles by Labels - Take Two****************** -->


Ich habe die Funktion mit verschiedenen aktuellen Browser getestet (IE7, FireFox3, Safari und Google-Chrome), Probleme mit der Anzeige konnte ich vorerst nicht feststellen.

An der Anzeige des Fenster in meinem Blog muss ich demnächst noch ein wenig feilen, damit es mit meiner NoodleGei-Gruß-Grafik besser harmoniert ;-).
Noch ein paar optische Änderungen an meinem Blog-Design hier und da und schon komme ich dem nahe, was ich mir so vorgestellt habe. Und das ohne Wordpress!

Blogger ist und bleibt für mich aufgrund seiner technischen Möglichkeit sehr viel zu verändern, eine Top-Empfehlung wenn man einen Free-Blog-Hoster nutzt.

Google, bitte weiter so!

Ähnliche Beiträge zum Thema/Kategorie: