Inzwischen findet sich auf vielen Websites eine Social-Network-Verlinkung.
Wenn man nicht ein fertiges Plugin nutzen möchte, welches zum Beispiel von den Anbietern wie Facebook angeboten wird, kann man sich leicht selbst ein Icon basteln.
Dieses beinhaltet dann nur die Verlinkung zum eigenen Profil, keine „Gefällt mir“ Zählung.
Der Vorteil ist, dass man im Design der Icons ganz frei sein kann. Zudem werden nicht beim Aufruf der Seite direkt Besuchsdaten an das Social-Network übermittelt. Das verhindert datenschutzrechtliche Magenschmerzen, der zumindest mit einer Anpassung der Datenschutzerklärung begegnet werden müsste.
Wir sind im Web auf eine sehr schicke Variante eigener „Bookmarks“ gestoßen:
Integrate SexyBookmarks into any HTML page with JavaScript
Die fanden wir schon ganz niedlich, dachten uns aber: Das geht auch einfacher…
Wir kamen auf die Idee, uns selbst versteckte Icons zu basteln.
Drei Icons mit dem Effekt des Auftauchens und Verschwindens beim Darüberfahren mit der Maus, das lässt sich auch über CSS steuern.
Man benötigt für jedes Icon zwei Bilder: Eines, das halb abgetaucht ist und eines, das ganz hervorguckt.
Beispiel in Aktion: Unten rechts in der Ecke.
www.jkdv.de
HTML Code
<div id=“SN_icons“>
<ul id=“SN_menue“>
<li><a href=“http://www.facebook.com/name.xy“ id=“facebook“ target=“_target“> </a></li>
<li><a href=“http://www.twitter.com/name_xy “ id=“twitter“ target=“_target“> </a></li>
<li><a href=“https://profiles.google.com/namexy “ id=“google“ target=“_target“> </a></li>
</ul>
</div>
CSS Code
div#SN_icons {
width:150px;
height:36px;
}
ul#SN_menue {
list-style:none;
}
ul#SN_menue li {
width:49px;
height:36px;
float:left;
}
ul#SN_menue li a {
width:49px;
height:36px;
display:block;
text-decoration:none;
}
ul#SN_menue li a#facebook {
background-image:url(images/SN_Icons/SN_facebook_unten.png);
}
ul#SN_menue li a#facebook:hover {
background-image:url(images/SN_Icons/SN_facebook_oben.png);
}
ul#SN_menue li a#twitter {
background-image:url(images/SN_Icons/SN_twitter_unten.png);
}
ul#SN_menue li a#twitter:hover {
background-image:url(images/SN_Icons/SN_twitter_oben.png);
}
ul#SN_menue li a#google {
background-image:url(images/SN_Icons/SN_google_unten.png);
}
ul#SN_menue li a#google:hover {
background-image:url(images/SN_Icons/SN_google_oben.png);
}
Flott eingebaut, sieht niedlich aus, wenig aufdringlich und macht doch etwas her…
