Social jQuery: Einheitliche Social-Buttons statt unterschiedlicher Code-Snippets

Wer Seiten oder Profile bei sozialen Netzwerken wie Facebook, Twitter und Google+ pflegt, bindet Links zu eben diesen Netzwerken gerne auf der eigenen Website ein. Statt sich mit den entsprechenden Quelltext-Snippets auseinanderzusetzen oder Buttons selbst zu basteln, können Social-Buttons auch einfach über Koottam Social jQuery eingebunden werden.

Beispiele für Social-Buttons mit dem Plugin

Mit dem Koottam-Social-jQuery-Plugin sind Buttons zu allen bekannten sozialen Netzwerken sowie RSS-Feeds schnell und einfach in die eigene Website eingebunden und angepasst. Neben dem Link zur jeweiligen Präsenz beim sozialen Netzwerk wird die Anzahl der Fans beziehungsweise Follower angezeigt. Außerdem garantiert das Social-jQuery-Plugin ein einheitliches Aussehen aller dargestellten Buttons.

Social jQuery einbinden

Wie der Name schon vermuten lässt, ist jQuery Voraussetzung, um das Plugin nutzen zu können. Damit die Social-Buttons auch ihr richtiges Aussehen erhalten, muss die mitgelieferte Stylesheet-Datei ebenfalls mit eingebunden werden:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="koottam/js/jquery.koottam.js"></script>

<link href="koottam/css/koottam.css" rel="stylesheet" />

Anschließend können die sozialen Netzwerke über einfache A-Elemente ausgezeichnet werden:

<a href="http://www.facebook.com/username" class="fb">Facebook</a>

Per JavaScript wird das A-Element aufgrund der vergebenen Klasse nun durch den per jQuery-Plugin bereitgestellten Social-Button ersetzt:

<script type="text/javascript">
  $(document).ready(function(){
    $(".fb").koottam({
      "id"            : "username",
      "method"        : "api",
      "theme"         : "facebook-blue",
      "icon_url"      : "koottam/img/facebook.png",
      "style"         : "image_count",
      "size"          : "default"
    });
  });
</script>

Über den Aufruf koottam() lässt sich der Social-Button konfigurieren. Über id wird der Benutzername beziehungsweise die ID angegeben, die man bei Facebook, Google+ und Co. hat. Und über method wird angegeben, ob man die entsprechende API des sozialen Netzwerkes nutzt.

Nur bei Facebook und Twitter gibt es die Möglichkeit, über die entsprechende API die Anzahl der Fans und Follower automatisch darzustellen. In allen anderen Fällen muss method jeweils auf custom eingestellt sein; eine automatische Darstellung der aktuellen Fans und Follower ist hierbei nicht möglich. Eine manuelle Angaben lässt sich per count darstellen:

<script type="text/javascript">
  $(document).ready(function(){
    $(".fb").koottam({
      "id"            : "beispielseite",
      "method"        : "custom",
      "theme"         : "facebook-blue",
      "icon_url"      : "koottam/img/facebook.png",
      "style"         : "image_count",
      "size"          : "default",
      "count"         : 465898
     });
  });
</script>

Social-Buttons konfigurieren

Für jedes unterstützte soziale Netzwerk sowie für RSS-Feeds liefert das Plugin ein eigenes Farbschema (theme) sowie ein eigenes Icon (icon_url). Farbschema und Icon lassen sich unabhängig voneinander anpassen. Außerdem gibt es vier unterschiedliche Darstellungsmöglichkeiten (style). Die Zahl kann zusammen mit dem Bild („image_count“), zusammen mit dem Schriftzug („logo_count“), zusammen mit Bild und Schriftzug („image_logo_count“) sowie zusammen mit Bild und ID/Benutzername angezeigt werden (image_id_count).

Unterschiedliche Darstellungsmöglichkeiten der Buttons

Außerdem lassen sich die Buttons in zwei unterschiedlichen Größen (size) anzeigen. Neben der Standardgröße (default) gibt es die Möglichkeit der Anzeige der Buttons auch in groß (large).

Fazit: Mit dem Koottam-Social-jQuery-Plugin lassen sich soziale Netzwerke und RSS-Feeds sehr einfach und einheitlich gestaltet in die eigene Website einbinden. Hat ein Besucher JavaScript ausgeschaltet, bekommt er zumindest einen Link zur jeweiligen Profilseite dargestellt.

(dpe)