How to add sticky ShareBar to Genesis Framework 2.0 (now responsive)

Genesis is most easiest WordPress framework for customizing even for newbies (this is why i like the framework most). We can easily integrate more functionality to Genesis Framework without breaking the core functionality and security. In this tutorial we will add sticky Sharebar to Genesis based blogs and site. Considering you have not installed sticky navigation or hellobar kinda thing; lets begin.

Since social media is getting more and more importance in SERP ranking, it is really important to get more and more Facebook likes, tweets and Google plus ones (also other). A sticky or floating sharebar will definitely generate more sharing.

Update: I have updated the code so you can install this to the upcoming Genesis 2.0 Framework. Also included Buffer button.

---

Sticky sharebar will keep the Tweet, Like and Plusone button always on top. We can see example OMG Ubuntu and this blog.

---

1. Create sharebar.php

Create a file named “sharebar.php” with the following code and upload to your child theme.

<?php
//* Do NOT include the opening php tag

//* These are the buttons
<div id="social-widgets">
	<div>Share:</div>

	<div>
		<div data-href="<?php echo get_permalink(); ?>" data-send="false" data-layout="button_count" data-width="62" data-show-faces="false"></div>
	</div>

	<div>
		<!-- Place this tag where you want the +1 button to render. -->
		<div data-href="<?php echo get_permalink(); ?>" data-size="medium"></div>
	</div>

	<div>
		<a href="https://twitter.com/share" data-text="<?php the_title(); ?>" data-url="<?php the_permalink(); ?>" data-via="BlogSynthesis" data-related="NetRival">Tweet</a>
	</div>

	<div>
		<a href="http://bufferapp.com/add" data-text="<?php the_title(); ?>" data-url="<?php echo get_permalink(); ?>" data-count="horizontal" data-via="BlogSynthesis" data-related="NetRival">Buffer</a>
	</div>

</div>
<div></div>

2. Execute the sharebar.php

Now we will need to execute the files on posts. To do so add the following code to “functions.php”. Be careful about adding the code. Any error or typo may break your site. It will be good to keep a backup of functions.php.

<?php
//* Do NOT include the opening php tag and 
//* Must read the tutorial at http://www.blogsynthesis.com/?p=1090

//* Add Sharebar to Posts
add_action('genesis_entry_content', 'include_share_box', 3 );
function include_share_box() {
    if ( is_single() )
    require(CHILD_DIR.'/sharebar.php');
}

3. Add CSS to your style.css

Now, we will add some Cascading Style Sheet (in short css) to style.css. it will make the buttons horizontal at the top of the post content.

/* Share bar CSS
------------------------------------------------------------ */

.social-widgets {
	background: #f5f5f5;
	padding: 4px;
	margin-bottom: 16px;
	margin-bottom: 1.6em;
	height: 32px;
	overflow: hidden;
}

.social-btn {
	height: 28px;
	vertical-align: middle;
	min-width: 92px;
	display: inline-block;
}

.social-share-txt {
	font-weight: bold;
	float: left;
	margin: 0 12px;
}

4. Add social buttons JavaScript:

Since, we have not included the button JavaScript  the buttons will not appear. Also, there is no need to add the particular codes if you have already added them to your site. e.g. If you have twitter follow button or other Facebook widgets then remove the respective part. if not, add the following code to wp_footer().

Navigate: WP dashboard >> Genesis (Theme Settings ) >> Header and Footer Script

<!-- Place these tags at wp_footer() from Genesis Dashboard. -->

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

<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'http://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

<script type="text/javascript" src="http://static.bufferapp.com/js/button.js"></script>

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

5. Add some jquery scripts to bring the social sharebar at the top during page scroll.

If we did everything correctly then the social sharebar will start working on the site. The only thing will not work is stick at the top during scroll. To do so add the following code to “Header script”. Don’t forget to wrap it with noConflict wrappers:

jQuery(document).ready(function($) {
    // Inside of this function, $() will work as an alias for jQuery()
    // and other libraries also using $ will not be accessible under this shortcut
});

And the code is:

// Share bar
if ($('body').hasClass('single')) {
  var timeout = null; var entryShare = $('#social-widgets').first(); var entryContent =$('.entry-content').first();
  $(window).scroll(function () {
    var scrollTop = $(this).scrollTop();
    if(!timeout) {
      timeout = setTimeout(function() { timeout = null;
        if (entryShare.css('position') !== 'fixed' && entryShare.offset().top < $(document).scrollTop()) {
          entryContent.css('padding-top', entryShare.outerHeight() + 8);
          entryShare.css({'z-index': 500, 'position': 'fixed', 'top': 0, 'width': entryContent.width()});
        } else if ($(document).scrollTop() <= entryContent.offset().top) {
          entryContent.css('padding-top', '');
          entryShare.css({ 'position': '', 'z-index': '', 'width': ''});
        }
      }, 250);
    }
  });
}

More:

The Sticky social Sharebar should work perfectly on your blog. If you have any problem don’t hesitate to share with us by commenting here or tweeting. If you want to add the social media button to Genesis 1.9.x or older (and non responsive) check the following codes: https://gist.github.com/BlogSynthesis/5433719

The bar will hide some buttons on small screen. If you didn’t like this then just modify the Style.css part.

If you want to add more buttons, then simply navigate go to sharebar.php and add the code there. If possible add the JavaScript code to wp_footer(). (I recommend adding JS at the bottom due to good practice)

If you liked this post, don’t forget to share on social media sites. One tweet, like or G+ is worth thousand dollars for me. 😉 Happy blogging!