Sonntag, 16. November 2008

Blogger-Blogspot: Inhalte per iFrame anzeigen lassen

Ab und zu benutze ich ein iFrame um direkt den Inhalt einer Originalseite anzeigen zu lassen, anstatt nur einen Link zu einer Quelle zu posten.
Der Blog-Leser kann sich so sofort einen ersten Überblick verschaffen.

Zusätzlich sollte man besser noch einen Extra-Link zur Originalquelle im Post einfügen, da die Darstellung - trotz Schieberegler - nur eingeschränkt ist.

Man sollte sich als Laie durch das "wirre" HTML-Coding nicht abschrecken lassen, es wird wirklich nur mit Wasser gekocht *grins*.
Hinweis: Es wird auf die Originalseite zugegriffen, wenn auf dieser Seite sehr viele Widgets oder andere Tools eingebunden sind, erhöht sich die Ladezeit.


Hier verweise ich auf einen speziellen Wikipedia-Eintrag:



Der Code zum o.g. Beispiel:
Dem Parameter "src=" wird die anzuzeigende Quelle zugeordnet.
Die Parameter "width" und "height" bestimmen die Breite und Höhe des iFrames
Der Parameter "name" gibt dem iFrame einen Namen

<iframe src="http://de.wikipedia.org/wiki/Blogger.com" name="meinFenster01" width="500" height="400" marginheight="10" marginwidth="10" align="right">
<p>Ihr Browser kann leider keine eingebetteten Frames anzeigen</p>
</iframe>

Diese o.g. Form nutze ich in der Regel, ist also kein großer Akt. Den Code einfach in ein Post kopieren und die Parameter anpassen.


Zusätzlich kann man eine etwas erweiterte Form der iFrame-Nutzung anbieten, indem man noch Links hinzufügt, die beim anklicken, wechselweise im selben Fenster (iFrame) unterschiedliche Inhalte einblenden:



Anzeige eines bestimmten Kommentar innerhalb des Blogs

Amazon - auf ein bestimmtes Buch

Ein Schwachsinniges Blog ;-)



Der Parameter "href=" wird mit dem Link der Quelle belegt
Der Parameter "target=" gibt als Ausgabeort das bereits oben benannte iFrame an (meinFenster01, wer mehr als ein iFrame im selben Post benutzt, muss die iFrames unterschiedlich benennen
Zwischen <b> und </b> kommt der Linktext

<p>
<a href="http://noodlegei.blogspot.com/2008/11/blogspotcom-wie-man-gezielt-einen.html#comment-252765049777616230" target="meinFenster02"><b>Anzeige eines bestimmten Kommentar innerhalb des Blogs</b></a><br>

<a href="http://www.amazon.de/Einf%C3%BChrung-Webdesign-Standardkonforme-barrierefreie-erstellen/dp/3827324777/ref=sr_1_5?ie=UTF8&s=books&qid=1226776421&sr=8-5" target="meinFenster02"><b>Amazon - auf ein bestimmtes Buch</b></a><br>

<a href="http://schwachsinniges.blogspot.com" target="meinFenster02"><b>Ein Schwachsinniges Blog ;-)</b></a>
</p>


Hier noch mal zusammengefasst:
Den gesamten Code komplett markieren und im Post-Editor in das neue Post einfügen und die Parameter entsprechend anpassen:

<iframe src="http://de.wikipedia.org/wiki/Blogger.com" name="meinFenster01" width="500" height="400" marginheight="10" marginwidth="10" align="right">
<p>Ihr Browser kann leider keine eingebetteten Frames anzeigen</p>
</iframe>

<p>
<a href="http://noodlegei.blogspot.com/2008/11/blogspotcom-wie-man-gezielt-einen.html#comment-252765049777616230" target="meinFenster01"><b>Anzeige eines bestimmten Kommentar innerhalb des Blogs</b></a><br>

<a href="http://www.amazon.de/Einf%C3%BChrung-Webdesign-Standardkonforme-barrierefreie-erstellen/dp/3827324777/ref=sr_1_5?ie=UTF8&s=books&qid=1226776421&sr=8-5" target="meinFenster01"><b>Amazon - auf ein bestimmtes Buch</b></a><br>

<a href="http://schwachsinniges.blogspot.com" target="meinFenster01"><b>Ein Schwachsinniges Blog ;-)</b></a>
</p>

Hinweis: Es wird kein sogenannter doppelter Content mit dem iFrame erstellt!
Wer eine interessante Anwendung mittels iFrame für sich gefunden hat, kann sie gerne hier teilen.
NoodleGei.blogspot.com


Ähnliche Beiträge zum Thema/Kategorie:



12 Kommentar(e) zum Beitrag:

Günter hat gesagt…

cool, mein Blog in so nem iFrame zu sehen.
ich bleib lieber bei links, aber die Möglichkeit kommt gut rüber

Paul S. Rocka hat gesagt…

werd ich auch mal in nem Post einbauen, guter tipp

NoodleGei hat gesagt…

@Günter
darum geht es ja hier im Blog.
Möglichkeiten aufzuzeigen, Anregungen geben, ob diese dann auf dem eigenen Blog sinnvoll genutzt werden bzw. genutzt werden können, soll ja jeder selbst entscheiden.

@Paul
viel Erfolg beim Blog-Umbau ;-)

Paul S. Rocka hat gesagt…

Ich möchte gern die Kommentarfunktion von js-kit.com benutzen, da sie mir wg. ihrer vielen Einstellungsmöglichkeiten gut gefällt und mein Template wenig Chance auf optische Schönheit bietet. Das Original ist in Wordpress mit der Kommentarfunktion anders benutzbar. Die Einbettung in Posts funktioniert bei mir nicht, nur mit Extra-Seite.

Kannst du helfen?
Eine Einbettung unter meine Posts fände ich schön, nicht wie jetzt geregelt über Extralink zu Post mit Script-Einbettung.

sh. Link

NoodleGei hat gesagt…

Hallo Paul,

hast du es schon mit dieser Einbauhilfe von JS-Kit für Blogger-Blogs versucht:
JS-KIT Einbauhilfe-Generator für Blogger/Blogspot-Blogs

Dazu noch diesen Hinweis - siehe Punkt 12:
JS-KIT Einbauhilfe Blogger/Blogspot

Anmerkungen: Prüfe bitte vor Einbau von JS-Kit, ob du damit nicht gegen die Nutzungsbestimmungen von Blogger/Google verstößt!

Das Tool sieht gut aus - hatte ich mir vor ein paar Monaten schon mal angesehen.
Ich warte jedoch auf die Google-Variante
"Google Friends Connect".

Ob solchen Mini-Firmen wie JS-Kit nicht bald die
finanzielle Luft ausgeht - die haben erst vor paar Wochen neues Geld 3,8 Mill. $ von ihrem Geldgeber bekommen - steht noch auf einem anderen Blatt.
Die wollen auch Werbung in ihr System einsteuern. Zwar soll das nicht zwangsweise sein, aber wie die kostenfreie Version aussieht, weiß ich nicht.

Wenn du JS-Kit eingebaut hast, melde dich nochmal, will es mir dann mal anschauen.
Gruß
NoodleGei

NoodleGei hat gesagt…

Upps,
im zweiten Link habe ich die falsche URL mitgegeben, hier der korrekte Link für die manuelle Änderung im Blogger-Template (Vorlage), siehe Punkt 12:
JS-Kit Einbau-Tipp für Blogspot

Paul S. Rocka hat gesagt…

Erst einmal Danke für deine schnelle Kommentierung.

Die Anmerkung, dass JS-Kit bald nicht mehr ganz werbefrei ist, habe ich gestern auf deren Seite auch gelesen. Na, bleibt abzuwarten.

Ich probiere erst einmal aus wie es dann aussieht. In meinem Post "Vinyl + Stuetze"
ist dann doch die erhoffte Darstellung der abgegebenen Kommentare lt. meines Themes sichtbar.

Ich tue mich immer noch schwer mit der Darstellung der ähnlichen Beiträge in einem Post wie in deinem Blog. Das möchte ich auch, denn es schafft mehr Übersicht.

Vielleicht kannst du mit deinen Worten noch einmal irgendwann die Portierung von *blogspot auf eine eigene Domain erklären.

Ich werde es wohl mit einer Frame-Lösung für mich angehen.

Ein schöner externer Editor ist übrigens "wbloggar", falls du den nicht schon kennst.

NoodleGei hat gesagt…

Hi Paul, ich habe mir "deine" Vorlage auch mal auf einem Test-Blog installiert und die Änderung für die Anzeige der "Ähnlichen Beiträge" damit durchgeführt:

Siehe hier mein Test

Klappt einwandfrei, Zeitbedarf ca. 10 Sekunden ;-).

Hier mal ein Auszug aus dem Template-Code, gesucht habe ich nach data:post.body:

<span class='fn'><data:post.author/></span>
</b:if>
</span>
</p>
</b:if>

<div class='post-header-line-1'/>

<div class='entry'>
<div class='post-body entry-content'>
<p><data:post.body/></p>
<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/>

Schönen Gruß
NoodleGei

etikettetoeten hat gesagt…

Danke, das du die Mühe gemacht hast.

Ich habe es nun wiederholt probiert, String V

hinter die angegegebene Stelle kopiert.

Bei mir bleibt die Box leer.

Hier mein Link zu meinem Test :

--->

Bei mir keine Chance

Gruss
Paul

Paul S. Rocka hat gesagt…

komisch gerade nix geändert, jetzt geht es im test.

kommt blogger mit irgendwas manchmal nicht klar.

entschuldige, blinder alarm.

ich danke dir noch einmal

ich habe vor kurzem gesucht, ob man das favicon ändern kann...

dazu passend folgender artikel:

Links = -->

Kaett hat gesagt…

Habe gerade den iframe für mein Gästebuch in meinem Blog ausprobiert, funktioniert super!

Vielen Dank für die Erläuterung, lässt sich wirklich simpel einbauen.

Anonym hat gesagt…

wie mach ich eigentlich nen iframe bei blogger.com unsichtbar ohne dass so ein weißes viereck auftaucht?

Kommentar veröffentlichen

Kommentare bitte fair und im rechtlich erlaubten Rahmen verfassen!
Die Kommentare und ggf. hinterlassene URLs werden von mir überprüft. Kommentare die für blaue Pillchen, Glücksspiele, bestimmte Bilder/Videos, Abzocker-Dienste usw. werben, werden gelöscht.

Kommentare von SEO-Link-Builder sind ebenso unerwünscht!

In den Kommentare können die HTML-Tags für:
kursiv = <i>Testwort</i>
fett = <b>Testwort</b>
Links = <a href="http://www.deineURL.de/">Link Text</a>
genutzt werden. Einfach die o.g. Beispiele kopieren und mit den eigenen Werten ersetzen.

  © Blogger template Columnus by Ourblogtemplates.com 2008

Back to TOP