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.
