To install the z4sidebar social sidebar on your website:

Insert this code into the <head> of your web page after the page title and below your other css documents:
Insert this code into the <head> of your web page after the page title with your other javascript documents:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script src="http://www.z4zen.com/zBar/js/zBar.js" target="_blank"></script>
Insert this code into the <body> of your web page (the bottom of the page is fine, be sure it's before the closing </body> tag:
 <div id="z4sidebar-show" style="display:none;"> <div id="z4sidebar-show-button"></div> </div> <div id="z4sidebar">  <iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/like.php?app_id=141440452603597&href=YOUR_URL&send=false&layout=box_count&show_faces=false&action=like&colorscheme=light&locale=en_US" style="float:left;margin:0 0 0 3px;height:63px;"></iframe>  <div style="float:left;margin:10px 0 0 3px;"> <a href="http://www.facebook.com/sharer.php" name="fb_share" type="box_count">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> </div> <div style="float:left;margin:10px 0 0 0;"> <a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a> <script type="text/javascript" src="//platform.twitter.com/widgets.js"></script> </div> <div style="float:left;margin:10px 0 0 3px;"> <g:plusone size="tall"></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 style="float:left;margin:10px 0 0 3px;"> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script> </div> <div style="float:left;margin:8px 0 0 3px;"> <div id="z4sidebar-hide"></div> <a href="http://www.z4zen.com/zbar-social-sidebar-social-bottombar" title="z4sidebar social sidebar" target="_blank"><img src="http://www.z4zen.com/zBar/images/z4sidebar.png" alt="z4sidebar social sidebar" /></a> </div> <script type="text/javascript">check_z4sidebar_display();</script> </div>
Change "YOUR_URL" in the facebook Like Button to your URL. If your page is written in php and you want the URL to be page specific (www.mysite.com, www.mysite.com/whats-new, etc.), replace the facebook like button code with this code:
PHP code for z4sidebar social sidebar
Save and upload your webpage and you are zBar'd!

If you want to edit and customize the z4sidebar social sidebar, download the zBar social sidebar and social bottombar package and edit the html, css, javascript and images as you wish. Don't forget to change the css path and image paths accordingly.

To install the z4bottombar social bottombar on your website:

Insert this code into the <head> of your web page after the page title and below your other css documents:
Insert this code into the <head> of your web page after the page title with your other javascript documents (most jQuery):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script src="http://www.z4zen.com/zBar/js/zBar.js"></script>
Insert this code into the <body> of your web page just before the closing </body> tag:
 <div id="z4bottombar-show" style="z-index:10;"> <img src="http://www.z4zen.com/zBar/images/z4bottombar-show.png" /> </div> <div id="z4bottombar" style="display:none;z-index:10;"> <div class="z4content">  <div class="float-left border-right">  <iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/like.php?app_id=141440452603597&href=YOUR_URL&send=false&layout=button_count&show_faces=false&action=like&colorscheme=light&locale=en_US" style="width:80px;height:24px;float:left;"></iframe>  </div> <div class="float-left border-right"> <a name="fb_share"></a> <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> </div> <div style="width:95px;" class="float-left border-right"> <a class="twitter-share-button" data-count="horizontal" href="http://twitter.com/share">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> </div> <div style="width:60px;" class="float-left border-right"> <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script><g:plusone size="medium"></g:plusone> </div> <div class="float-left border-right"> <script src="http://www.stumbleupon.com/hostedbadge.php?s=3"></script> </div> <div class="float-right"> <a href="http://www.z4zen.com/zbar-social-sidebar-social-bottombar" class="float-left" title="z4bottombar social bottombar" target="_blank"><img src="http://www.z4zen.com/zBar/images/z4bottombar.png" alt="zBar social bottombar" /></a> <div id="z4bottombar-hide" class="float-left"> <img src="http://www.z4zen.com/zBar/images/z4bottombar-hide.png" alt="Hide z4bottombar social bottom bar" /> </div> </div> </div> <script type="text/javascript">check_z4bottombar_display();// Checks z4bottombar visibility cookie</script> </div>
Change "YOUR_URL" in the facebook Like Button to your URL. If your page is written in php and you want the URL to be page specific (www.mysite.com, www.mysite.com/whats-new, etc.) replace the faceboook like button code with this:
PHP code for z4bottombar social bottombar
Save and upload your webpage and you are zBar'd

If you want to edit and customize the z4bottombar social bottombar, download the zBar social sidebar and social bottombar package and edit the html, css, javascript and images as you wish. Don't forget to change the css path and image paths accordingly.

Notes

Both the z4sidebar social sidebar and z4bottombar social bottombar use cookies that keep them hidden on page change or return to the website. By default, these coookies are set for one day, so upon returning the next day the zBar social sidebar and social bottombar will be back. You can easily change this in the zBar.js on lines 132 and 136 for the z4sidebar social sidebar and lines 106 and 110 for the z4bottombar social bottombar.

By default, the zMenu is commented out. To activate it, remove the "" after it, then edit the links within the zMenu.

To have the z4sidebar social sidebar not all the way against the left side of the page and floating next to the content body, place the z4sidebar social sidebar within the content body with a specified width and remove the "/*" comment mark before and the "*/" after the "/* margin:0 0 0 -100px; */" code on line on line 25 and either comment out or remove the "left:0;" on line 22 on the z4sidebar.css.

If you have any questions or ideas on how to improve the z4sidebar social sidebar or z4bottombar social bottombar, please let me know.

Main menu

To install the z4sidebar social sidebar on your website:

To install the z4bottombar social bottombar on your website:

Notes

Footer Menu