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.



Blog-Connect ID
Öffnet Blog-Connect.
Klickt unter eurem Namen den entsprechenden Blog an.



Die ID findet ihr nun in der Browser-Leiste:






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.

Bei Fragen zu diesem Tutorial könnt ihr euch jederzeit an Jennie@cplove.de wenden.

43 Kommentare

  1. Sowas habe ich schon ewig gesucht, danke =)

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

    AntwortenLöschen
    Antworten
    1. Also ich hätte nicht bemerkt, dass es irgendwie weniger werden ;)

      Löschen
    2. 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 :D

      Löschen
    3. Also bisher hat sich noch keiner beschwert, dass er es nicht kapiert hat :)
      Kommt natürlich auch auf die Buttons an ;)

      Löschen
    4. Habe es jetzt einfach mal reingebaselt, mal sehen, wie es sich entwickelt ^^

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

    AntwortenLöschen
  3. 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

    AntwortenLöschen
  4. ich weiß leider noch nicht einmal wo ich ein html erstellen kann geschweige denn
    wie sowas geht :D
    liebste grüße Caro

    shiningfeather

    AntwortenLöschen
    Antworten
    1. Unter Layout -> Gadget hinzufügen -> HTML Gadget :)

      Löschen
  5. 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?

    AntwortenLöschen
    Antworten
    1. 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 :)

      Löschen
    2. Aaaah super! HERZLICHEN DANK!!

      Löschen
  6. 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

    AntwortenLöschen
    Antworten
    1. Dann kannst Du einfach unter "Layout" -> "Gadget-hinzufügen" das Google-Friend-Connect Widget auswählen :)

      Löschen
  7. 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: www.freizeitcafe.info

    Liebe Grüsse & weiter so!

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

    AntwortenLöschen
  9. Hach, vielen Dank! Sowas habich schon lange angeschmachtet und endlich hab ich es auch *_*

    AntwortenLöschen
  10. 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 :/

    AntwortenLöschen
    Antworten
    1. Hat sich erledigt war wohl nur ein Fehler bei Blogger :)

      Löschen
  11. hat suuuuper geklappt... schaut doch mal vorbei :):)
    Sunkissed Lovechild

    AntwortenLöschen
  12. Ich hab die Bilder mit Gimp erstellt & frag mich jetzt wo ich die Links denn jetzt her bekomme..? :)

    AntwortenLöschen
    Antworten
    1. hat sich erledigt, aber leider funktioniert es bei mir gar nicht!

      Löschen
  13. Irgendwie hab ich alles gemacht wie beschrieben aber die leiste erscheint einfahc nicht :(

    AntwortenLöschen
  14. Mann sollte vielleicht hinzufügen das es bei Firefox nicht funktioniert hat bei mir :D

    AntwortenLöschen
  15. 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 :)

    AntwortenLöschen
  16. 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

    AntwortenLöschen
  17. 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/

    AntwortenLöschen
  18. Habe das selbe Problem wie Kitty :(

    Liebe Grüße

    AntwortenLöschen
    Antworten
    1. 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

      Löschen
  19. Vielen Lieben Dank. Hat super funktioniert.

    AntwortenLöschen
  20. 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. (:

    AntwortenLöschen
  21. 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!

    AntwortenLöschen
  22. 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/

    AntwortenLöschen
  23. Ich bekomme das einfach nicht hin :(
    Was ist mit diesen Bildlinks gemein?
    Ich verzweifele gerade

    AntwortenLöschen
  24. 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

    AntwortenLöschen
    Antworten
    1. Ich habe das gleiche Problem. Gibt es da eine Lösung? :)

      Viele Grüße
      Fräuleins Tagebuch

      Löschen
  25. Hallo Danke hoffe es klappt mit dem Follower .Versuche es jetzt mal.LG Angi

    AntwortenLöschen
  26. 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 :)

    AntwortenLöschen
  27. 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?

    AntwortenLöschen
  28. 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! :)

    AntwortenLöschen
  29. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
  30. 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

    AntwortenLöschen

Danke für dein Kommentar! Bitte beachte, dass Beleidigungen & Spam ohne Vorwarnung gelöscht werden. Bitte hab Verständnis dafür, dass wir nicht alle Kommentare beantworten können!

Falls ein Tutorial nicht funktioniert hat, dann schreibe bitte in deinem Kommentar genau, was nicht funktioniert & deinen Bloglink. So kann dir besser geholfen werden!

Du möchtest dich direkt an Mira wenden, um ein Problem zu lösen oder ein Design erstellen zu lassen? Dann schaue doch hier vorbei und melde dich!

 
Lass dir dein Blogdesign von mir gestalten!