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!
Does this work for normal wordpress themes ?
I have a custom theme that need this kind of tweak.
Should work but might need some tweak. This tutorial using Genesis Framework specific hook, so it will only works for G child themes 🙂
As the title says, the tut will work only for Genesis Framework.
However, I will come up with a better codes (for responsive design and some silly fixes, the above tutorial have). You may take a look on an upcoming site
How to make this to work on Responsive Web Design?
Thx in advance
Hello Jonn,
It might be too late to reply but yes I have updated the code and It should work on Genesis 2.0. HTH.
I think there is a large typo .. the codes for sharebar.php and functions.php look identical
Just fixed.. Thanks for pointing!
How to make it sticky ? what do you mean by To do so add the following code to “Header script”. Don’t forget to wrap it with noConflict wrappers: ? and i havent added the scripts in the footer,still all the buttons work just fine ?
That code will enable the buttons to stick at the top of the page. You may check the feature by scrolling down this page.
Please check the wordpress.org link to know about the noConflict wrapper. That will explain the whole thing. If you still have any problem, reply this comment..
I as i am also facing the same problem as i did everything perfectly except for the 5th step.What i didnt understand is where to add the code ? could you tell what code to paste where ? just provide the code to paste in the header ?
Add this code to header script: https://gist.github.com/BlogSynthesis/5915509
add me on fb facebook.com/amit.kolambikar
Great Post 🙂 Thank you for Sharing…
Cool information, really very informative . keep updating
hy thx about your tutorial
Nice tutorial but it seems pinterest is not included in your script, any workout around?
Which Pinterest button you want to add? Is it pin it button or follow button?
Pin it button instead of buffer button
Replace
<a href="http://bufferapp.com/add" data-text="<?php the_title(); ? rel="nofollow">" data-url="<?php echo get_permalink(); ?>" data-count="horizontal" data-via="BlogSynthesis" data-related="NetRival">Buffer</a>
with
<a href="//www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark" rel="nofollow"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" /></a>
And add the javascript part to “Footer script”.
I think your Comments form is formating the code, and i use Magazine Pro Theme which has a floating Menu, won’t they conflict with each other?
Where is the Pinterest Javascript code?
Grab the code from http://business.pinterest.com/widget-builder/#do_pin_it_button (Select button type – Any Image).
I will not suggest to add floating horizontal sharebar with your existing theme. You should choose either sharebar or fixed header.
Alright, how do I make sharebar fixed?
If you do not want floating sharebar then skip step 5 (Add some jquery scripts to bring the social sharebar at the top during page scroll.)
Alright thanks, will let you know if i got into trouble