Social Buttons via HTML und CSS positionieren

Nicht immer muss alles mittels PlugIns gelöst werden

Eine bestimmte Auswahl an Social Buttons soll auf einer Webseite platziert werden. Die Umsetzung soll über normales HTML umgesetzt werden, welches über ein externes CSS File parametrisiert werden soll. Im Anwendungsbeispiel kommt der HTML Code in einem WordPress Widget zum Einsatz und der CSS Code wird in der globale CSS Konfiguration hinterlegt. Dies hat den Vorteil, dass die Inhalte auf die persönlichen Wünsche abgestimmt werden können.

Jeder beliebiger Inhalt kann damit hinterlegt werden als auch die Position kann individuell bestimmt werden. Dies ist leider mit fertigen PlugIns für CMS Systeme nicht möglich. Hier im Beispiel zeige ich Euch eine vertikale als auch horizontale Positionierung für soziale Buttons, oder auch andere Inhalte! Und so funktioniert es! Zuerst benötigen wir etwas HTML Code, welche danach mit CSS in Position gebracht wird.

Hier der HTML Code:

<!–social share buttons start–>
<div class="social-single">

 

<div id="likebutton">
<div id="fb-root"></div>
<div class="fb-like" data-send="true" data-layout="button_count" data-width="120" data-show-faces="false"></div>
</div>

<div id="twitterbutton">
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="de">Twittern</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>

<div id="plusonebutton">
<g:plusone size="medium"></g:plusone>
<!– Platzieren Sie diese Render-Anweisung an einer geeigneten Stelle. –>
<script type="text/javascript">
  window.___gcfg = {lang: ‚de‘};

  (function() {
    var po = document.createElement('script‘); po.type = ‚text/javascript‘; po.async = true;
    po.src = ‚https://apis.google.com/js/plusone.js‘;
    var s = document.getElementsByTagName('script‘)[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</div>

<div id="rssbutton">
<a href="https://itler.net"><img src=https://itler.net/wp-content/themes/test/rss-button.png></a>
</div>

</div>
<!–social share buttons end–>

 

Hier im Beispiel kommen der Facebook, Twitter, Google+ und RSS Button zum Einsatz. Letzterer wird lokal am System gehostet! Alle Elemente wurden mit DIVS umpackt um eine genaue Ausrichtung zu erlauben, da ein einfachen aneinander reihen der Buttons nicht wirklich hübsch aussieht.

 

Über eine CSS Definition wird nun die Position der Buttons bestimmt.

Zuerst lassen wir uns die Button untereinander anzeigen:

/* Soziale Buttons Anfang */

.social-single {
margin: 17px 0 0 30px; width:100%;
}

#likebutton {
float: both;
margin-left: 0px;
margin-top:0px;
}

#twitterbutton {
float: both;
margin-left: 0px;
margin-top:6px;
}

#plusonebutton {
float: both;
margin-left: 0px;
margin-top: 1px;
}

#rssbutton {
float: both;
margin-left: 0px;
margin-top: 1px;
}

/* Soziale Buttons End */

 

Über die “Margin” Befehle könnt ihr nun die optimale Ausrichtung steuern.

Hier ein kleines Beispiel, wie es danach aussehen könnte!

 

Wollt ihr Euch die Buttons nebeneinander anzeigen lassen, könnt ihr es mit folgenden CSS Inhalt versuchen:

 

/* Soziale Buttons Anfang */

.social-single {
margin: 10px 0 0 0; width:100%;
}
#likebutton, #twitterbutton, #plusonebutton, #rssbutton {
float: left;
display: block;
}

#likebutton {
margin-top:0px;
margin-left: 5px;
margin-right: 5px;
}

#twitterbutton {
margin-top:0px;
margin-left: 5px;
margin-right: 5px;
}

#plusonebutton {
margin-top:0px;
margin-left: 5px;
margin-right: 5px;
}

#rssbutton {
margin-top:0px;
margin-left: 5px;
margin-right: 5px;
}

/* Soziale Buttons End */

 

Fertig! Eine grobe Richtlinie habt ihr nun, jetzt könnt ihr das Aussehen nach Euren Anforderungen anpassen!
Viel Spaß bei der Modifikation!