Andreas Unkelbach
Werbung


Freitag, 30. Januar 2015
14:20 Uhr

Socialmedia Buttons für Profile per CSS Sprites oder CSS Box für XING, Google+, Twitter und Facebook

Auf der Seite designyourweb.info ist ein gut erklärter Artikel zur Erstellung von CSS Sprites ("Mit CSS Sprites die Website Performance steigern" leider derzeit nur per archive.org erreichbar) von Sascha Geperrt zu finden. CSS Sprites werden heutzutage häufig genutzt um die Ladezeit von Seiten zu minimieren. Hierbei werden Grafikelemente einer Seite in eine Datei gepackt und mittels der CSS Eigenschaften background-image und background-position ein- beziehungsweise ausgeblendet. Sofern man nicht selbst die Grafikdateien zurecht basteln möchte, bieten sich Webangebote wie SpritePad von wearekiss an.

Das  Blog mit Artikeln rund um das Thema Web-Design wurde im Rahmen einer Vorlesung "Online-Marketing - Search Engine Optimization" der Hochschule Heilbronn erstellt und wird derzeit wohl von drei Autoren betreut wird, so das hier wohl auch künftig noch weitere Artikel zu finden sind.

Ursprünglich bin ich auf diese Seite gelandet, da ich nach einer Möglichkeit gesucht hatte social media buttons für verschiedene Dienste ins Blog einzubinden, so dass hier ein Zugriff auf die einzelnen Profile wie XING, Facebook, Twitter oder auch Google Plus möglich ist.

Alternative: CSS Box für Link zu Profilen im "social web"

Da ich aber auch nicht einfach einen Link auf das jeweilige Profil setzen wollte, habe ich mich dazu entschlossen hier mittels CSS Buttons zu erstellen, die auch für den jeweiligen Dienst mit passenden Farben geeignet sind.

Entsprechend sind auf manche Unterseiten folgende Profilbuttons zu finden:

Social Media Buttons mit Hovereffekt in CSS
Dabei sind in der ersten Reihe die Buttons im Normalzustand zu sehen und in der zweiten Reihe werden diese etwas belichtet, wenn die Maus über den jeweiligen Button fährt. Hierzu erfolgte die Formatierung dieser Links jedoch nicht über Grafiken sondern per CSS- Klassen. Über die CSS Eigenschaften padding wurde um den eigentlichen Link ein Rahmen gesetzt und über border-radius die Ecken des Rahmen abgerundet. Hierbei wurde aus Kompatibilitätsgründen die CSS3 Eigenschaft border-radius um moz-border-radius für Mozilla (bspw. Firefox) und webkit-border-radius für Safari (Apples Browser) ergänzt. Ferner wurde über die Eigenschaft background: entsprechende Hintergrundfarben des jeweiligen Dienstes hinterlegt.

Die einzelnen Eigenschaften sind als Klassen in einer zentralen CSS Datei eingebunden:

Button für Facebook:

.btnfb {
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  color: #ffffff;
  background: #46629E;
  padding: 5px 5px 5px 5px;
  text-decoration: none;
}
.btnfb:hover {
  background: #5C7DC1;
  color: #ffffff;
  text-decoration: none;
}
Button für XING (* XING Premiummonat für Neumitglieder)
.btnxing {
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  color: #ffffff;
  background: #006567;
  padding: 5px 5px 5px 5px;
  text-decoration: none;
}
.btnxing:hover {
  background: #D5D700;
  color: #006567;
  text-decoration: none;
}
Button für Twitter:
.btntw {
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  color: #ffffff;
  background: #0084B4;
  padding: 5px 5px 5px 5px;
  text-decoration: none;
}
.btntw:hover {
  background: #007EAC;
  color: #ffffff;
  text-decoration: none;
}
Button für Google Plus:
.btngp {
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  color: #ffffff;
  background: #C83F2F;
  padding: 5px 5px 5px 5px;
  text-decoration: none;
}
.btngp:hover {
  background: #D45C4C;
  color: #ffffff;
  text-decoration: none;
}
Button für RSS Feed
.btnrss {
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  color: #ffffff;
  background: #F38C29;
  padding: 5px 5px 5px 5px;
  text-decoration: none;
}
.btnrss:hover {
  background: #FB9E3D;
  color: #ffffff;
  text-decoration: none;
}
Durch den Hover Effekt ändert sich dann die Hintergrundfarbe (bei XING auch die entsprechenden Textfarbe geändert). Dabei wurde sich bei den Farben auch an den einzelnen Farbcodes der jeweiligen Internetseite orientiert. Sehr hilfreich für eine solche Aufgabe ist das Addon ColorZilla für Firefox bzw. Google Chrome. Dieses integriert eine Pipete im Browser durch die der entsprechende Farbcode übernommen werden kann.

Zum Setzen eines Links kann nun im HTML Code mittels <a href="..." class="btnrss">Linkbeschreibung</a> ein Link mit entsprechenden abgerundeten Kasten dargestellt werden.

Beim RSS Link wurde ferner noch das RSS Symbol miteingefügt. Dieses ist über eine Webfont verwirklicht worden und im Artikel "Fontello - Icons als Webfonts per CSS einfügen" beschrieben.

Im Blog selbst wird das Ergebnis dann wie folgt angezeigt:

Aktuelle Infos und sonstige Profile

Facebook Twitter Google+ XING* RSS-Feed

* XING Premiummonat für Neumitglieder

Sollten Sie das Blog per RSS lesen, erfolgt leider keine Darstellung mit Formatierung.

Pagespeed, Socialshareprivacy und CSS Sprites für Sharebuttons

Weitere Informationen zur Ladezeitoptimierung einer Seite sind auch im Artikel "In eigener Sache: Updates der Seite (Technik und Design) - Fokus auf Responsives Webdesign und pagespeed" beschrieben.

Gerade in Sachen pagespeed bieten sich die eingangs erwähnten CSS Sprites durchaus an, da hier statt mehrere Verbindungen zum Server aufzubauen (um einzelne Grafiken zu laden) nur eine Datei geladen werden muss, die dann entsprechend eingebunden wird.
So haben auf dieser Seite auch die Socialshare Buttons zum Teilen der Beiträge in soziale Netzwerke ein gewisses Optimierungspotential und würden sich als Sprites anbieten.

Da auch hier im Blog schon die Teilen Funktion über die 2 Klicks für mehr Datenschutz unterhalb eines jeden Einzelartikel umgesetzt ist (siehe Artikel "Blog: 2 Klicks für mehr Datenschutz") wollte ich natürlich auch keine Folgenfunktion des jeweiligen Anbieters einbinden.

Zur Erinnerung: Handhabung des Social Share Plugins
Unter jeden Artikel findet sich eine Symbolleiste mit ausgeblendeten Funktionen der drei sozialen Webdienste (Facebook, Twitter und Google+).

Deaktivierte Share Dienste / Teilenfunktion

Sofern nun auf den Schalter oder das Icon geklickt wird, wird der entsprechende Dienst aktiviert.

Aktivierte Share Dienste / Teilenfunktion

Durch einen erneuten Klick können diese Daten dann in das jeweilige "soziale" Netzwerk als Posting / Tweet geteilt werden.


Theoretisch würde sich hier im Blog ebenfalls einbinden die 2 Klicks für mehr Datenschutz-Buttons als Sprites anzulegen und entsprechend die Ladezeit zu kürzen. Da hier aber die Seite ohnehin schon recht flott lädt (und ich das Javascript nicht erneut anpassen mag) sehe ich davon ab und habe lieber durch die RSS Lösung auf der Seite entsprechende Buttons eingefügt.

Für neuere Projekte könnte allerdings das Nachfolgeprojekt zu "2 Klicks für mehr Datenschutz" der c’t interessant sein. Hier wird auf eine "1 Klick für mehr Datenschutz" Lösung gesetzt. Diese Lösung "SHARIFF" ist im Artikel "Schützen und teilen Social-Media-Buttons datenschutzkonform nutzen" auf http://heise.de/-2463330 veröffentlicht.

 

Hinweis: Aktuelle Buchempfehlungen besonders SAP Fachbücher sind unter Buchempfehlungen inklusive ausführlicher Rezenssionen und Bestellmöglichkeit zu finden.
Espresso Tutorial - die digitale SAP Bibliothek

Diesen und weitere Texte von finden Sie auf http://www.andreas-unkelbach.de


Keine Kommentare

Kommentieren?


Beim Versenden eines Kommentars wird mir ihre IP mitgeteilt. Diese wird jedoch nicht dauerhaft gespeichert (siehe auch XII. Fremde Nutzung / Kommentarfunktion in der Datenschutzerklärung).

Eine Rückmeldung ist entweder per Schnellkommentar oder (weiter unten) als normalen Kommentar möglich. Eine persönliche Rückmeldung (gerne auch Fragen zum Thema) würde mich sehr freuen.

Schnellkommentar (Kurzes Feedback, ausführliche Kommentare bitte unten als normaler Kommentar)

Name (sofern kein Name angegeben wird erscheint Anonym):


Normaler Kommentar

Name:

E-Mail (wird nicht veröffentlicht):

Homepage:

Kommentar:


Hinauf




Werbung



Logo Andreas-Unkelbach.de
© 2004 - 2018 Andreas Unkelbach
Gießener Straße 75,35396 Gießen,Germany
andreas.unkelbach@posteo.de
Andreas Unkelbach

Stichwortverzeichnis
(Tagcloud)


Aktuelle Infos (Abo)

Facebook Twitter Google+

»Schnelleinstieg ins SAP Controlling (CO)« und »Berichtswesen im SAP ® ERP Controlling«
Privates

Kaffeekasse 📖 Wunschliste