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.

Python: a simple HTTP client

  1     import httplib
  2
  3     h = httplib.HTTPConnection('www.python.org')
  4     h.request('GET', '')
  5     r = h.getresponse()
  6
  7     rh = r.getheaders()
  8     print 'Header:'
  9     for i in rh:
 10         print i[0], ':', i[1]
 11     print '\n'
 12
 13     rr = r.read()
 14     print 'Content:'
 15     print rr
 16     print '\n'
 17
 18     h.close()

The httplib module is used to handle the HTTP and HTTPS protocol in Python. Let us look into the code above.

Line 1: Obviously. Import the httplib module.

Line 3: Connect to the HTTP server. If the server is using HTTPS protocol, you use httplib.HTTPSConnection instead.

Line 4: Use the GET method to send the request. You can use the POST method by supplying the first parameter as 'POST' and put your data at the third parameter.

Line 5: Get the response from the server.

Line 7-11: Get and print out the HTTP header of the response.

Line 13-16: Get and print out the content of the response.

Line 18: Close the HTTP connection to the server.

Add the Google +1 button to your website

Google has made it very convenient to add the Google +1 button to your website.

What is shown above is the default style of the Google +1 button you can get from http://www.google.com/intl/en/webmasters/+1/button/index.html. Just make a couple of clicks and you can get the code to copy to your website.

Tip 1:
If you want to add multiple Google +1 buttons that +1 different URLs, you need to use the href attribute of the <g:plusone> tag, e.g. <g:plusone annotation="inline" href="www.toptip.ca"></g:plusone>

Tip 2:
If you want to add the Google +1 button to your Blogger's template, you can do this:

1. In the Blogger's dashboard, go to Design->Edit HTML.
2. Check the checkbox of Expand Widget Templates.
3. Search for <div class="post-footer">.
4. Add the Google +1 button code right below it.
5. To specify the href of the button, you should write: <g:plusone annotation="inline" expr:href="data:post.url"></g:plusone>

Tip 3:
To let the Google +1 button float on the right side, you need to wrap the button in a frame, e.g.

<div style="float: right;"> <g:plusone annotation="inline" href="www.toptip.ca" width="200"></g:plusone> </div> You may notice that I have set the width attribute of the button, because its default is 450 which place the icon in the middle of the article.