The Facebook Send Button is one social network plugin I can’t do without.
Since ditching Hootsuite, I have been using it, to send / share my blog content to numerous number of friends in a Facebook message, to email addresses, and to the various Facebook group just with a click away.
Unlike the Like button, the send button can’t auto-detect the current URL of a webpage, i.e. you need to specify an absolute URL of the page that will be sent.
Using WordPress the_permalink() function, you can pass the URL for the permalink to the post currently viewed to the send button’s data-href HTML5 attribute likes so:
<div class="fb-send" data-href="< ?php the_permalink(); ?>" data-colorscheme="light"></div>
Even though the like button do detect the currently viewed webpage URL, I still use the_permalink() as the data-href value like so
<div class="fb-like" data-href="<?php the_permalink(); ?>" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
Similar to the Like button, the share button also detect current page URL in the absence of data-href attribute.
If you love Facebook’s share button (I prefer the like button to do the sharing job), the code is shown below.
<div class="fb-share-button" data-href="<?php the_permalink(); ?>" data-type="button_count"></div>
Don’t forget the include Facebook’s plugins JavaScript SDK on your page once, ideally right after the opening <body> tag else they won’t work.
Adding Facebook Social Plugins to WordPress
Take Note: my blog uses the Genesis framework Focus child theme, the Action and filter use in this section will work only on Genesis. It is your responsibility to find your theme equivalent.
- To add the Facebook social plugin to WordPress, firstly, include the JavaScript SDK ideally right after the opening <body>.
add_action( 'genesis_before', 'Facebook_javaScript_SDK'); function Facebook_javaScript_SDK() { ?> <div id="fb-root"></div> <script> ( function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=399748413426161"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> < ?php }Including it in the header of WordPress also works but not recommended as it might significantly slow your site when loading.
- Next, is to include the Like button. We’ll be adding it after each post title.
add_action( 'genesis_after_post_title', 'Like_button'); function Like_button(){ ?> <div class="fb-like" data-href="<?php the_permalink(); ?>" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div> < ?php }To add the Like button after post title in a WordPress themes other than the Genesis framewrok, we need to include it before the post content like so;
add_action( 'the_content', 'Like_button'); function Like_button( $content ) { $likeButton = '<div class="fb-like" data-href="' . get_permalink() . '" data-layout="standard" data-action="like" data-show-faces="true"></div>'; $content = $likeButton . $content; return $content; }Notice the use of get_permalink() instead of the_permalink() function.
Basically, both function does the same thing – stores the URL for the permalink to the post currently being processed in The Loop. the only difference between them is, the initial returns the URL while the latter displays the URL. - Adding the Share and Send button is similar to the Like button explained above.
Simply create a PHP function, include the button code into it and hook the function to an Action Hook.
You can combine the Like and send button simply by adding data-share="true" to the Like button code.
This article also serve as a starter guide for implementing other social network plugins like the twitter tweet, StumbleUpon, LinkedIn share, and a host of other social buttons.