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+

• de link: https://plus.google.com/share?url=
• LET OP: dit was eerst https://plusone.google.com/_/+1/confirm?hl=nl, maar deze link werkt niet meer. 
• variabelen:
  • url=de url van de te delen pagina

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 &

Documentatie

• Facebook: https://developers.facebook.com/docs/share/
• Twitter: http://twitter.com/about/resources/buttons
• LinkedIn: https://developer.linkedin.com/forum/url-params-sharearticle
• Google+: https://developers.google.com/+/plugins/+1button/