For the Genesis users out there, I want to give you a quick tutorial how to add share buttons to your article bylines for the “big three” social platforms: Twitter, Google+, and Facebook.
In my quest to “get more social” at The Hobby Blogger, I recently added Twitter share, Google +1, and Facebook Like buttons to the byline (aka post-info) section of each post. I’m in the midst of auditioning floating sidebars, but in the mean time, I wanted to offer readers an easy way to share my posts. After all, it’s a good way to bring more traffic to the blog.
Here are four steps to add a Tweet, +1, and Like button to Genesis’s default byline so that it looks like this:
1. Install Genesis Simple Edits plugin
This is a lightweight plugin that creates a new Genesis settings page allowing you to modify the post-info (byline), post-meta, and footer area on any Genesis theme. As usual, you can download and install it from your WordPress Plugins panel.
2. Insert html for buttons into Post-Info
Once the Simple Edits is installed, go to Dashboard -> Genesis -> Simple Edits and copy this code into the end of the “Post Info” field.
<div class="fb-like" data-send="false" data-layout="button_count" data-width="90" data-show-faces="false" data-font="arial"></div> <div class="plusone"><g:plusone size="medium"></g:plusone></div> <div class="tweet"><a href="https://twitter.com/share" class="twitter-share-button">Tweet</a></div>
3. Paste JavaScript code for the buttons in your theme’s footer
Go 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>
Putting the JavaScript in the footer instead of the header will make sure the buttons don’t slow down the loading of your content.
4. Align buttons with CSS code
To make sure the buttons are horizontally aligned with the byline text, you need to add some code to your custom.css file. Go to Dashboard -> Appearance -> Editor, click on the custom.css link at the right, and then paste the code below into your theme’s custom.css file:
/**** 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;
}
Customization
If you want to change the order of the buttons you just have to change the order of the code snippets in the Simple Edits Post-Info field. Because the CSS code that places the buttons uses the float property, paste the button HTML code in reverse order. So if you want the button order from left to right to be Facebook Like, Twitter, +1, paste the HTML code in this order:
<div class="plusone"><g:plusone size="medium"></g:plusone></div>
<div class="tweet"><a href="https://twitter.com/share" class="twitter-share-button">Tweet</a></div>
<div class="fb-like" data-send="false" data-layout="button_count" data-width="90" data-show-faces="false" data-font="arial"></div>
For options to customize the look of each button, check out these links:
Google +1 Button
Facebook Like Button
Twitter Buttons
It’s quick, but not perfect
While I’ve shown you a quick way to get Twitter, Google +1, and Facebook share buttons on your byline, in a few cases, it comes at the expense of imperfectly aligned buttons. Depending on the width of your theme’s content area, one or more of the buttons might appear below the byline. If you view this blog on an iPhone, you’ll see what I mean.
Also, readers using Internet Explorer 9 in compatibility mode or IE 7 will see the buttons one line below the byline. Chances are that few of your readers will experience this, though.
If you have any recommendations for other social sharing plugins, let us know in the comments.
Shout out to the following for the button graphics I used in this post’s featured image:
Like button: Small Buck
+1 button: MachoArts
Twitter button: Edudemic
Icon size – Choose from sizes of 24, 32 and 48 pixels.
