Tipps & Tutorials, tutorial

Fixierte Followerbuttons

Auf meinem Blog gibt es fixierte Follower-Buttons, also
Buttons, welche “mitschweben”, auch wenn der Besucher scrollt.
Das kann sehr praktisch sein, denn in meinem Fall stören sie dort nicht, sind aber für den Blogleser immer im Sichtfeld.

Die Buttons habe ich selbst gestaltet, doch es gibt auch jede Menge Seiten, die Social-Media Buttons anbieten. In diesem Tutorial soll es jedoch nicht um die Buttons an sich, sondern darum gehen, wie man diese auf dem Blog einbinden kann.

Zunächst einmal benötigt ihr einen HTML-Code.

right bedeutet, dass wir den Container rechts positionieren. Möchtest Du ihn links, gib einfach “left” ein. Die Zahlen stehen für den Abstand vom Rand.
top steht für “oben”. Möchtest Du ihn unten, gib “bottom” ein. Auch hier steht die Zahl wieder für den Abstand.

<style>
#floatlink {
position:fixed;
right: 10px;
top: 10px;
z-index:10;
}
</style>

<div id="floatlink">
<a href="http://www.facebook.com/DEINESEITE" target="_blank"><img src="DEIN_BILDLINK" width="50"/></a>
<br />
<a href="DEIN_TWITTERFOLLOWLINK" target="_blank"><img src="
DEIN_BILDLINK" width="50"/></a>
<br />
<a href="http://www.blogger.com/follow-blog.g?blogID=DEINE_BLOG_ID" target="_blank">
<img src="DEIN_BILDLINK" width="50"/></a>
<br />
<a href="http://blog-connect.com/a?id=DEINE_BLOG-CONNECT-ID" target="_blank">
<img src="DEIN_BILDLINK" width="50"/></a>
<br />
<a href="http://www.bloglovin.com/en/blog/DEINE_NUMMER" target="_blank">
<img src="DEIN_BILDLINK" width="50"/></a>
</div>

Möchtet ihr einen der Followerdienste nicht benutzen, so entfernt einfach den Code von <a href bis </a>.
50 steht hier für die Größe der Bilder. Wollt ihr sie größer/kleiner haben, ändert einfach diese Zahl bei jedem Link ab.

Falls ihr nicht weißt, wie ihr an die benötigten Links kommt, hier eine kleine Zusammenfassung:

Facebookseite

Öffne Deine Facebook-Seite und kopiere den Link in der Leiste.

Twitterfollowerlink

Öffnet eure Twitter-Account-Seite.

Links in der Spalte findet ihr diesen Kasten. Klicke auf “Unternehmen”

-> Resources and Widgets

-> See all Follow buttons

-> Folgen

-> Rechtsklick auf den Followerbutton und “Link kopieren”

Diesen Link fügt ihr unter “DEIN_TWITTERFOLLOWERLINK” ein.

Blog-ID

Öffnet eure Blog-Übersicht. Oben in der Leiste findet ihr eure Blog-ID.
Fügt sie ein.

Bloglovin-Nummer

Drückt unter Account auf “Follow Buttons”

Wählt einen beliebigen aus und klicke “Get this icon!”

“Add Widget” 

Klickt auf “Inhalt bearbeiten”, damit sich dieses Fenster öffnet. Eure Bloglovin Nummer findet ihr hier.

Habt ihr alle Links eingefügt (Bild-Links nicht vergessen! Habt ihr eigene Icons gestaltet, so ladet sie auf einer Seite wie z.B. Directupload.net hoch. Wichtig bei Directupload: “Weitere Verlinkungsmöglichkeiten”->”Direkten Bildlink” (Letzte Option)), müsst ihr “nur noch” das Gadget hinzufügen.
Geht hierfür auf “Layout”-“Gadget hinzufügen”->”HTML-Gadget”

Fügt dort den Code ein. Fertig!

Wenn die Icons nebeneinander sein sollen, müsst ihr nur das <br /> zwischen den einzelnen Codes entfernen.

42 Comments

  1. Carry

    15. January 2013 at 11:17

    Sowas habe ich schon ewig gesucht, danke =)

    Ich frage mich allerdings, wieviele dann wirklich darauf aufmerksam werden und darüber auf folgen klicken..

    1. Jennifer Jäger

      15. January 2013 at 11:21

      Also ich hätte nicht bemerkt, dass es irgendwie weniger werden 😉

    2. Carry

      15. January 2013 at 21:10

      Ja weniger nicht, das meinte ich nicht ^^ Sondern eher, ob die Leser das finden bzw verstehen dass man zum Folgen darauf klicken soll?! außer man macht eben beides 😀

    3. Jennifer Jäger

      16. January 2013 at 12:38

      Also bisher hat sich noch keiner beschwert, dass er es nicht kapiert hat 🙂
      Kommt natürlich auch auf die Buttons an 😉

    4. Carry

      16. January 2013 at 13:57

      Habe es jetzt einfach mal reingebaselt, mal sehen, wie es sich entwickelt ^^

  2. MeinLilaPark

    15. January 2013 at 12:28

    Super! ☀ Vielen Dank für das Tutorial! ♥ Wollte schon lange wissen, wie das geht.

  3. Anonym

    15. January 2013 at 12:51

    Ohh super, danke. Ich hatte bereits eine ähnliche Leiste in meinem Blog. Da ich aber das Design (übrigens auch mit Hilfe von Euren Tutorials) etwas angepasst habe, passte die Leiste nicht mehr so gut zum übrigen Blog. Eure Lösung scheint mir etwas einfacher zu sein und vielleicht gelingt mir die Anpassung der Leiste an das übrige Erscheinungsbild etwas besser.
    Ich mache die Anleitungen in Eurem Blog sehr gerne nach, da sie einfach erklärt sind und meistens gut funktionieren.
    Herzliche Grüße aus Wien

  4. Carolin

    15. January 2013 at 14:34

    ich weiß leider noch nicht einmal wo ich ein html erstellen kann geschweige denn
    wie sowas geht 😀
    liebste grüße Caro

    shiningfeather

    1. Jennifer Jäger

      16. January 2013 at 12:38

      Unter Layout -> Gadget hinzufügen -> HTML Gadget 🙂

  5. Nastja

    15. January 2013 at 15:59

    Hi Jennifer!

    Vielen Dank für das Tutorial! Ich habe es gleich mal ausprobiert und es ist wirklich einfach. Das einzige was bei mir nicht klappt ist das Folgen per Mail. Ich habe den Link von Feedburner da reinkopiert aber wenn man draufklickt sagt er "Еhe feed does not have subscriptions by email enabled".

    Hast du eine Idee woran das liegt?

    1. Jennifer Jäger

      16. January 2013 at 12:37

      Hallo Nastja!
      Ja, dann hast Du den Feedburner per Mail noch nicht aktiviert 🙂

      Gehe auf: http://feedburner.google.com/
      Wähle dort Deinen Feed aus.
      -> Publicize
      -> Email Subscriptions

      Diese musst Du aktivieren 🙂

    2. Nastja

      17. January 2013 at 15:18

      Aaaah super! HERZLICHEN DANK!!

  6. Julia

    15. January 2013 at 18:22

    ich bräuchte nur ein widget für blogger-follower und ich weiß nicht wo das mit dem "add widget" steht,kannst du mir da weiterhelfen D:
    LG JuliaPhotography

    1. Jennifer Jäger

      16. January 2013 at 12:39

      Dann kannst Du einfach unter "Layout" -> "Gadget-hinzufügen" das Google-Friend-Connect Widget auswählen 🙂

  7. Christian Gera

    16. January 2013 at 10:33

    Ich liebe diese Easy-To-Do Tutorials! Lieben Dank Jennifer & wer alles neues zum Social Graph (der neuen Suche via Facebook) wissen will, kann mal bei mir vorbeischauen: http://www.freizeitcafe.info

    Liebe Grüsse & weiter so!

  8. Ronja

    16. January 2013 at 19:04

    Vielen Dank! 🙂 Hat geklappt!

  9. Carry S.

    24. January 2013 at 21:40

    Weißt du zufällig wie man die Follower Links von Instagram und Pinterest rausfindet? Also so, dass man beim Klick darauf automatisch folgt?

  10. Sarah

    31. January 2013 at 20:56

    Hach, vielen Dank! Sowas habich schon lange angeschmachtet und endlich hab ich es auch *_*

  11. Daniela Jost

    9. February 2013 at 23:47

    Ich hab ein kleines Problem damit, ich wollte den Code in html codes eingeben aber jetzt schwebt es oben in der rechten Ecke und das ganz klein und ich krieg es auch nicht mehr weg :/

    1. Daniela Jost

      9. February 2013 at 23:55

      Hat sich erledigt war wohl nur ein Fehler bei Blogger 🙂

  12. Sandra Rosa

    22. February 2013 at 15:35

    hat suuuuper geklappt… schaut doch mal vorbei :):)
    Sunkissed Lovechild

  13. Meli

    22. February 2013 at 15:53

    Ich hab die Bilder mit Gimp erstellt & frag mich jetzt wo ich die Links denn jetzt her bekomme..? 🙂

    1. Meli

      22. February 2013 at 16:05

      hat sich erledigt, aber leider funktioniert es bei mir gar nicht!

  14. Feniii

    26. February 2013 at 14:25

    Irgendwie hab ich alles gemacht wie beschrieben aber die leiste erscheint einfahc nicht 🙁

  15. Feniii

    26. February 2013 at 14:44

    Mann sollte vielleicht hinzufügen das es bei Firefox nicht funktioniert hat bei mir 😀

  16. Pauli

    8. March 2013 at 17:27

    Bei mir funktioniert es nicht, beim html steht darunter dann immer:Fehler beim Parsen der XML, Zeile 9, Spalte 2: The markup in the document following the root element must be well-formed. was soll ich machen?

    Liebe Grüße 🙂

  17. Kitty

    28. March 2013 at 13:07

    Ich habe alles gemacht, aber leider erscheint nur die Leiste und man kann nichts anklicken. 🙁 Was mache ich falsch? Wäre über Hilfe dankbar.
    LG

  18. Pia.

    3. May 2013 at 17:50

    Bei mir hat alles soweit wunderbar geklappt 🙂
    Aber wie bekomme ich nun bei verschieden großen Buttons alle mittig untereinander?
    kann mir da jemand helfen? 🙂

    http://www.meow-motherfucker.blogspot.de/

  19. beladevojka

    16. May 2013 at 17:21

    Habe das selbe Problem wie Kitty 🙁

    Liebe Grüße

    1. beladevojka

      17. May 2013 at 8:12

      OK, ich nehm alles zurück. Komischerweise gehn sie jetzt doch. Puh^^
      Danke für das Copy&Paste-Tutorial, großartige Seite 🙂

      Liebe Grüße

  20. Franziska Hering

    20. May 2013 at 20:24

    Vielen Lieben Dank. Hat super funktioniert.

  21. GingersWorld

    20. September 2013 at 14:50

    Hallo. (:
    Leider werden bei mir die Bilder nicht angezeigt. :/
    Sind nur Weiß und man kann sie auch nicht anklicken.

    Wäre toll, wenn man mir helfen könnte. (:

  22. Tanja S.

    16. October 2013 at 18:28

    Mich würde es interessieren, wie meine ein fixiertes Menü erstellen kann, also, dass es quai mitschwebt beim scrollen? Wäre echt dankbar für ein Tutorial!

  23. Tina

    25. October 2013 at 19:07

    Wunderschönes Tutorial – vielen lieben Dank <3
    Ich habe es gleich mal mit dem Tutorial zu den Herbst Icon Sets kombiniert – hat bei mir ein bisschen gedauert (ich machs mir immer selbst schwer^^) aber das Ergebnis kann sich auf jeden Fall sehen lassen!
    Copypastelove ist sowieso super klasse!
    … wollte ich nur mal sagen :3

    Liebste Grüße,
    Tina ~
    http://tinasseiteblog.blogspot.de/

  24. Nina Hartmann

    12. January 2014 at 22:15

    Ich bekomme das einfach nicht hin 🙁
    Was ist mit diesen Bildlinks gemein?
    Ich verzweifele gerade

  25. Ela

    1. March 2014 at 17:23

    An sich ein klasse Tutorial und hat auch funktioniert. Allerdings habe ich auch einen fixierten "Back to Top Button" in der rechten Ecke. Wenn ich die Buttons einfüge (rechts oben) dann hängt der Back top Top Button ebenfalls rechts oben. Gibt´s de ´ne Lösung für?

    LG
    Ela
    Schattenglanz

    1. Fräulein

      13. May 2014 at 12:39

      Ich habe das gleiche Problem. Gibt es da eine Lösung? 🙂

      Viele Grüße
      Fräuleins Tagebuch

  26. Angis Mitbringsel

    8. May 2014 at 14:16

    Hallo Danke hoffe es klappt mit dem Follower .Versuche es jetzt mal.LG Angi

  27. LMP

    8. September 2014 at 8:59

    Hallo 🙂
    Ist eine echt super idee!!! meine frage ist nur, kann ich fixierte buttons unten und den header fixiert oben anbringen ? und wenn ja, sollen die codes zweimal eingebracht werden ? :s
    Danke im voraus 🙂

  28. viennafashioncat

    19. September 2014 at 6:39

    Hallo 🙂

    Wie kann ich die Follow Buttons selbst gestalten? Sprich: Die Farbe, Größe usw der Buttons anpassen, sodass sie genau zu meinem Blog passen?

  29. Vanessa Dragojevic

    10. March 2015 at 13:16

    Super Tutorial, hat alles geklappt! Vielen Dank <3
    Gibt es denn auch eine möglichkeit, dass es wie hier auf der Seite wenn man auf das Icon mit der Maus geht, es sich dann so öffnet und z.B da steht "Follow via Facebook" ? Ich find das extrem toll! 🙂

  30. Alexandra Künzler

    19. November 2015 at 9:57

    Hallo 😉

    Danke für diese tolle Anleitung, doch ich habe ein Problem. Zwar wird die Leiste angezeigt, auch führen die Links dahin wo sie sollten doch egal was ich mach, die Bilder erscheinen nicht ;(

    Kann mir da vielleicht jemand weiter helfe?

    Liebe Grüsse
    Alexandra

Leave a Reply to Pia. Cancel