Social Likes: Simple Teilen-Schaltflächen mit Counter für WordPress und Co.

share

Um in WordPress bzw. in Webseiten Teilen-Buttons für soziale Netzwerke zu integrieren, gibt es diverse Wege. Einer davon hört auf den simplen Namen Social Likes. Es handelt sich dabei um einen Generator, der für Facebook, Google+, Twitter und Pinterest Teilen-Schaltflächen inklusive Share-Counter in verschiedenen Designs erstellt.

Integriert wird der Dienst dann sehr einfach. Javascript-Datei, jQuery und CSS-Datei einbinden (wird auch bei cndjs gehostet), HTML-Code an die gewünschte Stelle in der Webseite einfügen und das war es auch schon. Nachfolgend mal eine simple beispielhafte Einbindung.

Javascript- und CSS-Dateien integrieren:

<link rel="stylesheet" href="social-likes_birman.css">
<script src="jquery.min.js"></script>
<script src="social-likes.min.js"></script>

Teilen-Div integrieren, URL und Titel als Beispiel für WordPress:

<div class="social-likes" data-url="<?php the_permalink(); ?>" data-title="<?php the_title(); ?>">

<div class="facebook" title="Share link on Facebook">Facebook</div>

<div class="twitter" title="Share link on Twitter" data-via="renehesse">Twitter</div>

<div class="plusone" title="Share link on Google ">Google </div>

<div class="pinterest" title="Share image on Pinterest" data-media="https://flip.de/wp-content/uploads/2014/05/share.png">Pinterest</div>

</div>

Und so könnten dann die integrierten Buttons ausschauen:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/social-likes/3.0.3/social-likes_birman.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/social-likes/3.0.3/social-likes.min.js"></script>

<div style="margin: 30px 0;">
<div class="social-likes social-likes_vertical" data-url="https://flip.de/social-likes-simple-teilen/" data-title="Social Likes: Simple Teilen-Schaltfläche mit Counter für WordPress und Co.">
<div class="facebook" title="Share link on Facebook">Facebook</div>
<div class="twitter" title="Share link on Twitter" data-via="renehesse">Twitter</div>
<div class="plusone" title="Share link on Google+">Google+</div>
<div class="pinterest" title="Share image on Pinterest" data-media="https://flip.de/wp-content/uploads/2014/05/share.png">Pinterest</div>
</div>
</div>

Weitere Details und Anpassungsmöglichkeiten zu Social Likes sind auch auf auf Github zu finden.

Teilen

Hinterlasse einen Kommentar
Du kannst auch als Gast kommentieren (Anleitung). DISQUS respektiert „Do Not Track“ und bietet einen Datenschutz-Modus an. Informationen zum Datenschutz auf FLIP.de findest du hier.
Du bist hier: / / / ...