3 [Better] Steps to Quickly Add Social Sharing Buttons to Genesis Post-Info

Google, Twitter, and Facebook Share Buttons

A couple of posts back, I showed how to add social sharing buttons to the post-info sections (bylines) of Genesis child themes using their Simple Edits plugin. An alert reader, Greg Simas from m1p, noticed that the share counts on the buttons on the homepage bylines were different from those of post pages. In fact, the share counts for each network were the same on every byline appearing on the homepage

You can refer to that post for more details on why that method doesn’t work.

Thanks to Santel Phin and Kevin Muldoon, I’ll show you the new and improved way to add share buttons to your post-info sections for Google+, Twitter, and Facebook–the “big three” social platforms. If you’re using Genesis’s Simple Edits plugin, read this post instead.

<late-night infomercial overhyped voiceover>

But wait! There’s more!

I’ll show how to do it in only three, that’s THREE, steps. That’s a 25% improvement over the old, four-step method.

And if you ACT NOW, I’ll show you how to do it without using the Simple Edits plugin used in the old method.

Aaannd, if you follow this exclusive, one-time post in the next 999 minutes, you’ll get a byline that looks like this:

Twitter, +1, Like Buttons in Post-Info

READ MORE NOW!

</late-night infomercial overhyped voiceover>

1. Create custom function for Post Info section

In your WordPress Dashboard, go 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.


// Custom function to add share buttons to Post Info
add_filter( 'genesis_post_info', 'post_info_share_filter' );
function post_info_share_filter($post_info) {
if (!is_page()) {
 $permalink = get_permalink();
 $datatext = get_the_title();
 $post_info = '[post_date] By [post_author_posts_link] [post_comments] [post_edit]

 <!-- Facebook Like button -->
   <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>

 <!-- Google +1 button -->
 <div class="plusone">
   <g:plusone size="medium" href="'.$permalink.'">
 </div>

 <!-- Tweet button -->
 <div class="tweet">
   <a class="twitter-share-button" href="https://twitter.com/share"
   data-text="'.$datatext.'" data-url="'.$permalink.'">Tweet</a>
 </div>
';
 return $post_info;
}}

Note: If you’re using one of StudioPress’s new themes, like Prose 1.5, you’re not supposed to edit the functions.php. Instead, go to Genesis -> Custom Code, and paste the code in the Custom Functions section.

Genesis Menu for Custom Code

2. 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.

3. 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 style.css link at the right (custom.css link if you’re using Prose 1.0), and then paste the code below at the end of your theme’s style.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;
}

Again, 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.

Customization

If you want to change the order of the buttons you just have to change the order of the code snippets in the custom function. 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:


 <!-- Google +1 button -->
 <div class="plusone">
   <g:plusone size="medium" href="'.$permalink.'">
 </div>

 <!-- Tweet button -->
 <div class="tweet">
   <a class="twitter-share-button" href="https://twitter.com/share"
   data-text="'.$datatext.'" data-url="'.$permalink.'">Tweet</a>
 </div>

 <!-- Facebook Like button -->
 <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>

For options to customize the look of each button, check out these links:

Google +1 Button
Facebook Like Button
Twitter Buttons

Some caveats

This method does not play nicely with Genesis’s Simple Edits plugin. It will override the custom function we’ve created. If you’re not already using Simple Edits, great. If, like me, you’re using Simple Edits to customize your footer and/or post meta, I’ll write a post in few days on creating a custom shortcode that you can use in the Simple Edits Post Info section.

Also, like I said in the original post, the buttons might not be perfectly aligned in some cases. 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.

Thanks again to Santel Phin for his input and letting me know I was heading down the right road.

Update July 7, 2012: There were a couple of typos in the custom function code (Step 1) causing the Twitter button to display inaccurate counts on the homepage. I also changed the name of the custom function to avoid any potential conflicts with the StudioPress code.

Update July 13, 2012: For Prose 1.0 users, a change in WordPress 3.4 prevents the custom.css file from being loaded into the code editor. So 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.

Credit 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

Resources

How To Integrate Facebook, Twitter And Google+ In WordPress
How to Customize the Post Info Function

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. Hey Bryan. Thanks for the post. I am using the Mindscape Theme and I suppose it must NOT be one of the current themes because it does not have the Custom Code Box. In addition, I does not have a Custom CSS link in the editor either. The links that appear to the right in the editor are functions php, page landing php and style css. How do I then get the Style code placed in the Mindscape Theme? Thanks.

    • Hi Greg,

      It is a bit strange that you don’t have access to CSS file, maybe you can find via an ftp client, but I am not sure if you are more familiar with this tool.

      I hope Bryan would have something more to add.

      • Santel,

        Oops, it really the Mindstream theme not Mindscape. My bad. ;)

        I’m pretty familier with the ftp client. Just checked and it’s not there. I also checked the original download files that are on my hard drive. Not there, either. ??

    • Bryan Kerr says:

      Greg, you can put the style code at the end of style.css. I guess that might have been one of their early themes, before they started adding custom.css files. Make a backup first, though, just in case.

      • Hey guys, It’s just not working out… any of you guys care to give it a shot?

        • Bryan Kerr says:

          What exactly isn’t working? I can see the buttons on your post pages, but they aren’t in the post info section. It doesn’t look like you were able to add the style code, as I don’t see it in your style.css file.

          • What you see in the single post area are social media plugins that I am using.

            When I dropped in the code (above), it broke my site, so I pulled the code out. But I do see the code working on yours and Santel site.

          • Bryan Kerr says:

            My cable went out a couple times yesterday and I noticed that the code blocks in the post got corrupted. Depending when you copied the code from the site, you might have copied some bad code. If so, my apologies.

            Here’s what you can try to narrow the problem down. First, copy the style code into your style.css file. Then copy the JavaScript code into the theme footer. Neither of these should break your site, but get them in first to make sure they aren’t causing problems.

            Then copy the custom function in the main post above, and paste it into the bottom of your functions.php from the appearance editor.

            Let me know how it goes.

          • doesn’t work. :(

          • Bryan Kerr says:

            A few questions. Are you getting any error messages? What do you see happen? Is Simple Edits activated or deactivated when you try this?

          • Bryan Kerr says:

            We fixed the problem over email. Turns out it was a combination of a couple of typos on my part in the custom function, and that Greg’s Really Simple Facebook Twitter Share Buttons plugin needed to be deactivated.

            The typos will cause inaccurate Tweet counts on the homepage. I’ve updated the code above, so if anyone copied and used the code any time before July 7, 2012 2pm PDT, I recommend he/she recopy and paste the custom function.

            Thanks for your help and patience, Greg.

  2. Thank Bryan for mentioning about me here. I am happy to help and glad that we all find the way out. I noticed that when I tried to click on twitter button, it return the text which is not the post title.

    I was having the same issue but I fixed this by adding another data-text to twitter code as following:

    /** Customize the post info function */
    add_filter( 'genesis_post_info', 'post_info_filter' );
    function post_info_filter($post_info) {
    	$permalink = get_permalink();
    	$datatext = get_the_title();
        $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-text="'.$datatext.'" data-via="khmerbird">Tweet</a></div>
    	<div class="gplus"><g:plusone size="medium" href="'.$permalink.'"></g:plusone></div>
    	</div>';
        return $post_info;
    }
  3. Hello.

    I am using the Amped theme.

    I got this to work after you click the post from the main blog page, but is there a way to make the icons be on the main blog page before you click a post and go to the dedicated post page?

    • Bryan Kerr says:

      Hi Jonny. In your Featured Posts widget, check the box next to “Show Post Info”. Then create a shortcode for the icons by following Add Social Share Buttons to Genesis Post Info Using Simple Edits. Instead of pasting the shortcode in Simple Edits, paste it in the Post Info field in your Featured Posts widget, and delete all the other shortcodes if you only want the share buttons.

      You might have to play around with the formatting a bit.

  4. Thanks for this easy step by step…

  5. Hi,
    it seems that the CSS stylesheet needs a hack for Google Chrome : see my page http://clos-fontaine.com/webcam-de-valloire-setaz/ the button are vertically displayed on Chrome and horizontally with Firefox… Any idea on how to solve this ?
    Thx a lot by the way for your great tutorial :)
    Nico

    • Bryan Kerr says:

      Thanks for commenting Nico. The sharing buttons on your site look fine to me in Chrome. Are you viewing them when you’re logged out of WordPress. Sometimes, the Edit link that appears when you’re logged in messes with the formatting of the buttons, especially when the content area is not very wide.

  6. tnx@Bryan for the cool tip but i think you should also add pinterest and linkedin buttons into the code as well :)

    • Good call Arafin. Five buttons would be a bit crowded on the byline, but I could still figure it out and post the code so that users could choose which ones they wanted.

  7. Thanks for your efforts putting this together Bryan – I knew what I wanted to do, just took me a while to find it!

  8. How can you add a Share to Facebook button?

  9. Shane Stranahan says:

    Hey Bryan,

    I’m trying to get this set up but I’m getting an error code which returns a facebook dialog with the text of “The href URL must be absolute”.

    I’ve been doing a little bit of research and it seems like Facebook changed a few things around on January 15th. Do you know anything about this?

    • Bryan Kerr says:

      Hmm.

      I just rechecked Facebook’s Like Button page, and the code’s still the same.

      Where are you seeing the error code?

      My first guess is that it might have something to do with data-href="'.$permalink.'" code in the custom function. What are your permalink settings?

  10. Great little bit of code. Works well with a bit of bespoke styling. Any word on a LinkedIn inclusion? The 4 main social platforms would not be too crowded and a good addition to any site.

  11. Bryan – just made the switch to Genesis and I have to say your tutorials are a life saver :) Thanks!

  12. Hi,
    Thanks for the post — it works great. I would also like to add the Pinterest Pin it button in the same way. Do you know how to do that?

    Thanks!

    • Bryan Kerr says:

      Hi, Amy. If you’re willing to use the Genesis Simple Edits plugin, then you can use the instructions here to get a Pinterest button. Thanks for reading!

  13. Hi Brian,

    This is the neatest way to add social sharing buttons to a post and I’d like to ask you if possible to complete this tutorial with adding Pinterest and Linked In buttons please.

Speak Your Mind

*