4 Steps to Quickly Add Social Sharing Icons to Your Genesis Post-Info

Google, Twitter, and Facebook Share Buttons

Note (7/5/12): This method is obsolete. The button counts on the homepage weren’t accurately reflecting the counts on the post pages. Here’s a short explanation. A new method that doesn’t require the Simple Edits plugin has been posted here. I’ve also come up with an alternative method that’s compatible with Simple Edits.

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:

Twitter, +1, Like Buttons in Post-Info

 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>

Genesis Simple Edits Post Info

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>

Genesis Theme Settings - Footer Scripts

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

Article by Bryan Kerr

I love breaking down the techie side of blogging into easy-to-understand tutorials. That's mostly what you'll find here on The Hobby Blogger.

Comments

  1. Its good post. Adding additional plugin weights up wordpress. Better to go with codes like above.
    I’ll be using this for my custom theme.

  2. Bryan Kerr says:

    Thanks Pradosh. This method still requires the use of a plugin, but Simple Edits is lightweight enough that it’s worth using for those who don’t want to mess with php.

    • I did it and works perfactly fine.
      I fine tuned it by loading twitter and Googles javascript only on post. This off loads some page size on homepage where those buttons are not used.

  3. Hello Bryan,

    I just tried your trick to add social icons step-by-step, but the “Post-Info” field is not large enough to accept the code that you provided for Simple Edits. It just through off my entire stylesheet.

    Thanks though,

    Dave F.

    • Bryan Kerr says:

      Dave, were you viewing the post-info icons while you were logged into your blog? If so, the “Edit” link that appears next to the Post-Info Comments link will make it too small to fit all three button. How does it look when you are logged out of your blog and see what your visitors will see? They should fit, but some of the Genesis themes might have a smaller content width keeping all three buttons from fitting.

      • Hi Bryan,

        Thanks for responding. I don’t think that it was an issue of the buttons fitting in the “by line” on the front end while I was logged in, but more of an issue with Simple Edits not accepting the full code in the “Post Info” field. That field was just simply cutting off the code because it did not fit. Not to worry though, I would rather hard code the buttons in instead of having another plugin installed to provide the capability. I do appreciate your help, and you have a fantastic looking blog here.

        Dave F.

        • Bryan Kerr says:

          Thanks for the complement Dave. I’m sorry it didn’t work in your case, but yeah, hard coding is better than a plugin.

  4. Thanks for this post, looks helpful. I was actually looking for a simple way to share posts on Facebook using the Genesis theme. Could you point me in the right direction of a simple plug-in or other method?

    • Bryan Kerr says:

      Hi Aimee,

      Do you mean that when you publish a post, you want it automatically show up on Facebook? Add Link to Facebook might be your answer in that case. I haven’t tried it myself, but it’s highly rated in WordPress Plugin Directory.

      Or if you just want others to be able to click on a button to share your post, then check out Social Sharing Toolkit, Sociable, or Sharebar. Again, I haven’t tried them yet, but they are highly rated.

  5. Nate J. says:

    Hey,

    Thanks for the write up. I’m using Genesis and I’m thinking about the floating sidebar option as well. This would seem to get more +’1s for the homepage while the solution you mentioned in this post would get individual posts +1’d.

    If you find a good solution for putting this stuff in the sidebar of genesis let me know.

    Best,

    Nate

    • Bryan Kerr says:

      Sure thing Nate. That’s a good point about the distinction between the homepage and individual posts.

  6. Bryan, I have installed the code and love what it does. I have one problem. The counts on the homepage are all the same. for each post. When I open up the each post the counts show accurately for each single blog post. Any solutions on how to make the counts appear accurately on the homepage for each post?

    • Bryan Kerr says:

      Greg, I think you and Pradosh have discovered the big flaw with this method. By pasting the javascript in your theme’s page footer (or header for that matter), you are only loading the javascript once per page. Effectively, this means that all of the sharing buttons appearing on the homepage act as a single button respectively for each social site.

      If someone +1ed all ten of my posts from the homepage, all of ten of the bylines on the homepage would show ten +1s while the +1 buttons on the individual post pages would remain unchanged. So it’s the same as posting the share buttons once in the sidebar or header area of the homepage.

      I don’t have a solution yet, but Jason over at avgjoegeek.net seems to have figured out a way. I’ll ping him and ask him how he did, and post a solution either here, or as another post.

      Thanks for reading.

    • Bryan Kerr says:

      I’ve found a fix. It involves using one line of PHP code to refer to a post’s permalink. But because of the PHP, you can’t use Simple Edits. The code that used to go in Simple Edits, plus the new PHP snippet, has to go in your theme’s functions.php file. The caveat is that implementing this new method will reset the number of Likes, +1s, and tweets for all your posts.

      I’ll update this page and post a new article next week.

  7. To make this dream come true, you have to disable the simple edit plugin and change the post info via function.php

    Here is the code I used:

    /** Customize the post info function */
    add_filter( 'genesis_post_info', 'post_info_filter' );
    function post_info_filter($post_info) {
    $permalink = get_permalink();
        $post_info = 'By [post_author_posts_link] [post_comments]
    <div class="share-icons"><span class="share-this">Share This:</span>
    <div class="fb-like" data-href="'.$permalink.'" data-send="false" data-layout="button_count" data-width="90" data-show-faces="false" data-font="arial"></div>
    <div class="twitter"><a href="https://twitter.com/share" class="twitter-share-button" data-url="'.$permalink.'" data-via="khmerbird">Tweet</a></div>
    <div class="gplus"><g:plusone size="medium" href="'.$permalink.'"></g:plusone></div>
    </div>';
        return $post_info;
    }
    
    • Bryan Kerr says:

      You’re right on, Santel. I’ve found a very similar solution, and am writing a post about it. The solution I found differs slightly from yours in the href attribute. For example, the +1 button uses:

      href="<?php the_permalink(); ?>"
      

      Can you please comment on whether the difference matters?

      I also have an issue with having to disable Simple Edits. I’d like to continue using it for my footer customizations. While I can just hardcode the footer, I’d like to find a way for this to coexist with Simple Edits so it’s easier for bloggers to implement.

      StudioPress support says I can make a short code for the php and only use Simple Edits. That’s the next path I’ll pursue tonight.

      Thanks again for contributing.

  8. Hi Bryan,

    When I use this code:

    href=&quot;&lt;?php the_permalink(); ?&gt;&quot;

    It didn’t work when we try to put it into post info.

    The code work great if we insert the buttons inside the post. I don’t really know but I think we cannot run php in post info.

    I disable the simple edit and it did effect to my footer as well. I use this code to change the footer credit:

    
    /** Customize the credits */
    add_filter('genesis_footer_creds_text', 'custom_footer_creds_text');
    function custom_footer_creds_text() {
        echo '&lt;div class=&quot;creds&quot;&gt;&lt;p&gt;';
        echo 'Copyright &amp;copy; ';
        echo date('Y');
        echo ' &amp;middot; &lt;a href=&quot;http://khmerbird.com&quot;&gt;KhmerBird&lt;/a&gt; &amp;middot; Built on the &lt;a href=&quot;http://khmerbird.com/go/genesis&quot; title=&quot;Genesis Framework&quot;&gt;Genesis Framework&lt;/a&gt;';
        echo '&lt;/p&gt;&lt;/div&gt;';
    }
    

    I found it on StudioPress forum as well.

    I hope you could give a good reply in case you want to use Simple Edit plugin.

    Cheers.

  9. Hi Bryen

    Since the first day i have started this blog http://shureekn.com . i was searching for the process to add good social share button to my every post. i have tried many other tutorials from different site but the tricks they provided required a little coding skill(i am very dumb in coding). .Now only after reading this post i have done it correctly with just copy paste method on my wp dashboard. thank you very much for sharing such helpful post.

Speak Your Mind

*