Updated 2/23/2013: Now there’s code for adding a Pinterest “Pin it” button.
In my last post I showed how to create a custom PHP function to add Twitter, Google+, and Facebook share buttons to your Genesis theme’s Post Info section. But if you’re like me and use Genesis’s Simple Edits plugin to modify your theme’s post-info (byline), post-meta, or footer sections, Simple Edits will override your custom function, and the buttons won’t appear.
The solution is to create your own PHP shortcode that will add the share buttons using Simple Edits. Here’s an outline of the four steps to add the buttons:
- Create a shortcode by adding a custom function to your theme.
- Add some JavaScript for each button to your theme’s footer.
- Align the buttons with some CSS code.
- Add the shortcode to the Post Info section in Simple Edits.
When you’re done, your byline will look something like this:
These mods are pretty simple to do, but just in case something goes wrong, back up your blog first.
1. Create a shortcode
A shortcode is a shortcut: a way to refer to a whole bunch of PHP code with a short bit of text that looks like [my_fantabulous_shortcode].
To insert the share buttons on the byline, we’re going to create a shortcode called [post_share]. In order for this shortcode to do something, we need to create a handler function that will tell WordPress what to do whenever it sees [post_share].
Create the handler function in the WordPress by going to Appearance -> Editor and click on the link that says “Theme Functions (functions.php)” at the right. Paste this code at the end of your theme’s functions.php file.
// Create shortcode for Post Info sharing icons
function post_share_shortcode() {
if (!is_page()) {
$permalink = get_permalink();
$datatext = get_the_title();
$share_buttons = '
<div class="all-buttons">
<!-- Facebook Like Button -->
<div class="fb-like" href="'.$permalink.'"
data-send="false" data-layout="button_count"
data-width="90" data-show-faces="false" data-font="arial">
</div>
<!-- Google +1 Button -->
<div class="plusone">
<g:plusone size="medium" href="'.$permalink.'">
</g:plusone>
</div>
<!-- Tweet Button -->
<div class="tweet">
<a href="https://twitter.com/share" class="twitter-share-button"
data-url="'.$permalink.'" data-text="'.$datatext.'">Tweet</a>
</div>
</div>
<div style="clear:both;"></div>
';
return $share_buttons;
}}
add_shortcode('post_share', 'post_share_shortcode');
Note: If you’re using a StudioPress theme that has a Custom Code option in the Genesis menu, like Prose 1.5, you’re not supposed to edit the functions.php file. Instead, click on the Custom Code link, and paste the code in the Custom Functions section.
2. Paste JavaScript code
Each network provides a bit of JavaScript code for their button, which tells them when a reader clicks on it to Tweet, +1, or Like your post. I’ve compiled the code for all three buttons for you.
To ensure that the buttons will load on any page that contains [post_share] shortcode, you’re going to paste this code in your theme’s footer.
Do this by going to the Genesis -> Theme Settings page and scroll down to the Header and Footer Scripts Section. In the “wp_footer()” field, paste this script code:
<!-- Tweet Button -->
<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>
<!-- Google +1 Button -->
<script type="text/javascript">
(function() {
var po = document.createElement('script');
po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
<!-- Facebook Like Button -->
<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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
As a sidenote, we’re putting this JavaScript in the footer to make sure your content loads first. Otherwise, if you paste it in the header, as the social networks recommend, your readers can’t read your content until after the buttons have loaded. This lag could be significant enough to give your readers the perception that your blog loads slowly, which might increase your bounce rates. It’s better to have the share buttons load after your content.
3. Align the buttons with CSS
To make sure the buttons align horizontally with the byline text, you need to add some code to your custom.css file. Go to Dashboard -> Appearance -> Editor, click on the style.css link at the right, and then paste the code below at the end of your theme’s style.css file.
Note: If you’re using one of StudioPress’s new themes, like Prose 1.5, there’s no custom.css file to edit. Instead, go to Genesis -> Custom Code, and paste the code in the Custom CSS section.
/**** Share Icons in Post-Info *******************/
/* Tweet Share Button */
div .tweet {
float: right;
width: 95px;
}
/* Google +1 Button */
div .plusone {
float: right;
width: 87px;
}
/* Facebook Like Button */
div .fb-like {
float: right;
width: 90px;
}
Another note: For Prose 1.0 users, a change in WordPress 3.4 prevents the custom.css file from being loaded into the code editor. If you’re using WP 3.4 or later, you’ll have to use FTP or your host’s file manager to edit the custom.css file.
4. Add shortcode to Simple Edits
If you haven’t already installed the Simple Edits, install it now. It’s a lightweight plugin for the Genesis theme framework that allows you to add different elements to your theme’s post-info (byline), post-meta, and footer sections using shortcodes.
For example, adding the [post_date] shortcode in the Simple Edits Post Info field will add the post date of your articles to your byline. By default, Simple Edits sets up your Post Info to look like this where you’re logged in:
Keep in mind that your readers won’t see the “Edit” link. Only users that are logged into WordPress will see the link.
Once the plugin is installed, go to Genesis -> Simple Edits, and add [post_share] to the end of the Post Info field.
Click the “Save Settings” button, reload your blog in your browser and you should see the share icons in the post info section.
If you want to change the order of the buttons, refer to the Customization section in my previous post.
Now, whether or not you’re using Simple Edits, you can insert sharing buttons into your Genesis theme’s Post Info making it easier for your readers to promote your blog. Thanks to everyone who helped me iron out the issues with adding these buttons.
Update 2/23/2013: Adding a Pinterest “Pin it” button:
Due to popular demand (well, three requests anyway), here is the code to add a Pinterest “Pin it” Button with the pin counts to the right of the button. If you have a featured image set for your post, that will be the one shown on Pinterest. Otherwise, it will show your post’s first image.
Add the block below to the shortcode section in your functions.php file as described in Step 1. Where you place this block relative to the blocks for the other buttons will affect where you see the button. It must come after the $share_buttons = ' line near the top, or before the
</div>
<div style="clear:both;"></div>
lines near the bottom.
<!-- Pinterest Button --> <div class="pinterest-button"> <a href="http://pinterest.com/pin/create/button/?url=%s&media=%s" class="pin-it-button" count-layout="horizontal">Pin It</a> </div>
Then add the next block below to the JavaScript code in Genesis -> Theme Settings as was done in Step 2. It doesn’t matter where you put it relative to the code for the other buttons.
<!-- Pinterest Button --> <script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>
Finally, below is the CSS code block for your style.css file in Step 3. Again, it doesn’t matter where you put it relative to the code for the other buttons. Feel free to play with the width for this button to get it to look right depending on how many Pins you expect your posts to get.
/* Pinterest Button */
div .pinterest-button {
float: right;
width: 80px;
}
Credit goes to Brian Gardner’s Pinterest “Pin It” Button post for helping me figure out the functions.php and JavaScript sections.
Thanks for all your comments so far.
Learn More
How To Integrate Facebook, Twitter And Google+ In WordPress
How to Customize the Post Info Function
WordPress Shortcode Reference
Genesis Simple Edits
Icon size – Choose from sizes of 24, 32 and 48 pixels.
