Tuesday, December 13, 2011

Share Buttons Bar


As you can see in the bottom left corner of this page, the Share Buttons Bar embeds the most popular share buttons from Internet. Your readers can shrink or expand the Bar by click on the rightmost button.

If you are interested to add the Share Buttons Bar to your web site, it is very simple. Just copy the following two pieces of code to the appropriate place. Before doing it, you should certainly make a backup first.

Step 1: Copy this piece of code just before tag </head>
<!-- Share Buttons Bar (C) TopTip.ca - header - BEGIN -->
<style type='text/css'>
.shr12_buttons_bar {position:fixed; bottom:0px; left:0px; z-index:100; background-color:white; text-align:left; border:1px solid gray}
.shr12_button {display:inline-block; vertical-align:middle; height:20px; padding:2px 10px;}
.shr12_button_compact {display:inline-block; vertical-align:middle; height:20px; padding:2px;}
.shr12_csrptr {cursor:pointer;}
</style>

<script type='text/javascript'>
//<![CDATA[
function shr12_add_script(d, id, src)
{
  if(!d.getElementById(id)){
    var fjs=d.getElementsByTagName('script')[0];
    var js=d.createElement('script'); js.id=id; js.src=src;
    js.type = 'text/javascript'; js.async = false; /* "true" does not work well */
    fjs.parentNode.insertBefore(js,fjs);
  }
}

function shr12_buttons_bar_expand()
{
  document.getElementById('shr12_buttons').style.display='inline';
  document.getElementById('shr12_buttons_min').style.display='none';
}

function shr12_buttons_bar_shrink()
{
  document.getElementById('shr12_buttons').style.display='none';
  document.getElementById('shr12_buttons_min').style.display='inline';
}
//]]>
</script>
<!-- Share Buttons Bar (C) TopTip.ca - header - END -->
Step 2: Copy this piece of code right before tag </body>
<!-- Share Buttons Bar (C) TopTip.ca - body - BEGIN -->
<div class='shr12_buttons_bar' id='shr12_buttons_min' style='display:none;'>
<span class='shr12_button' id='shr12_gplusone_min'>
<g:plusone size='medium' annotation='none'/>
</span>
<b class='shr12_button shr12_csrptr' onclick='shr12_buttons_bar_expand()'> &gt; </b>
</div>

<div class='shr12_buttons_bar' id='shr12_buttons'>
<span class='shr12_button_compact' id='shr12_gplusone'>
<g:plusone size='medium'/>
<script type="text/javascript"> //<![CDATA[
shr12_add_script(document, 'gplusone-button-script', 'https://apis.google.com/js/plusone.js');
//]]> </script>
</span>
<span class='shr12_button' id='shr12_facebook'>
<span id="fb-root"></span>
<script type="text/javascript"> //<![CDATA[
shr12_add_script(document, 'facebook-jssdk', '//connect.facebook.net/en_US/all.js#xfbml=1');
//]]> </script>
<div class='fb-like' data-layout='button_count' data-send='false' data-show-faces='false'> </div>
</span>
<span class='shr12_button_compact' id='shr12_twitter'>
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="en">Tweet</a>
<script type="text/javascript"> //<![CDATA[
shr12_add_script(document, 'twitter-wjs', '//platform.twitter.com/widgets.js');
//]]> </script>
</span>
<span class='shr12_button' id='shr12_stumbleupon'>
<script src='http://www.stumbleupon.com/hostedbadge.php?s=1'/>
</span>
<span class='shr12_button' id='shr12_digg'>
<script type="text/javascript"> //<![CDATA[
shr12_add_script(document, 'digg-button-script', 'http://widgets.digg.com/buttons.js');
//]]> </script>
<a class='DiggThisButton DiggCompact'/>
</span>
<span class='shr12_button' id='shr12_reddit'>
<script type="text/javascript" src="http://www.reddit.com/static/button/button1.js"></script>
</span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a class='shr12_button' href='http://www.toptip.ca/2011/12/share-buttons-bar.html'>Get This</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<b class='shr12_button shr12_csrptr' onclick='shr12_buttons_bar_shrink()'> &lt; </b>
</div>

<script type="text/javascript"> //<![CDATA[
setTimeout(shr12_buttons_bar_shrink, 10000);
//]]> </script>
<!-- Share Buttons Bar (C) TopTip.ca - body - END -->

It is just that simple. If you like it, please recommend it to your friends or on your web site. It would be much appreciated if you can post our link on your site to let your readers know the origin of this widget is from http://www.toptip.ca/2011/12/share-buttons-bar.html.

No comments:

 
Get This <