Social Media Buttons ♥♥

Hey hallo liebe CPL-Leser!

Ich bin Christina von Hallo Welt! und darf dir heute ein kleines, feines Tutorial über Social Media Buttons für deinen Blog zeigen. Die Anleitung ist zwar für Blogger-Blogs ausgelegt, ich denke aber die HTML-Codes sind auch für andere Systeme verwendbar (bei Punkt 4 müsst ihr in eurem System ein wenig suchen).



Alle Leser eures Blogs sind sicherlich froh, wenn sie schön aufgeräumte und vorallem übersichtliche Social Media Buttons zur Auwahl haben. ;-)



Willst du das also auch für deinen Blog? Dann folge meiner Anleitung. Hab keine Angst, es ist total einfach. Das Kopieren und Einfügen von Texten sollte dir geläufig sein und dann wird es das schwierigste sein, hübsche Icons für deinen Blog auszusuchen. ;-) Los gehts!

1. Sei dir im klaren, was du alles Verlinken möchtest
Meiner Meinung nach sollte ein Blog ein "About me" und RSS-Link als Minimum anbieten. Du hast mehr - umso besser (aber ich glaube ab 10 wird es unübersichtlich ;-D). Nett finde ich noch einen Mail-Link, andere Möglichkeiten um den Blog zu verfolgen und Social Media Plattformen, wie Google+, Facebook, Twitter, ...

2. Organisiert dir die Links
Speicher alle deine Links, die geöffnet werden sollen, wenn man auf das Icon klickt, irgendwo ab, um dir nachträgliche und lästige Sucherei zu ersparen. (Dieser Schritt kannst du auch später machen, schlussendlich braucht man den Link aber. ;-D)

Was bei einer "About me"-Unterseite noch ganz einfach ist, konnte ich bei Google Friend Connect nicht so schnell finden. Damit du nicht so lange suchen musst wie ich, ist hier die Angabe zum Google Friend Connect Link.
"http://www.blogger.com/follow-blog.g?blogID=Deine eigene ID"
Deine eigene Blog ID findest du in einer Unterseite von Blogger (also klicke im Dashboard auf Kommentare, Layout oder dergleichen) und du kannst sie dort direkt aus der URL übernehmen.

3. Such dir Icons aus, die dir gefallen
Es gehen alle Bilder, egal ob selbst gemacht oder von jemand anderen. Hier kannst du dich künstlerisch austoben und deine eigenen Icons erstellen oder du nimmst welche aus den Abermillionen existierenden Icons.
Ich habe meine von Icondock. (Anmerkung von Mira: Empfehlenswert ist auch Iconarchive.) Du findest bei Google unter dem Begriff "Social Media Icons" aber noch Uuuuuunmengen an Anderen. Die meisten Icons sind kostenlos, es ist aber nett, wenn man die Ersteller irgendwo auf dem Blog verlinkt (sie hatten schließlich Arbeit damit).

Hast du deine Icons ausgewählt, speicher sie an deinem gewohnten Bilder-Speicherplatz (Flickr, Picasa, Photobucket, ...) und notiere dir den Link.
Achtung: Nicht alle Icon-Sets haben auch Icons für alle Links, die du verwenden willst. In meinem Beispiel gab es keinen Icon für Bloglovin, daher hab ich ihn mir selber gebastelt. Jetzt weißt du auch, warum es von Vorteil ist, schon im vorhinein genau zu wissen, welche Links du verwalten willst. ^_^
Bonus: Speicher die Icons bereits mit dem Namen, der erscheinen soll, wenn man über den Button fährt. Dann hast du nachträglich noch weniger Arbeit.

4. Erstellt ein neues HTML-Feld
Zu finden unter: Blogger Dashboard - Layout - Gadget hinzufügen - HTML/Java Script

5. Füge nun folgenden Code ein

Als Beispiel sieht mein About me-Icon so aus:

   ... Der Link zu meiner gewünschten Seite
   ... Der Link zu meinem Bild
Folgende Zwei sind kein Muss und werden bei mir von Flickr bereits vorgegeben, es soll euch nur helfen, falls es bei euch ähnlich aussieht.
   ... Breite und Höhe meines Bildes
   ... Der Name meines Bildes und gleichzeitig die Bezeichnung, die erscheint, wenn ich mit der Maus darüber fahre

Füge nun einfach alle deine erstellten Social Media Buttons der Reihe nach in das HTML Script und speichere es.

6. Verschiebe das HTML-Script an die Stelle, die du möchtest
In meinem Fall musste ich es noch unter meinen Begrüßungstext schieben und speichern. Fertig!
Hat dir das Erstellen so viel Spass gemacht und du willst noch mehr, gibt es die Möglichkeit, die Buttons mit Gimp selbst zu erstellen oder schwebende Social Media Buttons (mit Farbwechsel) zu generieren.
Ich hoffe mein Tutorial hat dir weiter geholfen und du hast bald hübsche Social Media Buttons auf deinem Blog.


Wenn du Anmerkungen, Fragen oder Probleme haben solltest, melde dich doch in den Kommentaren.
Danke an Icondock für die tollen Icons und Spiceupyourblog für den Hinweis zum Google Friends Connect Link!

Liebe Grüße