Simply add this code to the bottom of your functions.php file:
add_action( 'genesis_before_post_content', 'child_social_media_icons', 5 ); /** * Social Media Icons * * @author Greg Rickaby * @since 1.0.0 */ function child_social_media_icons() {
if ( !is_front_page() ) { ?>
<div id="social-media-icons"> <div> <div data-send="false" data-layout="button_count" data-width="100" data-show-faces="false"></div> <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&appId=134944943249381"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> </div> <div> <a href="https://twitter.com/share" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-via="YOUR-TWITTER-USERNAME">Tweet</a><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> </div> <div> <g:plusone size="medium" href="<?php the_permalink(); ?>"></g:plusone> <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> </div> <div> <a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php echo genesis_get_image( array( 'format' => 'url' ) ); ?>" count-layout="horizontal">Pin It</a><script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script> </div> <div> <su:badge layout="1"></su:badge> <script type="text/javascript"> (function() { var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true; li.src = window.location.protocol + '//platform.stumbleupon.com/1/widgets.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s); })(); </script> </div> <div> <script src="http://platform.linkedin.com/in.js" type="text/javascript"> </script> <script type="IN/Share" data-url="<?php the_permalink(); ?>" data-counter="right"> </script> </div> </div> <?php } }
Then add this to the bottom of your style.css file:
/* Social Media Icons
———————————————————— */
#social-media-icons {
display: block;
height: 20px;
width: 100%;
margin: 10px 0 20px 0;
padding: 0;
float:right;
}
.facebook-button {
float: right;
width: 50px;
}
.twitter-button {
float: right;
width: 62px;
}
.gplus-button {
float: right;
width: 60px;
}
.pinterest-button {
float: right;
width: 65px;
}
.stumbleupon-button {
float: right;
width: 80px;
}
I got this from a great post I found here: http://gregrickaby.com and just updated the code to my own preferences. Hope it is useful to you!