Het nadeel van WordPress Sharing plugins -voor mij- is dat ze vaak zorgen voor een tragere WordPress site. Er wordt externe JavaScript geladen, en/of allerlei tellertjes om het aantal shares weer te geven. Leuk, maar traag, en dat is niet goed voor geoptimaliseerde WordPress-omgeving. In dit artikel maken we onze eigen WordPress share knoppen (deelknoppen) met behulp van wat CSS en een WordPress shortcode. Het weergeven van de deelknoppen gebeurt met een text widget.

Sharing: waarom berichten delen?

Als jij een interessant artikel of blogbericht op jouw website hebt geplaatst, dan wil je graag dat anderen dat lezen. En iedere keer dat een artikel van jou wordt gedeeld, bereikt het tientallen of honderden nieuwe mensen.

Hierom is het belangrijk dat je de bezoeker een mogelijkheid biedt om het bericht te delen. Er zijn tientallen WordPress Sharing plugins te vinden, maar zoals gezegd vind ik ze vaak erg traag.

En het is leuker zélf wat te bouwen.

Wat we hiervoor nodig hebben is alleen de CSS-bestanden van cferdinandi’s Social Sharing op GitHub. Nadat je het ZIP-bestand hebt gedownload en uitgepakt vind je de CSS-bestanden in de map social-sharing-master\dist\css. Het gaat om kraken-buttons.min.css en social-sharing.min.css.

Je uploadt via FTP de bestanden naar jouw WordPress website, bijvoorbeeld naar de map wp-content/uploads.

Het pad naar de CSS-bestanden heb je later nodig.

WordPress share knoppen shortcode

Zoals gezegd, we willen de share knoppen gebruiken als een shortcode, die je kunt plaatsen in een text widget. Hiervoor hebben we wat PHP-code nodig. Oei, eng… Nou, dat valt wel mee hoor, je vindt de code hieronder:

function func_sharethis( $atts, $content=null ) {
  global $post;
  if( is_single() ) {
    wp_enqueue_style( 'social-sharing', "/wp-content/uploads/social-sharing.min.css", array(), '2', 'all' );
    wp_enqueue_style( 'social-sharing', "/wp-content/uploads/kraken-buttons.min.css", array(), '2', 'all' );
	  
      $post_url = get_permalink( $post->ID );
      $post_title = get_the_title( $post->ID );
      $post_meta = get_post_meta( $post->ID, 'description', true );
	  
	  $output = '
	    <a class="btn btn-tweet" 
	      target="_blank" href="https://twitter.com/home/?status=' . $post_title . ' 
	      at ' . $post_url . ' via @Saotn_Org" title="Share ' . $post_title . ' 
	      on Twitter"> Twitter </a>
	    <a class="btn btn-facebook" 
	      target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=' . $post_url .'" 
	      title="Share ' . $post_title . ' on Facebook"> Facebook </a>
	    <a class="btn btn-google" 
	      target="_blank" href="https://plus.google.com/share?url=' . $post_url . '">
	       Plus on Google+ </a>
	    <a class="btn btn-linkedin" 
	      target="_blank" href="https://www.linkedin.com/shareArticle?mini=true&url=' . 
	      $post_url . '&title=' . $post_title . '&summary=' . $post_meta . '&source=' . 
	      $post_url . '"> LinkedIn </a>
	    <a class="btn btn-tumblr" 
	      target="_blank" href="http://www.tumblr.com/share/link?url=' . $post_url . '
	      &description=' . $post_meta . '"> Tumblr </a>
	    <a class="btn btn-reddit" 
	      target="_blank" href="http://www.reddit.com/submit?url=' . $post_url . '
	      title=' . $post_title . '"> Reddit </a>';
	  
	  return $output;
	}
}
add_shortcode( 'share_this', 'func_sharethis' );

Plaats dit onderaan het functions.php bestand van het thema dat je gebruikt. Na het opslaan kun je een WordPress text widget op de desgewenste plek activeren met de shortcode [share_this].

Als je een beetje thuis bent in WordPress en PHP dan zie je direct wat hier gebeurt. Ben je dat niet, dan volgt hier wat uitleg (uitleg onder de code):

  • if( is_single() ) {
    Met deze if conditie zorgen we ervoor dat de shortcode alléén op WordPress berichten wordt weergegeven.
  • wp_enqueue_style( 'social-sharing', "/wp-content/uploads/social-sharing.min.css", array(), '2', 'all' );
    wp_enqueue_style( 'social-sharing', "/wp-content/uploads/kraken-buttons.min.css", array(), '2', 'all' );

    De social-sharing CSS-bestanden worden met wp_enqueue_style() aan de door WordPress gegenereerde pagina’s toegevoegd.
  • post_url = get_permalink( $post->ID );
    Met $post_url = get_permalink( $post->ID ); slaan we de Permalink (URL) van de post op in een variabele die we later kunnen gebruiken.
  • $post_title = get_the_title( $post->ID );
    Met $post_title = get_the_title( $post->ID ); slaan we de titel van het bericht op in een andere variabele voor later gebruik in de functie.
  • $post_meta = get_post_meta($post->ID, 'description', true);
    De get_post_meta functie ($post_meta = get_post_meta( $post->ID, 'description', true );) geeft ons de samenvatting – of description – van een bericht.
  • En uiteindelijk voegen we de social media links toe in $output, en wordt die totale uitvoer geretourneerd naar WordPress. Dit zijn de links zoals je ze in de social-sharing documentatie vindt, en iets aangepast om de URL, titel en samenvatting van het bericht op onze site bevatten:
  • $output = '
      <a class="btn btn-tweet" 
        target="_blank" href="https://twitter.com/home/?status=' . $post_title . ' 
        at ' . $post_url . ' via @Saotn_Org" title="Share ' . $post_title . ' 
        on Twitter"> Twitter </a>
      <a class="btn btn-facebook" 
        target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=' . $post_url .'" 
        title="Share ' . $post_title . ' on Facebook"> Facebook </a>
      <a class="btn btn-google" 
        target="_blank" href="https://plus.google.com/share?url=' . $post_url . '"> 
        Plus on Google+ </a>
      <a class="btn btn-linkedin" 
        target="_blank" href="https://www.linkedin.com/shareArticle?mini=true&url=' . 
        $post_url . '&title=' . $post_title . '&summary=' . $post_meta . '&source=' . 
        $post_url . '"> LinkedIn </a>
      <a class="btn btn-tumblr" 
        target="_blank" href="http://www.tumblr.com/share/link?url=' . $post_url . '
        &description=' . $post_meta . '"> Tumblr </a>
      <a class="btn btn-reddit" 
        target="_blank" href="http://www.reddit.com/submit?url=' . $post_url . ' 
        title=' . $post_title . '"> Reddit </a>
    ';
    	  
    return $output;
  • add_shortcode( 'share_this', 'func_sharethis' );
    Met bovenstaande add_shortcode knopen we de PHP-functienaam func_sharethis aan de shortcode naam share_this.

PHP single en double quotes

Wil je de bovenstaande PHP-code iets aanpassen, hou dan rekening met PHP’s single en double quote-tekens: ' versus ". Eén foutje kan je WordPress blog ontoegankelijk maken tot de fout gevonden en verholpen is.

In de PHP documentatie over strings vind je alle belangrijke informatie.

Eindresultaat eigen share knoppen

Het eindresultaat:

Twitter Facebook Plus on Google+ LinkedIn Tumblr Reddit

Ben je een beetje thuis in CSS, dan kun je de knoppen er nóg leuker uit laten zien.

Conclusie deelknoppen in WordPress maken

De conclusie: we hebben zojuist zelf onze eigen WordPress deelknoppen gemaakt!

Het beschikbaar hebben van een mogelijkheid om berichten te delen is voor veel WordPress sites een must. Of het nou een bedrijfswebsite is of een privé blog. Als een bericht wordt gedeeld bereikt dit gauw tientallen tot honderden nieuwe mensen, waarvan een aantal jouw site bezoeken.

Echter, veel beschikbare WordPress Sharing plugins zijn nogal zwaar en je weet nooit wat de ontwikkelaars met jouw gegevens doen. Gelukkig is het vrij eenvoudig om je eigen deelknoppen te maken, met op internet beschikbare CSS-bestanden, documentatie en een beetje PHP. Door het gebruik van WordPress’ functions.php thema-bestand en add_shortcode() heb je snel en eenvoudig een shortcode gemaakt!

Probeer het uit zou ik zeggen! Deel dit bericht via de CSS shareknoppen.


MCSA Windows Server 2016

Bereid je met dit boek voor op je MCSA Windows Server 2016 examens 70-740, 70-741 en 70-743, nu via bol.com! Dit complete studieboek is het enige boek dat je nodig hebt voor jouw MCSA 2016 certificering. Met deze aankoop steun je ITFAQ.nl, waarvoor dank!

Je vindt misschien ook interessant: 70-744 Securing Windows Server 2016 | 70-740 Installation, Storage and Compute with Windows Server 2016 | 70-741 Networking with Windows Server 2016 with Practice Test | 70-743 Upgrading Your Skills to MCSA | Kaspersky Internet Security 2019 (3 gebruikers, 1 jaar) - via bol.com

Psst: steun ITFAQ.nl en doneer een kop koffie via paypal.me/jreilink.