Add Social Share Buttons to Genesis Post Info Using Simple Edits

Google, Twitter, and Facebook Share Buttons with StudioPressUpdated 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:

  1. Create a shortcode by adding a custom function to your theme.
  2. Add some JavaScript for each button to your theme’s footer.
  3. Align the buttons with some CSS code.
  4. Add the shortcode to the Post Info section in Simple Edits.

When you’re done, your byline will look something like this:

Twitter, +1, Like Buttons in Post-Info

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.

Genesis Menu -> Custom Code

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:

Simple Edits Default Post Info

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.

Add Shortcode to Simple Edits Post Info

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

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. Well, this is certainly helpful since I have tons of site on wordpress.
    I’ll try this out asap. Thanks for the post Bryan. More power :)

  2. I’m using Thesis, but I am sure there is a similar solution for this.

    I really like how you lined up the share buttons in your byline! It looks really smooth!

    I am happy with my button placement for now, but this is a really great guide if I plan on updating it in the future!

    Thanks a bunch,
    -Gabe

    • Bryan Kerr says:

      Thanks Gabe. I’m not very familiar with Thesis, but I think you might be able to add the shortcode handler function to the custom_functions.php file. Then if there’s any way to customize the byline in the theme settings, you should be able to insert the shortcode there.

  3. Hi Bryan,
    I found your blog through the WeBlogBetter linkup. Your posts are really well laid out and easy to follow. I’ll definitely be reading more because this total non-techie needs to upskill :o)
    Cheers, Caylie

  4. This is an awesome post Bryan. I’m starting to look at Genesis and could possibly be switching to it. Tired of how Thesis is working on my own blog. Good to know if I do I know where I’ll be coming to for my necessary tweaks!

    • Bryan Kerr says:

      Thanks Jason. Just beware of the Genesis themes that feature responsive design, like Prose 1.5. Unless you’re willing to redesign your site with responsive design in mind, it could be tough to recreate your blog’s current look.

      I’m still on Prose 1.0 because 1.5’s responsive design breaks some of my current design. It’s holding off on the upgrade because it looks like it’s going to take me quite a bit of tweaking.

      If you’re going for a fresh new look, then you’ll be alright with responsive design.

  5. Man, I was looking for this tutorial for longer than half an year: how to add basic social share icons to Genesis without a plugin (well, you use actually a plugin). Great job…subscribed to your list.

  6. Everyone isn’t good at playing around with codes. If you are beginner you can use Sociable plugin for share buttons. It works with Genesis Framework without any problem.

    • Bryan Kerr says:

      Yep, that’ll work, too. However, skyscrapers like Social can be a pain on mobile browsers. Sometimes they don’t do a good job of getting out of the way of the content.

  7. Fantastic! I’ve been opposed to using social buttons like these for a long time, so I’ve been out of the loop on how to best implement them. I looked at several plugins this morning, but none of them did what I wanted them to do.

    This was a tremendous help! Thanks so much!

  8. Hi! Thanks for the great post- How would you do this with the “email” social button?

    • Bryan Kerr says:

      Thanks Stephanie. It looks like you figured it out using Share This. Another way to do it would be to create an email icon and link the icon to your blog’s contact page.

  9. Exactly what I needed. This worked like a charm and was really easy to set up.

  10. This is great! I’ve implemented it on my blog. How would I add the “Pin it” button for Pinterest next to these icons in my Post info?

  11. I’m looking for an easy way to show total shares in the post info

    • Hi John. Here’s a paid plugin called Top Social Share Posts. It looks like the plugin provides shortcodes, which you can then add to the Post Info section in Simple Edits.

      I haven’t easily found anything free yet. If you try it, let us know how it works!

  12. Thi sis one slick solution for social share buttons. I’m not a code guru and I would like to ask: is this article still up to date? I’m asking as Facebook, Twitter or G+ use to update these codes…

    • Bryan Kerr says:

      Thanks Bob. I haven’t specifically checked, but as far as I can tell it still works. The buttons and counts still appear. Maybe you could test it by reTweeting or sharing on FB or G+ :-).

  13. Thanks for this excellent tut, Bryan! So clear and easy to follow – it worked like a charm!

  14. Thanks it was exactly what I needed for. Works like a charm

  15. I am having issues with my byline I cannot seems to get my css to align the buttons inline horizonatlly like yours.

  16. I figured it out, please ignore my previous post.

    Solution: I added a div to point to all the icons and moved it right. I think that you may want to add that to your css riles just before the twitter. I love it!!!

    • Bryan Kerr says:

      Good call. You could add this code to the custom CSS right above /* Tweet Share Button */ line:

      div .all-buttons {
         float: right;
         width: 285px;  /* or whatever other width works for your theme */
      }

      An issue to be aware of is that the available width for your buttons depends on the width of the rest of your post info. So if you design and test your buttons when the date is May 1, 2012, your buttons might get pushed down to the next line on a post date with a longer month, like December 25, 2012.

  17. How about adding other social icons– Linked in, pinterest, etc? Can you provide the code to add those? I will keep plying around to see what I can come up with.

    • Bryan Kerr says:

      On the todo list, but have a lot of other priorities above it for now. Looks like you’ve figured it out already on your site, though. One suggestion for placing the CSS code: instead of putting it at the bottom of your style sheet, you might try putting it above the responsive design rules (marked by the /* Responsive Design comment).

      I’ve noticed that putting CSS code after the responsive design rules can cause unintended behaviors.

      On a side note, like you, I’m also using the News theme for a new blog that I’m launching soon.

      • John Petersen says:

        Hello,

        I am also using the News Theme on my site and I am trying to add social media icons for Linked In, YouTube and Pinterest that match the style of the Twitter and Facebook icons that already exist. I am new to WP. Can anyone explain how to do this? My site is not published online quite yet, FYI.

        Thank you!

  18. Hey, this really helped me! Thank you so much! I posted in the before comments Genesis hook and it worked just fine. The only thing is how would I add a pintrest button to the list? I’ve been trying to add it myself with the code/script from the Pintrest site, but it’s not working.

  19. its very nice,
    what a idea

  20. I just found this nice tutorial several months after you wrote it. :)

    I would like to add some very basic share icons to my posts. I am having a hard time finding the code to create simple links that will capture my post title and let someone share it elsewhere.

    I don’t want to track how many times my posts are shared. I have my own icons and just want to turn them into links. Do you have any suggestions?

    Thank you!

    • Bryan Kerr says:

      You’re having a hard time finding the code because Facebook and other sites don’t want people to use their own icons. They want to stay in control of their branding. In fact, on Facebook’s Do’s and Don’ts page, they specifically say to not “use any icons, images or trademarks to represent Facebook other than what is found on this resource center.” While I haven’t looked, I’m sure the other social sites say something similar.

  21. lindebjerg says:

    Hi Bryan, perfect tutorial works out of the box;) on Posts.
    But how can I use the Shortcode on Pages too? If I paste the code into a Page, nothing shows up in Frontend. I can share a link to coming soon page, the site goes online on 25. Mai 2013 http://team-travelflow.de/

    • Bryan Kerr says:

      Ahh, good question. See the third line of the handler function?

      if (!is_page()) {

      This line prevents the handler function from putting the icons on a page. If you want them to appear anywhere you put the shortcode, change that line to:

      if (1) {

      Thanks for reading.

  22. Hey Brian,

    It works ok on my PC, but the CSS code doesn’t stick on my mobile devices such as Ipad. They just show one above the other. Do I need to adapt some code ?
    Thx

    Kurt

    • Bryan Kerr says:

      Hi Kurt,

      Which browser are you using on your PC? If you test the view in Google Chrome, that will probably render the closest to an iPad since they both use webkit. MS Explorer is a whole different ballgame. Sometimes you have try the button spacing that works best for all four major browsers.

  23. I was searching this info since last 4 days and finally i got this here thanks for share.

  24. Very helpful and simple to follow. Thanks!

  25. this doesnt seem to work at all…just installed genesis and I’m showing nothing … literally followed it step by step

    • Bryan Kerr says:

      Hi Julian. Which child theme are you using? What happens if you paste the shortcode somewhere in the body of a page or post? Do you see the buttons then?

  26. This worked awesome for me. How can I add a share on tumblr botton?

  27. Hey Bryan,

    Thanks for awesome post.I’m using genesis and some how my sharing buttons appear vertical – one under the other.Do you maybe know what is the cause of the problem ?

  28. Never mind Bryan I got it right ;-) Thanks

  29. Hey Bryan, thanks so much for this. It worked great except I’m having a little issue with the facebook button. It is a little lower than the first two and also the dropdown that appears when you click on the button is cut off.

    I am using sixteen nine pro theme.

    You can see it here: http://www.motionhealth.tv/tai-chi-for-Balance/

    Any thoughts are greatly appreciated.

  30. Muchas gracias! Yet, tried the implementation and it does work but it doesn’t… couldn’t get the buttons inline aligned next to my name. They jump to the line below. I’m using Genesis+Executive Pro theme.

    That theme seems to have two areas or divs, one for the date+author name and such, in grey color, and the other for the comments (post a comment) in red. I’m not using comments on my site. Still, that area seem to be reserved and the buttons can’t get there.

    Anyway, thanks!

  31. Nice post, I love Pinterest Pin it button and ofcourse your social share that you coded own.

  32. Hi Bryan,

    This is indeed an awesome tutorial, I have it working perfectly on my blog. Thanks to you!

  33. not work this code [post_share]

  34. Wow! Great Suggestion. I have recently installed genesis theme in my site changing canvas theme. I was looking this type of information. Hope your suggestion will improve my site. Thanks dude.Best of luck.

  35. Hello
    It works great!! Thank you very much. The only problem that I am having is- Facebook button is a bit lower than the other two. Do you know what I can do to fix it?

Speak Your Mind

*