Social Bookmarks selbstgemacht

von

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.. ;)

Die hier könnten dich auch interessieren…

73 Kommentare RSS

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?

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.

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

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?

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!

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!

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.

Anonymous

Social Bookmarks selbstgemacht – Norman’s Blog…

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

JaiBee

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

Gruß

JaiBee

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

Norman

hm leider nicht.. das code-tag ist zwar da aber es ist leer, versuchs doch nochmal :)

Stefan

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

Fredy

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

Boyd

What’s up to all, it’s really a pleasant for me to pay a visit this site, it contains priceless
Information.

noahwilk

My name is Noah Wilkinson. And I am a professional Content writer with many years of experience in writing.

My interest is to solve problems related to writing. And I have been doing it for many years. I have been with several associations as a volunteer and have assisted clients in many ways.
My love for writing has no end. It is like the air we breathe, something I cherish with all my being. I am a passionate writer who started at an early age.
I’m happy that I`ve already sold several copies of my works in different countries like England and others too numerous to mention.
I also work in an organization that provides assistance to many clients from different parts of the world. Clients always come to me because I work no matter how difficult their projects are. I help them to save time, because I feel fulfilled when people come to me for professional help.

Ghost Writer – Noah – Funnyhomework Corp

victoriapatton

Hello ,
I’m Victoria Patton.
If you’ve ever been overscheduled and couldn’t finish a academic paper, then you’ve come to the right place. I work with students in all areas of the writing process . I can also write the paper from start to finish.
My career as a scholarly writer started during high school. After learning that I was very capable in the field of academic writing, I decided to take it up as a profession.

Professional Academic Writer- Victoria Patton- A2zcareers Team

Mona

An impressive share! I have just forwarded this onto a
colleague who had been doing a little homework on this.
And he in fact bought me lunch due to the fact
that I stumbled upon it for him… lol. So allow me to reword this….
Thank YOU for the meal!! But yeah, thanx for spending
time to talk about this subject here on your web site.

BlackVuempw

удалите,пожалуйста! .

pokersenang.date

Hi there, You have performed an excellent job. I’ll definitely digg it and in my view suggest to my friends.
I am sure they will be benefited from this web site.

shylabark

Hello and welcome to my website . I’m Shyla.
I have always dreamed of being a writer but never dreamed I’d make a career of it. In college, though, I assisted a fellow student who needed help. She could not stop telling me how well I had done. Word got around and someone asked me for to help them just a week later. This time they would compensate me for my work.
During the summer, I started doing research papers for students at the local college. It helped me have fun that summer and even funded some of my college tuition. Today, I still offer my writing services to students.

Academic Writer – Shyla – Paperhaberdasher Corps

shylabark

Hello everyone, it’s Shyla here!
I work as an academic writer and have created this content with the intent of changing your life for the better. I started honing my writing skills in high school. I learned that my fellow students needed writing help—and they were willing to pay for it. The money was enough to help pay my tuition for my remaining semesters of college.
Ever since college, I have continued to work as a professional writer. I was hired by a writing service based in the United Kingdom. Since then, the essays that I have written have been sold around Europe and the United States.
In my line of work, I have become used to hearing, “Shyla, can you help me meet my writing assignment deadline?” I know that I can provide this service.

Academic Writer – Shyla Barker – Paperhaberdasher Band

Clamcasevcu

удалите,пожалуйста! .

Quincy

Useful info. Fortunate me I found your site unintentionally, and I am
shocked why this twist of fate didn’t happened earlier! I bookmarked it.

katyapat

Welcome to my blog ! I’m Katya.
Even though I jokingly credit my aunt for my writing talent, I know that it is a ability I have fostered from childhood. Though my mother is a writer, I also started out young.
I’ve always had a way with words, according to my favorite professor . I was always so excited in English when we had to do a research paper .
Now, I help current learners achieve the grades that have always come easily to me. It is my way of giving back to schools because I understand the troubles they must overcome to graduate.

Katya Patel – Academic Writer – Awejournal Corps

카지노검증사이트

A motivating discussion is definitely worth comment. I think that you ought to write more about
this issue, it may not be a taboo subject but typically people don’t speak
about such subjects. To the next! Kind regards!!

https://taean-softanma0.blogspot.com

I used to be recommended this blog through my cousin. I am now not certain whether or not
this put up is written by means of him as no one else realize such
certain about my problem. You are amazing! Thanks!

lynseyvel

Hello All
Thanks for checking out my writing blog . My name is Lynsey Velasquez.
I have worked since high school in this niche. My interest in writing started at a young age. I wrote poetry as a child and eventually went on to work with my school newspaper.
This early tryst into reporting eventually led me to academic writing. There is plenty of work for professional writers. I specialize in research papers , but have the skills to do all types of academic writing.
Contact me for more information about rates and a price quote. I’m looking forward to helping you.

Academic Writer – Lynsey – Iseet-Papers Team

https://uljin-softmassage.blogspot.com

Thanks on your marvelous posting! I quite enjoyed reading it, you happen to be
a great author.I will make certain to bookmark your blog and will often come back later on. I want to encourage yourself
to continue your great posts, have a nice evening!

https://pohang-opmassage5.blogspot.com

Unquestionably believe that which you said. Your favorite reason seemed to
be on the web the easiest thing to be aware of. I say to you, I
definitely get irked while people consider worries that
they plainly don’t know about. You managed to hit the nail upon the top
and also defined out the whole thing without having side-effects , people can take a signal.
Will likely be back to get more. Thanks

인터넷바둑이

Excellent web site. A lot of useful info here.
I am sending it to some friends ans also sharing in delicious.
And certainly, thanks to your effort!

millarleon

Hi and welcome to my blog . I’m Leona.
I have always dreamed of being a writer but never dreamed I’d make a career of it. In college, though, I assisted a fellow student who needed help. She could not stop telling me how well I had done. Word got around and someone asked me for to help them just a week later. This time they would pay me for my work.
During the summer, I started doing academic writing for students at the local college. It helped me have fun that summer and even funded some of my college tuition. Today, I still offer my writing skills to students.

Professional Writer – Leona – Newwpdesigns Team

sidney

Hello, my name is Sidney!

I`m a professional writer and I`m going to change your lifes onсe and for all
Writing has been my passion for a long time and now I can`t imagine my life without it.
Most of my works were sold throughout Canada, USA, China and even Australia. Also I`m working with services that help people to save their nerves.
People ask me “Hey, Sidney, I need your professional help” and I always accept the request, `cause I know, that only I can solve all their problems!

Professional Academic Writer – Sidney – Natalie Crawford Corp

lucille

Thanks for stopping by my page! I’m Lucille.
Even though I jokingly credit my aunt for my writing talent, I know that it is a talent I have fostered from childhood. Though my mother is a writer, I also started out young.
I’ve always had a way with words, according to my favorite educator. I was always so excited in science when we had to do a research paper .
Now, I help current students achieve the grades that have always come easily to me. It is my way of giving back to schools because I understand the obstacles they must overcome to graduate.

Lucille – Academic Writer – http://www.fleaworld.com Team

week twenty four

Great post, you have pointed out some great details,
I likewise think this is a very superb website.

OscarChows

справка 095 – справка для получения водительского удостоверения, Медицинская справка для приема на работу

lowrie

Hello everyone, it’s Lowrie Aston here!
I work as an academic writer and have created this content with the intent of changing your life for the better. I started honing my writing talent in my school years. I learned that my fellow students needed writing help—and they were willing to pay for it. The money was enough to help pay my tuition for my first semester of college.
Ever since high school, I have continued to work as an academic writer. I was hired by a writing company based in the United Kingdom. Since then, the dissertations that I have written have been sold around Europe and the United States.
In my line of work, I have become accustomed to hearing, “Lowrie, can you help me meet my writing assignment deadline?” I know that I can save their time.

Academic Writer – Lowrie – My Custom Essay Confederation

keiren

My name is Keiren Broadhurst. And I am a professional Content writer with many years of experience in writing.

My primary goal is to solve problems related to writing. And I have been doing it for many years. I have been with several associations as a volunteer and have assisted clients in many ways.
My love for writing has no end. It is like the air we breathe, something I cherish with all my being. I am a passionate writer who started at an early age.
I’m happy that I`ve already sold several copies of my works in different countries like USA, Russia and others too numerous to mention.
I also work in a company that provides assistance to many students from different parts of the world. People always come to me because I work no matter how complex their projects are. I help them to save money, because I feel fulfilled when people come to me for professional help.

Academic Writer – Keiren Broadhurst – standrewspres.org Corps

irpizmir.com

If you are going for finest contents like me, simply go to
see this site daily as it presents quality contents, thanks

aprsms.com

Fantastic blog you have here but I was wondering if you knew of any message boards that cover the same topics discussed here?
I’d really love to be a part of group where I can get feed-back from other
experienced individuals that share the same interest.

If you have any recommendations, please let me know.
Cheers!

모바일 바카라

Its not my first time to pay a visit this site, i am browsing this site dailly and obtain pleasant facts from here every day.

예스카지노쿠폰

Hi there, the whole thing is going nicely here and ofcourse every
one is sharing information, that’s actually good, keep up writing.

WhltePacck

ВАЙТПАК
Компания полного производственного цикла.
Специализация: вторичная переработка полимерных материалов.
Конечный продукт: техническая упаковка, бытовые пакеты для мусора, индустриальные мешки для мусора, полиэтиленовая пленка, стрейч пленка и производные.
https://www.white-pack.ru

Brantpoory

Жилье должно быть комфортным. Именно поэтому строительство нужно доверить профессионалам. Каждая строительная специальность по своему интересна, и может принести неплохой результат, если к ней подойти правильно

aqivaw

продвижение сайта на wordpress Сейчас весь рынок – это сайты, народ отыскивают там все, что им необходимо, любой товар или информацию. И согласно статистике, обычно, они делают это через популярные поисковые системы Яндекс или Гугл.

uqykolu

порода девон рекс короткошерстная разновидность кошек, прибывшая к нам из Англии. Они обладают добрым, ласковым норовом и не менее приятной обликом. описание породы девон-рекс говорит, что средний вес животных составляет от 2,5 кг до 4,5 кг. Кот девон-рекс обычно мощнее и больше, чем кошка.

edulo

обслуживание компьютеров петербург перейти обслуживание компьютеров санкт-петербург

Modern amenities

Hi, always i used to check weblog posts here early in the
break of day, as i like to learn more and more.

Kommentieren

nach oben