Top Social

19.01.2013

Tutorial - Social Media Buttons einbinden

Hallo meine Lieben!

Heute möchte ich das erste "How to..." Tutorial auf meinem Blog veröffentlichen. In den letzten Tagen habe ich mich ein wenig mit Blogger und dessem Eigenheiten beschäftigt (bzw. ich lag krank im Bett und habe ein wenig am Layout etc. rumgefriemelt).
Eine Sache, die ich schon immer auf meinem Blog haben wollte, ist ein Gadget mit den Social Media Buttons. Ich finde sie unheimlich praktisch und der Blog wirkt dadurch etwas aufgeräumter. Lange Rede, kurzer Sinn: "Selbst ist die Frau" und heute zeige ich euch wie man diese in Blogger einbindet.



Als aller erstes braucht ihr Social Media Buttons. Es gibt unzählige Seiten im Internet wo ihr sie kostenlos downloaden könnt. Ich habe diese hier verwendet. Weitere schöne Buttons bekommt ihr hier, hier und hier.

Wenn ihr sie heruntergeladen habt entpackt ihr den Ordner. Nun könnt ihr auf jeden einzelnen Button zugreifen. Jetzt kommt ein Image-Hosting Service ins Spiel. Ich habe Photobucket dazu verwendet, dieser ist kostenlos und einfach zu bedienen. Dort ladet ihr jetzt jeden Button hoch, den ihr später auf euren Blog einbinden wollt. Wenn ihr alle hochgeladen habt, könnt ihr jeden einzelnen Button anklicken, damit ihr es im Einzelmodus seht. Dies sollte dann so aussehen:


Dies ist ganz wichtig, weil wir nachher die URL des Bildes/Buttons brauchen.

Nun öffnen wir Blogger. Über das Dashboard gelangen wir zu "Layout". Danach wählen wir "Gadget hinzufügen" aus.


Aus der Auflistung der verschiedenen Gadgets wählen wir "HTML/JavaScript".


Jetzt folgt der Text, den ihr dort eingebt:

<a href="URL des Links" target="_blank"><img src="URL des Bildes"></a>

So sieht dies dann im geöffneten Gadget Fenster aus:


Die "URL des Links" ist euer Ziellink. Sozusagen die Seite, zu der ihr verlinken wollt. In meinem Fall ist dies mein Twitter-Account.
Die "URL des Bildes" ist der direkte Link von der Photobucket Seite. Wie hier zu sehen ist, habe ich den Twitter Button ausgewählt.


So sieht es eingesetzt aus:


So macht ihr es mit allen Buttons, die ihr auf eurem Blog haben wollt. Dazu reiht ihr die augefüllten Links einfach aneinander. Das sollte dann ungefähr so aussehen:


Jetzt müsst ihr sie nur noch speichern und per "Drag & Drop" an die Stelle des Layouts ziehen, an der sie sein sollen und schon seid ihr fertig!


Ich hoffe dieses kleine Tutorial konnte ein wenig Klarheit stiften!

Habt noch einen schönen Abend!

Kommentare on "Tutorial - Social Media Buttons einbinden"
  1. liebe Sabrina

    puhhhh! ich habs geschafft.
    herzlichen dank für deine super erklärte Anleitung.
    Ich habs auf meinem Blog zu dir verlinkt

    ;)

    glg simone

    AntwortenLöschen
    Antworten
    1. Bitteschön! Super, dass das geklappt hat.
      Danke :)

      Löschen
  2. Vielen Dank für die tolle Anleitung, damit hab ich Anfänger, es sogar geschafft :)

    liebe Grüße Iwi

    AntwortenLöschen
  3. aaaaaaaaaaaaaahhhhhhhhhhhh...ich bin sprachlos es auch geschafft zu haben!!!!!!!!!

    Daaaaaaaaaaaaaaaankeschöööööööööööön!!!!

    JesSi Ca von ~feierSun´s World~
    Blutige Anfängerin

    AntwortenLöschen
  4. Tolles Tutorial, mit dem ich es tatsächlich geschafft habe, die Social Media Buttons einzufügen! Danke! Ich habe es auf meinem Blog verlinkt, hoffe, das ist ok!
    LG
    Tinka

    AntwortenLöschen
  5. vielen dank <3 endlich krieg ichs hin ist ja total easy danke deiner beschreibung lg

    AntwortenLöschen
  6. Oh, danke! So habe auch ich "Honk" das endlich mal geschafft!!

    Liebe Grüsse
    Lina

    AntwortenLöschen
  7. Danke für die tolle Anleitung! Weißt du auch, wie man die Buttons seitlich einbindet? Also das sie ganz rechts untereinander stehen?

    Würde mich über eine Antwort freuen :)

    Liebe Grüße
    Sibel

    AntwortenLöschen
  8. Hallöchen Du hast mich gerettet! Nach tagelangem Probierens und Fehlschlägen habe ich das mit deiner Anleitung hingekriegt... hab dich gleich in meinem BLOG erwähnt... Dank dir und noch einer Freundin hab auch ich endlich Buttons.. guck mal rein, ja?
    Kreacaro.blogspot.de
    Vielen Dank für diese gute Anleitung...

    AntwortenLöschen
  9. Hallo Sabrina,

    tausend Dank für diese wundervolle Erklärung. Hab mir so einige im Internet durchgelesen nur leider nicht verstanden. Danke deiner Anleitung hat es super geklappt.

    Ganz viele Liebe Grüße
    Anja

    www.anja-korbmacher.blogspot.de

    AntwortenLöschen
  10. Mit meinen Icons hat das super funktioniert, aber ich wollte fragen, ob du weißt wie ich Abstände zwischen die verschiedenen Icons bekomme, wenn ich sie waagrecht anordne?

    AntwortenLöschen
  11. Super erklärt,vielen Dank. Sehr schöner Blog übrigens.

    AntwortenLöschen
  12. Dank deiner tollen Erklärung, war es gar nicht so schwer wie ich anfangs dache. Viele Dank :)

    AntwortenLöschen
  13. Liebe sabrina,
    tausend Dank für diese tolle Erläuterung, mit deren Hilfe ich es endlich geschafft habe, die Social Icons in mein Blog so einzufügen, wie ich es haben wollte. (Ich habe es nach etlichen anleitungen probiert, und deine war die Beste ). Ich bin richtig glücklich....
    Herzlichst
    Astrid

    AntwortenLöschen
    Antworten
    1. Danke liebe Astrid! Solche Kommentare machen mich auch richtig glücklich! :)

      Löschen
  14. Ohhh mein Gott, ich könnte dich gerade knutschen, genau DAS versuche ich seit Tagen selber hinzubekommen. Ich danke dir für dein Tutorial. Nebenbei habe ich auch noch deinen tollen Blog entdeckt, und werde dir einfach mal folgen.

    Lieben Dank dafür.
    Einen schönen 3. Advent wünsche ich Dir

    Liebe Grüße
    Mary

    http://marylouloves.blogspot.de/

    AntwortenLöschen
  15. daaaanke wenn man dich nicht hätte!

    AntwortenLöschen
  16. Hey:)
    Also ein echt toll erklärtes Tutorial und auch wirklich leicht!
    Nur leider funktioniert eine Sache einfach nicht bei mir!
    Ich probiere das jetzt schon lange aber es klappt nicht..vllt kannst du mir helfen?
    Und zwar wird bei mir wenn Ales fertig ist, auf meinem Blog nur ein Fragezeichensymbol statt dem Icon angezeigt..
    Weißt du woran es liegt?

    Liebe Grüße,
    Julia

    daisyskirt.blogspot.com

    AntwortenLöschen
  17. Hey echt toll erklärt und es klappt auch außer, dass der Link auf eine falsche Seite führt obwohl es der richtige Link ist… und kannst du mir sagen wie ich die Größe des Ions verändern kann?

    Liebe Grüße,
    Julia

    daisyskirt.blogspot.com

    AntwortenLöschen
  18. Ich dachte schon ich kann niemals Fotos einfach als Icon benutzen. Jetzt hab ich deine Seite gefunden und jipppiiii es hat geklappt :))))

    danke schön :)

    Torte-llini.blogspot.de

    AntwortenLöschen

Kommentare machen mich glücklich. :)
Also haut in die Tasten...
Antworten meinerseits werden als Kommentare gepostet.