Voeg social media buttons toe aan je post

Het gebruik van social media buttons is niet meer weg te denken uit webwereld. Met wordpress is er natuurlijk altijd wel een plugin te vinden die je dit werk uit handen neemt, maar als het kan gebruik ik liever code. Helder, en eenduidig. En je hoeft niet te updaten.

Hoe plaats je deze buttons voor twitter, facebook, pinterest en linkedin onderaan je post?

1. Je opent je functions.php en plakt daarin:

[code type=codetype]
add_action( ‘genesis_after_post_content’, ‘social_media’, 5 );
function social_media() {
if (!is_page()) { ?>
<div id=”social_media”>
xxxxx
</div><!–end social_media–>
<?php } }
[/code]
Ga je nu naar de voorkant van je site dan zie je nu onderaan elke post of pagina xxxx staan. Dit is dus de plek waar de buttons komen.

Mocht je liever een andere plek willen waar de buttons staan, zoek dan in visual-hook-guide van genesis naar een betere plek. Vervang dan genesis_after_post_content door nieuwe code.

NB. Deze plaats bepaling is specifiek voor het genesis-framework geschreven. Voor andere framework heb je een andere manier van coderen om buttons op de juiste plek te krijgen. De code hieronder is universeel. Ook te gebruiken buiten genesis.

2. Per button code toevoegen

Je doet dit op de plek waar nu de xxxx staat in de functions.php. Om alles makkelijk te kunnen stylen met css zet ik overal div’s omheen.

Twitter

[code type=codetype]<div class=”twitter”>
<a href=”https://twitter.com/share” class=”twitter-share-button” data-url=”<?php the_permalink(); ?>” data-text=”<?php the_title(); ?>” data-via=”HIER_JE_TWITTERNAAM”>Tweet</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>  <!–end twitter–>
[/code]
Wil je zelf een iets andere button, groter of verticaal, ga naar https://twitter.com/about/resources/buttons#tweet

Linkedin

[code type=codetype]
<div class=”linkedin”>
<script src=”http://platform.linkedin.com/in.js” type=”text/javascript”> </script>
<script type=”IN/Share” data-url=”<?php the_permalink(); ?>” data-counter=”right”> </script>
</div><!–end linkedin–>
[/code]
Wil je een ander soort LinkedIn button ga dan naar https://developer.linkedin.com/plugins/share-plugin-generator om zelf code te genereren.

Facebook

[code type=codetype]
<div class=”facebook”>
<div id=”fb-root”  class=”soc_med”></div>
<script src=”//connect.facebook.net/nl_NL/all.js#xfbml=1″></script>
<fb:like href=”<?php the_permalink() ?>” send=”false” show_faces=”false” action=”like” font=”” layout=”button_count”></fb:like>
</div><!– end facebook–>
[/code]
Voor een aangepaste facebook-button ga je naar https://developers.facebook.com/docs/reference/plugins/like/

Pinterest

[code type=codetype]
<div class=”pinterest”>
<a href=”http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php echo genesis_get_image( array( ‘format’ => ‘url’ ) ); ?>&description=<?php the_title(); ?>” count-layout=”horizontal”>
<img border=”0″ src=”//assets.pinterest.com/images/PinExt.png” title=”Pin It” /></a> <script type=”text/javascript” src=”//assets.pinterest.com/js/pinit.js”></script>
</div><!– end pinterest–>
[/code]
Voor home-made pinterest-buttons ga je naar http://business.pinterest.com/widget-builder/#do_pin_it_button

3. Mooi maken met css

Zonder css staan de buttons onder elkaar en aan elkaar vast. Daar gaan we wat aan doen.

Zorg eerst dat de div waar de buttons in staan mooi onder een post komen te staan:
[code type=codetype]
#social_media {
display: block;
height: 25px;
width: 100%;
margin: 10px 0 ;
}[/code]
Vervolgens zorg je dat de buttons (als je voor de horizontale hebt gekozen met de code hierboven) dat ze naast elkaar komen te staan op gelijke afstand:
[code type=codetype]
.facebook,
.twitter,
.linkedin,
.pinterest {
float: left;
width: 110px;
}[/code]

Veel plezier op alle social media met je blog!

Comments

  1. Marieke schreef dit

    Werkt als een zonnetje!
    Maar let op: gebruik in je stylesheet niet #social-media, maar #social_media.
    Anders klopt je css niet…

  2. Henny Kooijman schreef dit

    Ik zou graag het pinterest en blogger icoon toevoegen onder in mijn website of wel alles naar rechts boven brengen. Hoe doe ik dit want ik had het stukje gekopieerd en geplakt maar dit werkt niet? EEn collega van mijn man heeft via mijn domein deze website aangemaakt de rest moet ik zelf uitvogelen! Ook zou ik mijn naam in kleur willen wijzigen alleen kan ik in de css niet vinden waar? Zou iemand mij willen helpen? Alvast super bedankt en met vriendelijke groet, Henny Kooijman. http://www.trouwambtenaar-babbelaere.nl

    • Winy Schalke schreef dit

      Beste Henny,
      Het lijkt misschien eenvoudig maar je hebt toch wel wat minimale basiskennis nodig van webdesign om dit – zonder hulp van een webdesigner – aan je website te kunnen toevoegen.
      Om het zelf te kunnen doen moet je kunnen werken met een HTML-editor en een FTP-programma (om de code aan je functions.php te kunnen toevoegen) en iets weten van CSS (om de linkjes te laten verschijnen zoals jij dat wilt). Als dit te ingewikkeld voor je is raad ik je aan om degene die je website heeft aangemaakt even om hulp te vragen.
      Veel succes!

  3. Jessica schreef dit

    Helaas was dit toch niet zo makkelijk als ik dacht. Het werkte niet, en toen ik de code weer weghaalde ging het helemaal mis. Ik kom nu niet meer mijn WordPress in en mijn site werkt niet meer. Geen idee hoe ik dit moet oplossen. Iemand wel een idee? Ik ben gehost bij hostgator.

    • Corine Voogt schreef dit

      Hallo Jessica, het zou goed kunnen dat je iets meer hebt weggehaald dan alleen de eerder toegevoegde code. Alleen al een haakje of komma ergens te veel verwijderen kan veroorzaken dat je site niet meer werkt. Probeer eerst de vorige versie van je functions.php terug te zetten (als je die bewaard had). Lukt dat niet dan zou je de site opnieuw kunnen opbouwen met behulp van backup-bestanden. Als je die ook niet hebt raad ik je aan om contact op te nemen met je host. Vaak kunnen zij een eerdere versie van je website terug zetten. Succes.

Wil je reageren?

Graag!
Je kunt hier een berichtje achterlaten. Het is noodzakelijk daarvoor je naam en emailadres in te vullen. Het emailadres zal nooit openbaar worden gemaakt.
Na goedkeuring door WP-bieb zal je bericht op de website verschijnen.

*