Folgen-Buttons bei einem Blogger Blogspot Blog einbinden

blogger blogspotWie bindet man einen Folgen-Button für Twitter bei Blogger Blogspot ein? Wie bindet man einen Folgen-Button für Facebook bei Blogger Blogspot ein? Wie bindet man einen Folgen-Button für Google+ bei Blogger Blogspot ein?

Wie bindet man einen RSS-Feed-Button bei Blogger Blogspot ein? Wie bindet man einen eMail-Button bei Blogger Blogspot ein? Wie bindet man einen Flattr-Button bei Blogger Blogspot ein?

Es gibt zahlreiche Möglichkeiten und Designvarianten, Buttons zum Folgen auf sozialen Netzwerken oder zum Abonnieren per Feed oder eMail in einem Blogger Blogspot zu integrieren.

Häufig werden diese Buttons in unterschiedlichen Größen angeboten und es gestaltet sich ein wenig schwierig ein einheitliches Design zu erstellen. In diesem Beispiel wird ein einfaches und solides Design vorgestellt, wie es auch auf diesem Blog zu sehen ist.

Folgen Button Twitter Facebook Google* RSS Newsfeed eMail Blogger Blogspot


Folgen-Buttons, RSS-Feed-Button und eMail-Button bei Blogspot einbinden

  • bei blogger.com einloggen und entsprechenden Blog aufsuchen
  • Layout >> Gadget hinzufügen >> bei HTML/JavaScript auf das blaue Kreuz klicken, es öffnet sich ein Fenster, dort wird der folgende Code eingefügt >> speichern >> Layout speichern (oranger Button oben rechts)
  • Blog neu laden und die neuen Buttons sollten zu sehen und funktionstüchtig sein

Code:

<div align="center"><a style="margin-left: 5px; margin-right: 5px;" title="BloggerLatein auf Facebook folgen" href="http://www.facebook.com/pages/BloggerLatein-Blogger-Blogspot-Tipps-und-Tricks/283692315026862" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYA9_vnQfz24syq1lvd4gECp0N5cy-wUoG_N_QkVx1xJpZmxTekMosIBfoI0OgA2t5sd0B-KdIxmdK-SsqK0FBSqn2Lnqb2ZXHBWnpjIysWhIDAcHKWzk8dJyNmTurDvVMAJHG7d10du1R/" width="24" height="24" alt="BloggerLatein auf Facebook folgen" border="0" /></a><a style="margin-left: 5px; margin-right: 5px;" title="BloggerLatein auf Twitter folgen" href="http://twitter.com/BloggerLatein" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9HdRW51K2C5IKM1XcieH2fanTg7Dn2JiLXSYIcA01nKrvxWEB0dAAnmZduIO6y2jvuE-Agj2I1w5X8FzBlyfaxqtlmI0FAMkbBdv779N2kJwgOtRPsdZlp-_VC60Z-OnQQrfNqxaq8uSR/" width="24" height="24" alt="BloggerLatein auf Twitter folgen" border="0" /></a><a style="margin-left: 5px; margin-right: 5px;" title="BloggerLatein auf Google+ folgen" href="https://plus.google.com/115524128076631144939" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf4sm5jJA2Jef2WWDJwVBl6Kz_sNsgmwQIrzI0Hkr7MAPjiepDl_hIQDaGmkCuAjPP1qpzEjIfQAC3c4bnyHN9Y_edexSLq1Y3Iz_fXAYag8Ehc77zObp_1QpFd4XUBMYC7p3hyC_h9j-v/" width="24" height="24" alt="BloggerLatein auf Google+ folgen" border="0" /></a><a style="margin-left: 5px; margin-right: 5px;" title="Newsfeed abonnieren" href="http://feeds.feedburner.com/Bloggerlatein" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLPzyF7cztSyhKjyOoe10RKzyJex0r-LfnwP4aUY27Br1LJ3mIUl6xYxAFy0W03PUcZd_B3yTnULJvlAaiuXFe7roAdsI0T4329EihK2gZ-hdtgqYcKzAyG-A5IXV6-XY0INPLvslbmyrG/" width="24" height="24" alt="Newsfeed abonnieren" border="0" /></a><a style="margin-left: 5px; margin-right: 5px;" title="Die neuesten Artikel per eMail erhalten" href="http://feedburner.google.com/fb/a/mailverify?uri=Bloggerlatein&loc=de_DE" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTOXpfbXAGHMzIRPZKySHVc7EdizvGifJuFckwXiAJlzEZoSbITxRV0pZdARvUUmpS2YTNeO2qHC8ekLv9_wUljgOq1TICL1voxHhHi0oMlIKfD3WGKFu1S5Ok1OCVPVTLqnMtOCHMeZL9/" width="24" height="24" alt="Die neuesten Artikel per eMail erhalten" border="0" /></a><a style="margin-left: 5px; margin-right: 5px;" title="Flattr this" href="http://flattr.com/thing/482810" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicSSDPZP98eEHfO_A6Sbf5Vtr3eKs6mweUqb2SRia8o37fJT4-K6FI7gjA0oLH_Yf2EVeeytcm2ZApx3-r3pOHsZdpgqeje45YmjYe-tGXZ2Fc-p-4_O59fLRblPlup4iF3aJ_413nrbKD/" width="24" height="24" alt="Flattr this" border="0" /></a></div>

Wie ist dieser Code aufgebaut und wie funktioniert er?

<div align="center">

Fügt man den Code in der Seitenbar ein werden die Buttons zentriert, sprich in der Mitte der Seitenbar platziert (center). Sollen die Buttons links platziert werden, ersetzt man center durch left. Sollen die Buttons rechts ausgerichtet werden, dann wird center durch right ersetzt.

Wie gleich zu sehen sein wird, folgt der Aufbau des Codes einem Schema. Für jeden Button wird das Bild, der entsprechende Link und die Anordnung (Layout) definiert.

Facebook-Button

<a style="margin-left: 5px; margin-right: 5px;" title="BloggerLatein auf Facebook folgen" href="http://www.facebook.com/pages/BloggerLatein-Blogger-Blogspot-Tipps-und-Tricks/283692315026862" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYA9_vnQfz24syq1lvd4gECp0N5cy-wUoG_N_QkVx1xJpZmxTekMosIBfoI0OgA2t5sd0B-KdIxmdK-SsqK0FBSqn2Lnqb2ZXHBWnpjIysWhIDAcHKWzk8dJyNmTurDvVMAJHG7d10du1R/" width="24" height="24" alt="BloggerLatein auf Facebook folgen" border="0" /></a>

  • margin-left: 5px – der Abstand des Facebook-Buttons zur linken Seite mit 5px
  • margin-right: 5px - der Abstand des Facebook-Buttons zur rechten Seite mit 5px
  • title="BloggerLatein auf Facebook folgen" und alt="BloggerLatein auf Facebook folgen" dient der Beschriftung der Buttons, fährt man mit dem Maus Cursor darüber dann wird ein Titel angezeigt; beide Zeilen können nach Wunsch verändert bzw. ersetzt werden
  • href=”http://www.facebook.com/pages/BloggerLatein-Blogger-Blogspot-Tipps-und-Tricks/283692315026862” hier fügt man den Link zu seinem Facebook Profil oder zu seiner Facebook Seite ein (aus der Adresszeile des Browsers kopieren)
  • target="_blank" öffnet den Link zum verlinkten Profil bzw. zur verlinkten Webseite in einem neuen Fenster im Browser, wenn man auf den Button klickt; wenn man das nicht möchte, kann das Stück gelöscht werden
  • img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYA9_vnQfz24syq1lvd4gECp0N5cy-wUoG_N_QkVx1xJpZmxTekMosIBfoI0OgA2t5sd0B-KdIxmdK-SsqK0FBSqn2Lnqb2ZXHBWnpjIysWhIDAcHKWzk8dJyNmTurDvVMAJHG7d10du1R/” ist der Link zum Facebook-Button, wer einen anderen Button will, setzt dort einfach seine URL (Webadresse) zum Bild ein; man kann diesen Link auch kopieren, in die Adresszeile des Browser einfügen, den Button herunterladen, bei Blogspot in einen neuen Post hochladen (der Post muss nicht veröffentlicht werden, weil das Bild nach dem Hochladen automatisch im Picasa-Webalbum abgelegt wird), bei Editor auf HTML klicken und den ersten Link (das ist die neue URL zum Button) kopieren und im oben dargestellten Code einsetzen (der Post kann danach gelöscht werden, weil der Button nun im eigenen Picasa-Webalbum abgelegt wurde)
  • width="24" – der Button ist 24px breit
  • height="24" – der Button ist 24px hoch
  • border="0" es wird kein Rahmen um den Button angelegt

Twitter-Button

<a style="margin-left: 5px; margin-right: 5px;" title="BloggerLatein auf Twitter folgen" href="http://twitter.com/BloggerLatein" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9HdRW51K2C5IKM1XcieH2fanTg7Dn2JiLXSYIcA01nKrvxWEB0dAAnmZduIO6y2jvuE-Agj2I1w5X8FzBlyfaxqtlmI0FAMkbBdv779N2kJwgOtRPsdZlp-_VC60Z-OnQQrfNqxaq8uSR/" width="24" height="24" alt="BloggerLatein auf Twitter folgen" border="0" /></a>

  • margin-left: 5px – der Abstand des Twitter-Buttons zur linken Seite mit 5px
  • margin-right: 5px - der Abstand des Twitter-Buttons zur rechten Seite mit 5px
  • title="BloggerLatein auf Twitter folgen" und alt="BloggerLatein auf Twitter folgen" dient der Beschriftung der Buttons, fährt man mit dem Maus Cursor darüber, dann wird ein Titel angezeigt; beide Zeilen können nach Wunsch verändert bzw. ersetzt werden
  • href="http://twitter.com/BloggerLatein" hier fügt man den Link zu seinem Twitter Profil ein (aus der Adresszeile des Browsers kopieren)
  • target="_blank" öffnet den Link zum verlinkten Profil in einem neuen Fenster im Browser, wenn man auf den Button klickt; wenn man das nicht möchte, kann das Stück gelöscht werden
  • img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9HdRW51K2C5IKM1XcieH2fanTg7Dn2JiLXSYIcA01nKrvxWEB0dAAnmZduIO6y2jvuE-Agj2I1w5X8FzBlyfaxqtlmI0FAMkbBdv779N2kJwgOtRPsdZlp-_VC60Z-OnQQrfNqxaq8uSR/” ist der Link zum Twitter-Button, wer einen anderen Button will, setzt dort einfach seine URL (Webadresse) zum Bild ein; man kann diesen Link auch kopieren, in die Adresszeile des Browser einfügen, den Button herunterladen, bei Blogspot in einen neuen Post hochladen (der Post muss nicht veröffentlicht werden, weil das Bild nach dem Hochladen automatisch im Picasa-Webalbum abgelegt wird), bei Editor auf HTML klicken und den ersten Link (das ist die neue URL zum Button) kopieren und im oben dargestellten Code einsetzen (der Post kann danach gelöscht werden weil der Button nun im eigenen Picasa-Webalbum abgelegt wurde)
  • width="24" – der Button ist 24px breit
  • height="24" – der Button ist 24px hoch
  • border="0" es wird kein Rahmen um den Button angelegt

Google Plus-Button

<a style="margin-left: 5px; margin-right: 5px;" title="BloggerLatein auf Google+ folgen" href="https://plus.google.com/115524128076631144939" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf4sm5jJA2Jef2WWDJwVBl6Kz_sNsgmwQIrzI0Hkr7MAPjiepDl_hIQDaGmkCuAjPP1qpzEjIfQAC3c4bnyHN9Y_edexSLq1Y3Iz_fXAYag8Ehc77zObp_1QpFd4XUBMYC7p3hyC_h9j-v/" width="24" height="24" alt="BloggerLatein auf Google+ folgen" border="0" /></a>

  • margin-left: 5px – der Abstand des Google Plus-Buttons zur linken Seite mit 5px
  • margin-right: 5px - der Abstand des Google Plus-Buttons zur rechten Seite mit 5px
  • title="BloggerLatein auf Google+ folgen" und alt="BloggerLatein auf Google+ folgen" dient der Beschriftung der Buttons, fährt man mit dem Maus Cursor darüber dann wird ein Titel angezeigt; beide Zeilen können nach Wunsch verändert bzw. ersetzt werden
  • href="https://plus.google.com/115524128076631144939" hier fügt man den Link zu seinem Google Plus Profil oder zu seiner Google Plus Seite ein (aus der Adresszeile des Browsers kopieren)
  • target="_blank" öffnet den Link zum verlinkten Profil bzw. zur verlinkten Webseite in einem neuen Fenster im Browser, wenn man auf den Button klickt; wenn man das nicht möchte, kann das Stück gelöscht werden
  • img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf4sm5jJA2Jef2WWDJwVBl6Kz_sNsgmwQIrzI0Hkr7MAPjiepDl_hIQDaGmkCuAjPP1qpzEjIfQAC3c4bnyHN9Y_edexSLq1Y3Iz_fXAYag8Ehc77zObp_1QpFd4XUBMYC7p3hyC_h9j-v/” ist der Link zum Google Plus-Button, wer einen anderen Button will setzt dort einfach seine URL (Webadresse) zum Bild ein; man kann diesen Link auch kopieren, in die Adresszeile des Browser einfügen, den Button herunterladen, bei Blogspot in einen neuen Post hochladen (der Post muss nicht veröffentlicht werden, weil das Bild nach dem Hochladen automatisch im Picasa-Webalbum abgelegt wird), bei Editor auf HTML klicken und den ersten Link (das ist die neue URL zum Button) kopieren und im oben dargestellten Code einsetzen (der Post kann danach gelöscht werden, weil der Button nun im eigenen Picasa-Webalbum abgelegt wurde)
  • width="24" – der Button ist 24px breit
  • height="24" – der Button ist 24px hoch
  • border="0" es wird kein Rahmen um den Button angelegt

Newsfeed-Button

<a style="margin-left: 5px; margin-right: 5px;" title="Newsfeed abonnieren" href="http://feeds.feedburner.com/Bloggerlatein" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLPzyF7cztSyhKjyOoe10RKzyJex0r-LfnwP4aUY27Br1LJ3mIUl6xYxAFy0W03PUcZd_B3yTnULJvlAaiuXFe7roAdsI0T4329EihK2gZ-hdtgqYcKzAyG-A5IXV6-XY0INPLvslbmyrG/" width="24" height="24" alt="Newsfeed abonnieren" border="0" /></a>

  • margin-left: 5px – der Abstand des Newsfeed-Buttons zur linken Seite mit 5px
  • margin-right: 5px - der Abstand des Newsfeed-Buttons zur rechten Seite mit 5px
  • title="Newsfeed abonnieren" und alt="Newsfeed abonnieren" dient der Beschriftung der Buttons, fährt man mit dem Maus Cursor darüber dann wird ein Titel angezeigt; beide Zeilen können nach Wunsch verändert bzw. ersetzt werden
  • href=http://feeds.feedburner.com/Bloggerlatein” hier fügt man den Link zu seinem Feed ein
  1. Wer für seinen Feed eine Weiterleitung zu Feedburner eingerichtet hat, kann dieses Format href=http://feeds.feedburner.com/Bloggerlatein” nutzen und durch seinen eigenen Link ersetzen.
  2. Wer nichts an seinem Feed geändert hat benutzt den Standard-Link. Bei Blogger Blogspot Blogs sind die Feeds bereits integriert und auch der Aufbau der URL (Webadresse) folgt einem Muster. Man kann zwischen 2 vorgegeben Formaten wählen, welches man benutzt ist Ansichtssache. Der Vollständigkeit halber werden beide Formate angeführt:

        RSS: http://bloggerlatein.blogspot.com/feeds/posts/default?alt=rss

        Atom: http://bloggerlatein.blogspot.com/feeds/posts/default

        Die blau markierte Stelle wird mit der eigenen Blogadresse ersetzt.

Wenn der Feed nicht angezeigt werden sollte: Einstellungen >> Sonstiges >> Website-Feed >> Blogposts-Feed >> Vollständig >> Einstellungen speichern (oranger Button oben rechts)

  • target="_blank" öffnet den Link zum verlinkten Profil bzw. zur verlinkten Webseite in einem neuen Fenster im Browser, wenn man auf den Button klickt; wenn man das nicht möchte, kann das Stück gelöscht werden
  • img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLPzyF7cztSyhKjyOoe10RKzyJex0r-LfnwP4aUY27Br1LJ3mIUl6xYxAFy0W03PUcZd_B3yTnULJvlAaiuXFe7roAdsI0T4329EihK2gZ-hdtgqYcKzAyG-A5IXV6-XY0INPLvslbmyrG/" ist der Link zum Newsfeed-Button, wer einen anderen Button will, setzt dort einfach seine URL (Webadresse) zum Bild ein; man kann diesen Link auch kopieren, in die Adresszeile des Browser einfügen, den Button herunterladen, bei Blogspot in einen neuen Post hochladen (der Post muss nicht veröffentlicht werden weil das Bild nach dem Hochladen automatisch im Picasa-Webalbum abgelegt wird), bei Editor auf HTML klicken und den ersten Link (das ist die neue URL zum Button) kopieren und im oben dargestellten Code einsetzen (der Post kann danach gelöscht werden, weil der Button nun im eigenen Picasa-Webalbum abgelegt wurde)
  • width="24" – der Button ist 24px breit
  • height="24" – der Button ist 24px hoch
  • border="0" es wird kein Rahmen um den Button angelegt

eMail-Button

<a style="margin-left: 5px; margin-right: 5px;" title="Die neuesten Artikel per eMail erhalten" href="http://feedburner.google.com/fb/a/mailverify?uri=Bloggerlatein&loc=de_DE" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTOXpfbXAGHMzIRPZKySHVc7EdizvGifJuFckwXiAJlzEZoSbITxRV0pZdARvUUmpS2YTNeO2qHC8ekLv9_wUljgOq1TICL1voxHhHi0oMlIKfD3WGKFu1S5Ok1OCVPVTLqnMtOCHMeZL9/" width="24" height="24" alt="Die neuesten Artikel per eMail erhalten" border="0" /></a>

  • margin-left: 5px – der Abstand des Newsfeed-Buttons zur linken Seite mit 5px
  • margin-right: 5px - der Abstand des Newsfeed-Buttons zur rechten Seite mit 5px
  • title="Die neuesten Artikel per eMail erhalten" und alt="Die neuesten Artikel per eMail erhalten" dient der Beschriftung der Buttons, fährt man mit dem Maus Cursor darüber, dann wird ein Titel angezeigt; beide Zeilen können nach Wunsch verändert bzw. ersetzt werden
  • href="http://feedburner.google.com/fb/a/mailverify?uri=Bloggerlatein&loc=de_DE"  hier fügt man den Link zum Formular für ein eMail-Abonnement ein
  1. Wer für seinen Feed eine Weiterleitung zu Feedburner eingerichtet hat, kann dieses Format href="http://feedburner.google.com/fb/a/mailverify?uri=Bloggerlatein&loc=de_DE" nutzen und durch seinen eigenen Link ersetzen.
  2. Wer nichts an seinem Feed geändert hat, müsste nun das Gadget Per E-Mail folgen seinem Blog hinzufügen. Dann leitet Blogger.com die Anfrage zu Feedburner, und das Formular für ein eMail-Abonnement wird von Feedburner bereit gestellt. Es gibt hier also keinen Link zu diesem Formular, weil oben genanntes Gadget erst hinzugefügt werden und die Freigabe dadurch aktiviert werden muss.
  3. Wer aber unbedingt diesen Link will kann noch etwas anderes probieren. Bei Blogger.com einloggen, einen neuen Tab im Browser öffnen und die Webseite von Feedburner besuchen. Da Feedburner ebenso ein Service von Google ist, wird nun auf der Anmeldeseite von Feedburner die eMail-Adresse übernommen, mit der man in seinem Blogger Dashboard eingeloggt ist. Bei Passwort gibt man das gleiche Passwort ein wie wenn man sich bei Blogger.com einloggen würde. Hier sollten sich nun die Feeds für die Blogs die im Blogger Dashboard gelistet sind wieder finden. Wenn ein ganz bestimmter Feed fehlt, dann den Feedburner-Link des betroffenen Blogs unter Layout >> Gadgets hinzufügen >> Per E-Mail folgen >> Feedburner-URL kopieren und in einem neuen Browsertab öffnen. Da der Feed nun zumindest einmal aufgerufen wurde, sollte er nach einem erneuten Laden der Feedburner Webseite dann auch in der Übersicht erscheinen. Dann klickt man auf den entsprechenden Feed Titel (eigentlich der Blog Titel), für den man das eMail-Abonnement einrichten möchte. Im Menü auf Publicize >> Email Subscriptions (links) und auf den großen Button Activate klicken. Auf der folgenden Seite die Sprache einstellen und den Link aus der unteren Box kopieren, das sollte dann so aussehen: http://feedburner.google.com/fb/a/mailverify?uri=Bloggerlatein&loc=de_DE           

    Bei Bloggerlatein sollte man nun seinen eigenen Blog Titel vorfinden. Diesen Link im oben angeführten Code einsetzen und das Formular zum eMail-Abonnement sollte sich beim Anklicken des eMail-Buttons öffnen. Etwas kompliziert aber machbar.

  • target="_blank" öffnet den Link zum verlinkten Profil bzw. zur verlinkten Webseite in einem neuen Fenster im Browser, wenn man auf den Button klickt; wenn man das nicht möchte kann das Stück gelöscht werden
  • img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTOXpfbXAGHMzIRPZKySHVc7EdizvGifJuFckwXiAJlzEZoSbITxRV0pZdARvUUmpS2YTNeO2qHC8ekLv9_wUljgOq1TICL1voxHhHi0oMlIKfD3WGKFu1S5Ok1OCVPVTLqnMtOCHMeZL9/"  ist der Link zum eMail-Button, wer einen anderen Button will, setzt dort einfach seine URL (Webadresse) zum Bild ein; man kann diesen Link auch kopieren, in die Adresszeile des Browser einfügen, den Button herunterladen, bei Blogspot in einen neuen Post hochladen (der Post muss nicht veröffentlicht werden, weil das Bild nach dem Hochladen automatisch im Picasa-Webalbum abgelegt wird), bei Editor auf HTML klicken und den ersten Link (das ist die neue URL zum Button) kopieren und im oben dargestellten Code einsetzen (der Post kann danach gelöscht werden, weil der Button nun im eigenen Picasa-Webalbum abgelegt wurde)
  • width="24" – der Button ist 24px breit
  • height="24" – der Button ist 24px hoch
  • border="0" es wird kein Rahmen um den Button angelegt

Flattr-Button

<a style="margin-left: 5px; margin-right: 5px;" title="Flattr this" href="http://flattr.com/thing/482810" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicSSDPZP98eEHfO_A6Sbf5Vtr3eKs6mweUqb2SRia8o37fJT4-K6FI7gjA0oLH_Yf2EVeeytcm2ZApx3-r3pOHsZdpgqeje45YmjYe-tGXZ2Fc-p-4_O59fLRblPlup4iF3aJ_413nrbKD/" width="24" height="24" alt="Flattr this" border="0" /></a>

  • margin-left: 5px – der Abstand des Flattr-Buttons zur linken Seite mit 5px
  • margin-right: 5px - der Abstand des Flattr-Buttons zur rechten Seite mit 5px
  • title="Flattr this"  und alt="Flattr this" dient der Beschriftung der Buttons, fährt man mit dem Maus Cursor darüber dann wird ein Titel angezeigt; beide Zeilen können nach Wunsch verändert bzw. ersetzt werden
  • href="http://flattr.com/thing/482810" hier fügt man den Link zu seinem Flattr Profil ein (aus der Adresszeile des Browsers kopieren)
  • target="_blank" öffnet den Link zum verlinkten Profil bzw. zur verlinkten Webseite in einem neuen Fenster im Browser, wenn man auf den Button klickt; wenn man das nicht möchte, kann das Stück gelöscht werden
  • img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicSSDPZP98eEHfO_A6Sbf5Vtr3eKs6mweUqb2SRia8o37fJT4-K6FI7gjA0oLH_Yf2EVeeytcm2ZApx3-r3pOHsZdpgqeje45YmjYe-tGXZ2Fc-p-4_O59fLRblPlup4iF3aJ_413nrbKD/"  ist der Link zum Flattr-Button, wer einen anderen Button will, setzt dort einfach seine URL (Webadresse) zum Bild ein; man kann diesen Link auch kopieren, in die Adresszeile des Browser einfügen, den Button herunterladen, bei Blogspot in einen neuen Post hochladen (der Post muss nicht veröffentlicht werden, weil das Bild nach dem Hochladen automatisch im Picasa-Webalbum abgelegt wird), bei Editor auf HTML klicken und den ersten Link (das ist die neue URL zum Button) kopieren und im oben dargestellten Code einsetzen (der Post kann danach gelöscht werden, weil der Button nun im eigenen Picasa-Webalbum abgelegt wurde)
  • width="24" – der Button ist 24px breit
  • height="24" – der Button ist 24px hoch
  • border="0" es wird kein Rahmen um den Button angelegt

 

Den eigenen Code zusammenstellen

  • das Grundsystem sollte nun klar geworden sein
  • dann braucht man “Anfang” und “Ende” vom Code und dazwischen wird der Code für die einzelnen Buttons eingefügt – genau so wie er oben jeweils angeführt ist
  • der Code beginnt mit <div align="center"> daneben werden hintereinander die Codes für die gewünschten Buttons gereiht (siehe oben 1. Code) und hinter dem allerletzten Button-Code wird dann </div> eingefügt
  • die URL’s (Webadressen) zu den Profilen oder Seiten werden durch die eigenen Links ersetzt
  • die URL’s für die Buttons können ebenso ersetzt werden


Beispiel – für Facebook (grau), Twitter (blau) und Newsfeed (grau)

<div align="center"><a style="margin-left: 5px; margin-right: 5px;" title="BloggerLatein auf Facebook folgen" href="http://www.facebook.com/pages/BloggerLatein-Blogger-Blogspot-Tipps-und-Tricks/283692315026862" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYA9_vnQfz24syq1lvd4gECp0N5cy-wUoG_N_QkVx1xJpZmxTekMosIBfoI0OgA2t5sd0B-KdIxmdK-SsqK0FBSqn2Lnqb2ZXHBWnpjIysWhIDAcHKWzk8dJyNmTurDvVMAJHG7d10du1R/" width="24" height="24" alt="BloggerLatein auf Facebook folgen" border="0" /></a><a style="margin-left: 5px; margin-right: 5px;" title="BloggerLatein auf Twitter folgen" href="http://twitter.com/BloggerLatein" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9HdRW51K2C5IKM1XcieH2fanTg7Dn2JiLXSYIcA01nKrvxWEB0dAAnmZduIO6y2jvuE-Agj2I1w5X8FzBlyfaxqtlmI0FAMkbBdv779N2kJwgOtRPsdZlp-_VC60Z-OnQQrfNqxaq8uSR/" width="24" height="24" alt="BloggerLatein auf Twitter folgen" border="0" /></a><a style="margin-left: 5px; margin-right: 5px;" title="Newsfeed abonnieren" href="http://feeds.feedburner.com/Bloggerlatein" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLPzyF7cztSyhKjyOoe10RKzyJex0r-LfnwP4aUY27Br1LJ3mIUl6xYxAFy0W03PUcZd_B3yTnULJvlAaiuXFe7roAdsI0T4329EihK2gZ-hdtgqYcKzAyG-A5IXV6-XY0INPLvslbmyrG/" width="24" height="24" alt="Newsfeed abonnieren" border="0" /></a></div>

Artikel als PDF herunterladen

21 Kommentare:

robert 14. Februar 2012 um 17:09

Das mit den Twitter button hab ich gesucht - Danke dir dafür - Tolle Arbeit

BloggerLatein 14. Februar 2012 um 17:39

Super, hoffe es hat in Deinem Blog funktioniert.

Liza Pagé 28. April 2012 um 16:09

oh danach habe ich lange gesucht und ich finde es super! :) aber hab eine frage kann ich auch ein button dafür zu weheartit.com machen? hab es versucht aber ich schaffe es nicht :/

BloggerLatein 28. April 2012 um 19:00

@bebeqiims ♥

Ich kenne den Dienst nicht, habe mir die Seite auch nur kurz angesehen.
Aber wenn ich es richtig verstanden habe, wird ZUM "SHAREN" kein Button in den Blog eingebunden.

Es wird ein Plugin für den Browser (Internet Explorer, Chrome, Firefox usw.)zum installieren angeboten. Das bedeutet: jeder der die Funktion nutzen möchte installiert dieses Plugin über seinen Browser. In der Browserleiste wird dann wohl ein Herz angezeigt, welches der Funktionsbutton für diese Plattform ist.

Wenn man dann auf einer Webseite ist, einem Bilder gefallen, drückt man in seiner Browserleiste (Firefox, Chrome usw.) diesen Button und es wird auf dieser Plattform in der eigenen Gallery gespeichert. Sprich: auf den Servern dieser Plattform werden fremde Bilder hochgeladen und scheinbar ein Link zur ursprünglichen Quelle angezeigt. Anleitung: http://weheartit.com/heart-button

Die 2. Möglichkeit wäre, Du verlinkst (ähnlich wie mit dem Twitter und Facebook Button) NUR zu Deinem Account bei weheartit.com. Dazu brauchst Du 1. ein Logo. Mach mal über Google eine Bilder-Suche "weheartit logo" und hole Dir ein paar Ideen. Vermutlich reicht aber so ein rosa Herz. Möchtest Du es neben Deinen schon eingebundenen Twitter und Facebook Buttons anzeigen, dann erstelle das rosa Herz in der Größe 24x24 Pixel und lade es z.B. bei Blogger hoch und kopiere Dir den Link zum Bild (Editor: in der Ansicht HTML). 2. Dann machst Du es wie mit den anderen 3 Buttons: Du brauchst wieder so einen Codeschnipsel >> dort fügst Du den Link vom weheartit.com Bild ein und fügst den Link zu deinem Account ein z.b. http://weheartit.com/meinname

Ich hoffe es hilft Dir weiter.

Viele Grüße

Liza Pagé 28. April 2012 um 20:56

Ja es hat wirklich sehr geholfen vielen vielen dank :)

... mit Liebe, ohne Gluten! 9. Juni 2012 um 08:51

Hi
ich bin ein ziemlicher Dau und auch neu im Bloggen, mir wurde der Tip gegeben, dass ich in meinem Blog einen Button einfügen soll so das man ihn über facebook folgen kann! Hier meine Fragen: 1. ist das oben der genannte Button? Gibt es eine Möglichkeit ihn nicht mit meinem facbook Profil zu verknüpfen?

Danke schon mal für die Hilfe!

BloggerLatein 11. Juni 2012 um 00:42

@Kochen mit Liebe aber ohne Gluten!

Kommt drauf an...was Dir empfohlen wurde und was Du genau möchtest.

Für Deinen Blog wäre die Einrichtung einer Facebook Seite empfehlenswert, dann kann man den obigen Button einbinden und ihn mit der Facebook Seite verlinken. Klickt dann jemand auf den Facebook Button, landet dieser auf Deiner Facebook Seite und kann "gefällt mir" anklicken.

Oder man bindet einen Code für den "gefällt mir" Button ein und kann diesen Button gleich auf Deinem Blog anklicken (ohne extra auf Facebook weiter geleitet zu werden).

Du kannst aber auch gleich die Facebook Box einbauen, dazu gibt es hier schon einen Artikel: http://bloggerlatein.blogspot.com/2012/03/facebook-like-gefallt-mir-box-bei.html

vg

... mit Liebe, ohne Gluten! 13. Juni 2012 um 22:17

DANKE das Hilft weiter.... :-)

Unknown 4. Juli 2012 um 07:33

ich habe mal eine Frage, wie bekomme ich denn diese Buttons eingefügt, wenn ich sie alle unter meinen Post haben möchte.

Liebe Grüße
Rosie

BloggerLatein 4. Juli 2012 um 18:50

@Rosie Fröhlich

Es ist etwas komplizierter und einen eigenen Artikel wert, leider, leider habe ich im Moment keine Zeit diesen zu schreiben.

Man müsste einen tieferen Eingriff in der Vorlage vornehmen und CSS und HTML verändern. Das müsste ich vorerst ausprobieren und an einigen Testblogs probieren, wozu leider auch die Zeit fehlt.

Du könntest die internen Blogger-Share-Buttons aber unter jeden Post aktivieren. Layout > Blogposts bearbeiten > in dem Fenster einen Haken bei "Freigabeschaltflächen anzeigen", runterscrollen und "speichern", Blog neu laden. Aber ich glaube es ist nicht was Du willst.?

Mit den hier erwähnten Buttons verlinkt man im Grunde nur auf angelegte/vorhandene eigene Profile bei Facebook, Twitter, Google plus usw. (damit andere Leser dem dort angelegten Profil/Account auch folgen können) - mit diesen Buttons kann man keinen Post, in diesen sozialen Netzwerken teilen, dazu würden sich die internen Blogger-Share-Button aber eignen.

Mit mehr kann ich leider nicht dienen.

Liebe Grüße

Bester Puschel 7. September 2012 um 11:20

Danke für die coole Anleitung. Habe alles super hinbekommen!!

SaKiWhi 11. September 2012 um 19:23

hallo, ich habe folgende fehlermeldung wenn ich obigen text einfüge:


Fehler beim Parsen der XML, Zeile 887, Spalte 169: The reference to entity "loc" must end with the ';' delimiter.

was nun??

BloggerLatein 11. September 2012 um 20:33

@SaKiWhi

Wenn ich den kompletten Code einfüge funktioniert er in einem Testblog nach wie vor.

Probiere es mal ohne etwas zu ändern, vermutlich hast Du bei einer Änderung irgendwo zu viel gelöscht. Achte darauf wirklich nur die Links zu ersetzen und nicht versehentlich etwas zu löschen.

VG

Kirschblütenfee 26. Januar 2013 um 14:24

Hab es nun anders gelöst: Statt dem FB Minibutton habe ich (dank des gutes Artikels hier) eine Facebook Box eingebaut. DANKE! =)

Verena 16. Mai 2013 um 13:07

Super, vielen Dank!

Yummy Mummy 27. März 2014 um 01:18

Vielen Dank! Endlich mal eine Seite, die das Ganze klar und verständlich anleitet. Bin mit eurer Beschreibung super klargekommen und konnte dank des Tips mit dem neuen Post und der Grafik im Picasa-Webalbum auch endlich hübsche Buttons einfügen :-) Die habe ich mir übrigens auf http://www.iconsdb.com mit dem passenden Design und Farbcode erstellt und runtergeladen.
Weiter so :-)!

Unknown 2. September 2014 um 21:49

Mein Layout bringt mich schon seit Monaten zum Verzweifeln, jetzt konnte ich aber endlich mal meine Buttons so einbauen wie ich will.
Herzlichen Dank für diesen Post!!
Bunte Grüße,
Marie von http://buntes-bonbon.blogspot.de/

easylife 22. Januar 2016 um 16:20

Tausend Dank, es hat mir wirklich geholfen

Anonym 25. April 2016 um 15:53

Habe den für Feedburner gesucht

Family, Life, Love & Cooking 7. Oktober 2016 um 13:27

Super, ich hab es geschafft. Jetzt fehlt mir nur noch Instagram und Pinterest :-)

Ellen 2. Februar 2017 um 19:50

Danke, hat mir sehr geholfen! Jetzt brauche ich nur noch ein Instagram Button :D

Kommentar veröffentlichen