Wie auf seine Profile in Social Networks linken?

Um mein Blog persönlicher zu gestalten, wollte ich im Menü ähnlich wie in diesem Smashing Magazine Artikel unter Punkt 9 auf meine Profile in Social Networks verlinken. Als Erstes habe ich deshalb nach passenden WordPress Plugins gesucht, leider waren die gefundenen Plugins wie zum Beispiel das Follow Me Plugin nicht meinen Ansprüchen genügend: Entweder haben Social Networks gefehlt oder die Links waren nicht vernünftig style- oder beschriftbar.

Deshalb habe ich eine eigene Lösung gebastelt, wie Ihr am rechten Rand unter dem Punkt “Folgt Mir” sehen könnt. Dieses Menü besteht aus einem Text Widget für die Sidebar mit folgendem HTML Code:

1
2
3
4
5
6
7
8
9
10
11
<ul>
<li>
<a class="favicon_facebook" href="http://www.facebook.com/people/Benjamin-Votterle/1650903485">Facebook</a>
</li><li>
<a class="favicon_lastfm" href="http://www.lastfm.de/user/voetzi">Last.FM</a>
</li><li>
<a class="favicon_twitter" href="http://twitter.com/voetzi">Twitter</a>
</li><li>
<a class="favicon_xing" href="http://www.xing.com/profile/Benjamin_Voetterle">Xing</a>
</li>
</ul>

Und ich habe die CSS Datei meines Themes um diese Zeilen ergänzt:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#sidebar .textwidget ul li {
    background: transparent none 0 0;
    padding-left: 0px;
    margin: 4px 0;
    height:20px;
}
#sidebar .textwidget ul li a {
    padding: 1px 0 2px 25px;
        background-repeat: no-repeat;
        background-position:0 0;
}

/*Social Network Definitionen*/
#sidebar .textwidget ul li a.favicon_twitter {
    background-image: url(images/favicon-twitter.png);
}
#sidebar .textwidget ul li a.favicon_xing {
    background-image: url(images/favicon-xing.png);
}
#sidebar .textwidget ul li a.favicon_facebook {
    background-image: url(images/favicon-facebook.png);
}
#sidebar .textwidget ul li a.favicon_lastfm {
    background-image: url(images/favicon-lastfm.png);
}

Schließlich habe ich noch die verwendeten Favicons in das images Verzeichnis meines Themes kopiert.

Ich bin der Meinung, dass dieser Weg eine einfache und schnell erweiterbare Lösung darstellt. Wenn es bis nach meinen Prüfungen noch kein passendes Plugin gibt, werde ich eines für diesen Anwendungsfall bauen. Bis dahin viel Spaß mit meiner Lösung. :mrgreen:

Das sag ich oder frag ich noch

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>