Jimdo mag Blogspot

Die größte Herausforderung bei der Umstellung auf Jimdo war meine Anforderung, den existierenden Blogspot Account in die neue Struktur zu integrieren. Und wie man sieht, hat es geklappt. Nach viel Bastelei, die ich mit diesem Artikel vielen Menschen vielleicht ersparen kann.

Die grundlegende Idee: einen IFRAME auf einer Jimdo-Seite einbetten, der die Inhalte von Blogspot anzeigt. Entfernt man im Blog alle Formatierungen und passt sie an das gewählte Jimdo Layout an, dann ist optisch gar nicht zu merken (obwohl sich das als schwieriger erwiesen hat, als es zunächst den Anschein hat). Und wofür der Aufwand, wenn Jimdo selbst doch auch eine Blog-Funktion hat?

Nun, meine Seiten sind bereits bei Google indiziert. Es gibt zahlreiche Verweise auf die Einträge. Und der Aufwand, hunderte von Einträge zu kopieren, war mir zu groß. Außerdem spricht nichts gegen Blogspot. Könnte man dort ein Shopsystem einbauen, dann hätte ich meine Seite sogar so belassen. Ein weiterer Vorteil: ich brauche keinen der internen Links in den vielen veröffentlichten Posts abzuändern. Die können alle bestehen bleiben.

Die folgenden Erläuterungen erklären, wie sie Ihren Blogspot Blog in Jimdo integrieren können. Oder – ganz generell – wie sie überhaupt einen externen Content in Jimdo einbinden können.
Also … worauf muss ich achten, wenn der IFRAME mit den Blogspot Seiten in JIMDO platziert wird?

1. Woher weiß die Blogspot Seite, dass sie nicht wie gewöhnlich angezeigt, sondern in den IFRAME der Jimdo-Seite umgeleitet werden soll? Die Blogspot Seite wird ja quasi kastriert. Es gibt keine Menues mehr (die sind um den IFRAME herum in Jimdo), keine Navigation. Es muss also etwas in Blogspot integriert werden, was dies bewerkstelligt.
2. Der Inhalt des IFRAMES muss irgendwie dynamisch veränderbar sein, denn es ist ja möglich, dass jemand auf die Blogspotseite gelangt, ohne direkt die Blogspot URL wie etwa pkillert.blogspot.de eingegeben zu haben. Im IFRAME muss immer das angezeigt werden, was als Referenz angegeben wurde also zum Beispiel der Verweis auf einen konkreten Artikel. Wurde nichts angegeben, dann muss einfach immer die Startseite des Blogs in den IFRAME geladen werden.

Beides lässt sich mit Javascript bewerkstelligen. Ich habe allerdings eine ganze Weile gebraucht, bis ich die Lösung zusammengebastelt hatte. Das erste Javascript platzieren Sie in einem JavaScript/HTML-Widget irgendwo auf ihrer Blogspot-Seite. Wenn Sie keinen Titel in dem Widget vergeben, dann ist das völlig unsichtbar. Passen Sie die Einträge entsprechend Ihrem Jimdo-Account an:

<script type="text/javascript">
if(top.location.href !== 'http://ihr_jimdo_account.jimdo.com/jimdo_seite/' && 

 top.location.href !== 'http://ihr_jimdo_account.jimdo.com/jimdo_seite/index.htm')
{
  var the_url='';
  the_url=window.location.href;
    location.href = "http://ihr_jimdo_account.jimdo.com/?blog_source="+the_url; 
}
</script>

Erklärung zu diesem Script: Dieses Script prüft, ob die Top-Location der URL ihre Jimdo-Seite ist. Ist sie es nicht, dann ist davon auszugehen, dass die Blogspot-Seite direkt aufgerufen wurde. Das wollen wir nicht. Wir sagen also per Javascript: leite diese Seite auf die Jimdo-Seite um, wenn Du Dich nicht in dem IFRAME der Jimdo-Seite befindest. Wichtig ist hierbei der Teil, der in “the_url” gespeichert wird. Damit geben wir die komplette URL an Jimdo weiter, also auch, ob ein direkter Beitrag aufgerufen wurde.

Auf der Jimdo-Seite platzieren Sie dann per HTML Widget einen IFRAME. Diesem IFRAME geben Sie die ID “blog_source”. Damit steuern wir den IFRAME in dem nächsten Schritt an.

<p><iframe id="blog_source"src="http://ihre_blogspot_id.blogspot.de"name="blog_source"width="880" 
height="800" frameborder="0"></iframe></p>

Passen Sie die Einstellungen entsprechend Ihrem Blog an. Ebenso die Größe des IFRAMES.
Unter diesem IFRAME platzieren Sie ein weiteres HTML Widget auf ihrer Jimdo Seite. In dieses Widget packen Sie das nun folgende Javascript:

<script type="text/javascript">
        
    var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'), sParameterName,i;
    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
};
    var the_source='';
    var the_frame='';
    the_source = getUrlParameter('blog_source');    
    the_frame = document.getElementById('blog_source'); 
    if(typeof the_source == 'undefined'){the_source='http://ihre_blogspot_id.blogspot.de';}
    the_frame.src = the_source;
    
</script>

Erklärung zu diesem zweiten Script: Der obere Teil zerlegt das, was wir in “the_url” an die Jimdo-Seite übertragen haben. Es erkennt, dass beim Aufruf der Seite etwas über die Variable “blog_source” übertragen wurde. Das ist die URL, die in den IFRAME geladen werden soll.

Der untere Teil des Javascripts bewirkt genau diesen Ladevorgang. Dieser Teil checkt außerdem, ob dieser Parameter “blog_source” gar nicht definiert wurde, wenn z.B. jemand nur die Jimdo URL angegeben hat und gar nicht von Blogspot weitergeleitet wurde. Für diesen Fall wird “the_source” mit der gewöhnlichen Blogspot-Adresse gefüttert. Es wird also in jedem Fall der richtige Inhalt in den IFRAME geladen. Sie müssen nur “ihre_blogspot_id” mit der korrekten Bezeichnung ersetzen.

Das war´s …!

Abschließend noch ein paar Tipps, wie sie das Layout Ihrer Blogspot-Seite entschlacken.
Mir war der Abstand zwischen dem BlogTitel als Header und den ersten Einträgen viel zu groß. Diesen Abstand werden sie los, wenn sie Blogspot in den “Einstellungen –> Vorlage –> Anpassen –> Erweitert –> CSS hinzufügen” folgendes eingeben:

.header {padding-bottom: 0px; padding-top: 0px; height: 70px;}

Die 70px können natürlich variiert werden.

Außerdem kann an derselben Stelle folgender Code verwendet werden. Er bewirkt das alle Randabstände entfernt werden. Die braucht man in einem IFRAME eh nicht:

.content-inner {padding: 0px; margin-top: -40px !important;}