Toegankelijke social media share buttons in WordPress

Hoe voeg je toegankelijke social media buttons toe aan je post of page in WordPress als je de bezoeker je bericht of pagina wilt laten delen op bijvoorbeeld Facebook, Twitter, LinkedIn of Google+? Deze vraag kreeg ik van Winy Schalke van Alva Design.

De meeste kant-en-klare buttons voor het toevoegen van Social Media buttons worden opgebouwd in Javascript. Maar als je alle fancy stuff weghaalt en stript tot de basis blijft er eigenlijk alleen een link met variabelen over. Dit is ook te maken in alleen HTML/PHP. De link wordt dan opgebouwd via een functie in PHP.

Basale opbouw van de links

Voor Facebook:

  • de link: http://www.facebook.com/sharer.php
  • variabelen:
    • t=titel
    • u=de url van de te delen pagina

Voor Twitter

  • de link: http://twitter.com/share
  • variabelen:
    • text=titel
    • url=de url van de te delen pagina

Voor LinkedIn

  • de link: http://www.linkedin.com/shareArticle?mini=true
  • variabelen:
    • t=titel
    • title=de url van de te delen pagina

Voor  Google+

Voorbeeldcode

Een simpel voorbeeld in PHP, die je in WordPress kwijt kunt in je functions.php van je thema:

/**
 * Accessible share buttons
 * Displays 4 social media buttons with a share link beneath the post content on pages and posts, except for the homepage
 * Works inside the loop
 * Images are stored in the theme /images directory
 * Rian Rietveld rrwd.nl June 2012
 * @notes beta version 0.1
 **/

function rrwd_share_buttons( $post_content ) {
	global $post;

	// on posts and pages, except for home, comment out if necessary
	if ( is_home() || is_front_page() ) return $post_content;

	// Sanatize and urlencode title and permalink for inclusion in share links
	$share_title = sanitize_title( get_the_title() );
	$share_title = urlencode( $share_title );
	$share_permalink = get_permalink();
	$share_permalink = urlencode( $share_permalink );

	// Hidden heading, for screen readers only
	$share  = '<h2 class="rrwd-share-heading">Deze pagina delen</h2>'."\n";

        $share .= '<ul class="rrwd-share-list">'."\n";

        $share .= '<!--Facebook-->'."\n";
        $share .= '<li><a href="http://www.facebook.com/sharer.php?t=' . $share_title . '&amp;u=' . $share_permalink . '" rel="nofollow"><img src="' . get_bloginfo('stylesheet_directory') . '/images/share-facebook.png" alt="Delen op Facebook" class="rrwd-share-img" /></a></li>'."\n";

        $share .= '<!--Twitter-->'."\n";
$share .= '<li><a href="http://twitter.com/share?text=' . $share_title . '&amp;url=' . $share_permalink . '" rel="nofollow"><img src="' . get_bloginfo('stylesheet_directory') . '/images/share-twitter.png" alt="Delen op Twitter" class="rrwd-share-img"/></a></li>'."\n";
        $share .= '<!--Linkedin-->'."\n";
$share .= '<li><a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=' . get_permalink() . '&amp;title=' . $share_title . '" rel="nofollow"><img src="' . get_bloginfo('stylesheet_directory') . '/images/share-linkedin.png" alt="Delen op LinkedIn" class="rrwd-share-img" /></a></li>'."\n";
        $share .= '<!--Google plus-->'."\n";
$share .= '<li><a href="https://plus.google.com/share?url=' . get_permalink() . '" rel="nofollow"><img src="' . get_bloginfo('stylesheet_directory') . '/images/share-googleplus.png" alt="Delen op Google+" class="rrwd-share-img" /></a></li>'."\n";
        $share .= '</ul> '."\n";
        // add buttons beneath the post content
        $post_content .= $share;

        return $post_content;

} // end function rrwd_share_buttons

add_filter('the_content', 'rrwd_share_buttons');

CSS voor de buttons

In de style.php van je thema


/*Style for accessible share buttons
------------------------------------------------------------ */
.rrwd-share-heading {
	left: -1000em;
	position: absolute;
	height: 0;
}
.rrwd-share-list {
	clear: both;
}
.rrwd-share-list li {
	float: left;
	padding: 0;
	margin-right: 10px;
}

.rrwd-share-img {
	width: 55px;
	height: 20px;
}

De afbeeldingen

Zet de bijbehorende afbeeldingen in de directory /images van je thema.

De namen in deze functie zijn:

  • share-facebook.png
  • share-twitter.png
  • share-linkedin.png
  • share-googleplus.png

De afbeeldingen hebben dezelfde grootte, te stylen via de class rrwd-share-img.

Live demo

Winy Schalke heeft de code geïmplementeerd voor pagina’s en berichten van de website van de Epilepsie Vereniging Nederland

Plugin

Ik heb er een korte plugin van gemaakt.
Te downloaden op: http://www.rrwd.nl/wp-plugins/wp-accessible-social-share-buttons.zip
Als je deze upload en activeert en daarna in je functions.php van je childtheme het volgende zet zou het moeten lukken:

In Genesis onder de titel:

add_action( 'genesis_after_post_title', 'wp_accessible_social_share_buttons' );// adds buttons below the title of a post or page

Voor plaatsing onder de content:

add_action('the_content', 'wp_accessible_social_share_buttons'); // adds buttons below the content of a post or page

Discussie

De links in deze functie openen niet in een nieuw venster. Dit kan worden toegevoegd (zet dan in de link target=”_blank”) mits je hiervan melding maakt, zie de webrichtlijnen hierover.

Gebruik voor de & om variabelen te linken een &amp;

Documentatie

About these ads

Published by

Rian Rietveld

Web developer @ RRWD web development | WordPress and Accessibility

11 thoughts on “Toegankelijke social media share buttons in WordPress”

    1. Hoi Rob,
      Ik heb er een korte plugin van gemaakt.
      Te downloaden op: http://www.rrwd.nl/wp-plugins/wp-accessible-social-share-buttons.zip
      Als je deze upload en activeert en daarna in je functions.php van je childtheme het volgende zet zou het moeten lukken:

      In Genesis onder de titel:
      add_action( 'genesis_after_post_title', 'wp_accessible_social_share_buttons' );// adds buttons below the title of a post or page

      Voor plaatsing onder de content:
      add_action('the_content', 'wp_accessible_social_share_buttons'); // adds buttons below the content of a post or page

      Like

  1. Geweldig ! Bedankt voor de moeite,

    Ik probeer hem nou alleen nog “onzichtbaar” te maken in de categorie pagina.
    Zijn wel heel veel buttons dan :)

    Anyway, Dik bedankt!

    groet
    Rob

    Like

  2. Ik heb het voor elkaar, begin het te snappen :) Hier de code die voor mij werkte :

    add_action(‘genesis_before’,’remove_some_actitons’);

    function remove_some_actitons() {

    if ( is_category()) {

    remove_action( ‘genesis_after_post_title’, ‘wp_accessible_social_share_buttons’ );

    }

    }

    Like

  3. Hoi Rian,
    Ik gebruik je plugin met veel plezier en het lukt me op de buttons onder de post content te tonen.
    Maar hoe kan ik de share buttons NIET op de (static) front page tonen?
    En hoe toon ik de share buttons alleen op posts, niet op pages?
    Het zou misschien handig zijn als je dit in de plugin bij settings kunt instellen.
    Of kun je een snippet geven om in functions.php te plakken?
    Alvast bedankt!

    Like

  4. @Rian the_content moet nu zijn genesis_after_loop. Sinds de update naar html5 werkt the_content niet meer (goed). Hij gooide bij de structuur in de soep.
    @Winy Ik wilde hetzelfde. In het plugin-bestand kun je regel 51 aanpassen naar:
    if ( is_single() ) {
    Dan is het zoals je wilt.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s