Social Bookmarks selbstgemacht

von 16 Kommentare

Howdy

Social Bookmarks

Social Bookmarks

Da ich kürzlich die Anfrage bekommen habe, wo ich denn meine Social Bookmarks (die kleinen Vierecke unter jedem Artikel) her habe, möchte ich kurz erklären, wie sie entstanden sind. Zuerst habe ich nach Plugins gesucht, die automatisch diese Bookmarks unter die Artikel setzt. Ich war mit keinem so richtig glücklich.. entweder waren die Icons nicht sonderlich hübsch oder der Effekt war nicht der, den ich wollte. Beim Googlen bin ich schließlich auf einen Blog gelandet, auf dem die Links zu bekannten Social Networks in WordPress-Artikel aufgelistet waren.

1
2
3
4
5
6
7
8
9
10
11

<ul id="socialbookmarks">
	<li><a id="delicious" rel="nofollow" href="http://delicious.com/post?url=<?php the_permalink(); ?>&amp;title=<?php echo urlencode(get_the_title($id)); ?>" title="Bookmark this post at Delicious">Delicious</a></li>
	<li><a id="digg" rel="nofollow" href="http://digg.com/submit?phase=2&amp;url=<?php the_permalink(); ?>" title="Submit this post to Digg">Digg</a></li>
	<li><a id="facebook" rel="nofollow" href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&amp;t=<?php echo urlencode(get_the_title($id)); ?>" title="Share this post on Facebook">Facebook</a></li>
	<li><a id="furl" rel="nofollow" href="http://furl.net/storeIt.jsp?t=<?php echo urlencode(get_the_title($id)); ?>&amp;u=<?php the_permalink(); ?>" title="Share this post on Furl">Furl</a></li>
	<li><a id="studivz" rel="nofollow" href="http://www.studivz.net/Link/ExternLink/Url/?u=<?php the_permalink();?>&amp;desc=<?php echo urlencode(get_the_title($id)); ?>&amp;prov=<?php bloginfo('name'); ?>" title="Share this post on StudiVZ">StudiVZ</a></li>
	<li><a id="stumbleupon" rel="nofollow" href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php echo urlencode(get_the_title($id)); ?>" title="Share this post at StumbleUpon">StumbleUpon</a></li>
	<li><a id="technorati" rel="nofollow" href="http://technorati.com/faves?add=<?php bloginfo('url'); ?>" title="Add <?php bloginfo('name'); ?> to your Technorati favorites">Technorati</a></li>
	<li><a id="twitter" rel="nofollow" href="http://twitter.com/home?status=<?php echo urlencode("Currently reading: "); ?><?php the_permalink(); ?>" title="Share this article with your Twitter followers">Twitter</a></li>
	<li><a id="reddit" rel="nofollow" href="http://reddit.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php echo urlencode(get_the_title($id)); ?>" title="Share this post on Reddit">Reddit</a></li>
</ul>

Diese hab ich mir dann in die single.php meines Themes kopiert. Die Links waren jetzt da.. es fehlten noch die Icons. Nach einer kurzen Suche auf Iconfinder bin ich fündig geworden: Das Aquaticus Set hat alle wichtigen Social Networks, die ich benötigte. Nur ein einziges war nciht dabei: studiVZ, das Bookmark musste ich mir dann noch schnell selber basteln. Als Vorlage hab ich einfach eines der anderen Icons genommen.

Social Bookmarks

Icons des Aquaticus Sets als CSS Sprite

Die Icons sollten auf den Seiten in schwarz-Weiß dargestellt sein und als Effekt wollte ich, dass sie farbig werden, wenn man mit der Maus drüber fährt. Dazu habe ich alle Icons samt Schwarz-Weiß-Version in eine Grafik gepackt und den Rest mit CSS erledigt (Stichwort: CSS Sprites).

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
26
27
28
29
30
31
32
33
34
35
36
37
38

#socialbookmarks {
	clear:both;
	height:48px;
	list-style:none;
	margin:20px;
}
#socialbookmarks li {
	float:left;
	margin-left:8px;
}
#socialbookmarks a {
	background-image:url(socialbookmarks.png);
	background-repeat:no-repeat;
	display:block;
	height:0;
	outline:none;
	overflow:hidden;
	padding-top:48px;
	width:48px;
}
#delicious {background-position:0 bottom;}
#digg {background-position:-48px bottom;}
#facebook {background-position:-96px bottom;}
#furl {background-position:-144px bottom;}
#studivz {background-position:-192px bottom;}
#stumbleupon {background-position:-240px bottom;}
#technorati {background-position:-288px bottom;}
#twitter {background-position:-336px bottom;}
#reddit {background-position:-384px bottom;}
#delicious:hover {background-position:0 0;}
#digg:hover {background-position:-48px 0;}
#facebook:hover {background-position:-96px 0;}
#furl:hover {background-position:-144px 0;}
#studivz:hover {background-position:-192px 0;}
#stumbleupon:hover {background-position:-240px 0;}
#technorati:hover {background-position:-288px 0;}
#twitter:hover {background-position:-336px 0;}
#reddit:hover {background-position:-384px 0;}

Wenn euch das hier zuviel ist, könnt ihr euch auch einfach eine ZIP mit den ganzen Daten runterladen: social_bookmarks.zip

Wie es im Live-Betrieb aussieht, seht ihr ja gleich etwas weiter unten.. ;)

Ähnliche Artikel, die dich vielleicht auch interessieren könnten...

16 Kommentare RSS

1
Thorsten

Hallo,
deine Social Bookmarks gefallen mir.. ich habe das auch mal versucht, aber es klappt nicht so ganz. der wandelt den php-code in dem link nicht um sonder gibt die zeichen so aus. muss ich die links in eine .php datei speichern?

2
Norman Norman

Hallo Thorsten,
die Bookmarks sind speziell für WordPress-Themes gemacht. Wenn du sie in normalen HTML-Dateien benutzen möchtest, müsstest du schon den php-Code ersetzen. Anhand der Bookmarks auf meiner Seite, kannst du ja sehen, was du stattdessen eintragen musst.

3
Matthias Köhler Matthias Köhler

Hallo Norman,

entsprechend deiner super Anleitung habe ich versucht, die Social Bookmarks (bzw. 3 davon) in meiner single.php einzubinden. Meine Grafik basiert auf deiner Grafik, von daher sollten auch die Angaben der Pixel stimmen… (Grafik: http://twitpic.com/1rtp5g)

Die Listenansicht funktioniert einwandfrei (http://twitpic.com/1rtovd), aber das CSS-Sprite will partout nicht funktionieren. Ich nutze WP 3.0 RC 1, liegt es vielleicht an der WP-Version?

Danke schon mal, Gruß
Matthias

4
Norman Norman

Hi Matthias,
sieht so aus, als würde der Pfad zum Bild nicht stimmen. Check das am besten nochmal ab, ich könnte wetten, dass es daran liegt. Viel Glück ;)
EDIT: wenn ich mir deinen Blog so ansehen, scheinst du gar nicht das CSS mit eingebunden zu haben.. oder hast du es nur vorsichtshalber wieder entfernt?

6
Matthias Köhler Matthias Köhler

Ich nutze ein Theme von WooThemes. Die haben ein extra Customstyle-Sheet für Anpassungen des CSS, damit du das Original-Stylesheet nicht ändern musst und damit das Theme leichter updaten kannst…
Ich versuche mal, das CSS direkt ins Stylesheet einzufügen (oder steht das CSS bei dir mit in der single.php?)
Danke für deinen Tipp!

7
Matthias Köhler Matthias Köhler

Ok, Fehler gefunden! Es lag wirklich daran, dass ich den CSS-Code in die custom.css gepackt habe, anstatt in das “richtige” Stylesheet. Jetzt muss ich nur noch wieder deinen Code gegen den Meinigen tauschen ;)

Vielen Dank nochmal für deine Hilfe und die tolle Anleitung!

8
Norman Norman

Kein Problem :)
Firebug hilft einem übrigens schnell bei sowas, einfach nachsehen, welche Styles aus welchen Dateien greifen, da muss man dann nicht lange rätseln.

9
Anonymous

Social Bookmarks selbstgemacht – Norman’s Blog…

News über aktuelle Web Trends, CSS, jQuery, Firefox und andere Browser sowie neueste Kinofilme….

11
JaiBee JaiBee

Vielen Dank! Sieht super aus und lässt sich leicht anpassen.
Tipp: Mit kann man einen Shortlink für Twitter verwenden.

Gruß

12
JaiBee JaiBee

Hmm. Der Code wurde im vorherigen Beitrag verschluckt. Evtl. kannst du ihn wieder herholen.

14
Stefan

Ich finde diese Lösung sehr gut. Manchmal bleibt einem eben keine andere Möglichkeit als selbst etwas im Code anzupassen.

16
Fredy

Wow! Danke für die Anleitung. Wollte das schon lange einmal machen.
Gruss Fredy

Kommentieren

nach oben