Blog-Tricks: Social Media Icons mit Links zu Twitter, Facebook und Co

Vor kurzem habe ich eine Anfrage bekommen, wie ich in meiner Seitenleiste die Social Media Icons, also die Buttons oder Bilder mit den Verknüpfungen zu sozialen Netzwerken wie Twitter oder zu den RSS-Feeds meines Blogs gemacht habe. Das möchte ich euch heute zeigen:


Mit diesen Buttons könnt ihr eure Blogbesucher z.B. zu eure Profilen auf sozialen Netzwerken leiten, mit einem Klick die RSS-Feeds oder Posts oder Kommentare abonnieren lassen oder aber auch z.B. ganz einfach auf euer Gästebuch verlinken oder auf weitere Blogs von euch. Oder, oder, oder.


Die Grundlage dieser Buttons sind ganz einfach nur Bilder, die dann mit einem HTML-Code versehen werden und dadurch als anklickbare Verknüpfung fungieren. Optional könnt ihr das Bild dann auch noch mit einem Tooltip ("Tooltip" heißt der Fachausdruck dafür, wenn beim "Mouseover" (Berühren des Bildes mit dem Mauscursor) ein Text über dem Bild erscheint.) versehen:

Zu den Bildern (Icons):

• Die könnt ihr selbst herstellen und dadurch 100 % an euer Blogdesign (Größe, Farben, Form, etc.)  anpassen - so werden eure Buttons unverwechselbar.
• Ihr könnt aber auch auf schon fertige, kostenfreie Icons zurückgreifen. Sucht einfach mal im Internet nach "social media icons", und achtet darauf dass die Bilder kostenlos sind und keine Rechte verletzt werden! Ein paar besonders schöne findet ihr z.B. unter den folgenden Links: 

verschiedene: http://www.drweb.de/ und http://webdesignledger.com/

Twitter: http://www.drweb.de/ und http://www.designtrax.de/  

RSS-Feeds: http://www.drweb.de/

• Oder ihr verbindet beide Varianten, so wie ich das getan habe: Ich habe mir ein paar hübsche Icons heruntergeladen und mit einem Bildbearbeitungsprogramm (z.B. GIMP) auf meinen Blog passend "zugeschnitten". Im konkreten Beispiel mit dem Twitter-Button habe ich drei Bildebenen verwendet: eine Ebene mit dem Twittervogel, eine Ebene mit dem Text ("Verfolgt mich!") und eine Ebene mit dem grün-weißen-Farbverlauf. Dazu habe ich noch einen Bildrahmen gemacht und fertig war das Social Media Icon für meinen Blog!

Wie ihr mittels HTML ganz einfach die Verknüpfung zur Webseite eurer Wahl und einen Tooltip erstellen könnt, habe ich euch hier schon mal ausführlich beschrieben:


http://lea27784.blogspot.com/2010/02/blog-tricks-bild-mit-tooltip-und-link.html




Ich hoffe ich konnte euch weiterhelfen?