Jul 11, 2011

Django: How to add Google +1 button to your website.

What is Google +1 button?

It's new Google social button. It's much similar to Facebook "Like" button. While available during one month it earned popularity that could compete with Facebook's social button. Corporation of Good knows what to do, so you probably want to have one on your website inline with Facebook's Like...

Add Google +1 button to your site:

- Open http://www.google.com/webmasters/+1/button/index.html and generate own button for your website.

Google proposes HTML code like this:

<html>
  <head>
    <title>+1 demo: Basic page</title>
    <link rel="canonical" href="http://www.example.com" />
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
    </script>
  </head>
  <body>
    <g:plusone></g:plusone>
  </body>
</html>

It's quite simple, as you can see. And that's much pretty it. Oh no wait...

- Add some variable to your template like "google_target_url" like this:

#pass variable to template with google +1 target url
return render_to_response("template.html", 
                         {"google_target_url":google_target_url,})

Finally you can add property "href" (similar to common a href=" " pattern) to target +1 action to custom url. In general you can now generate page with multiple +1 buttons on it. For e.g.: one button under one blogpost or image...


<g:plusone href="http://www.example.com/custom_page1/" size="standard" count="false"></g:plusone>

Note some more useful parameters like size and displaying counter. You can read about all options on it's FAQ. It's quite good to quickly build one to yourself in any case.

Comments/suggestions? Comment please...



2 comments:

  1. good stuff,i have been trying to make preview work with no success...could you give me some few pointers?

    ReplyDelete