Just grab a snippet of code 
and paste it into your page. That's it.
+1 button icons can render at four heights: small (15px), medium (20px), standard (24px), and tall (60px). The small, medium, and standard icons can render with or without a total count of +1's. The tall icon always includes a total count of +1's. For more information, see Button sizes . You can also choose to display inline annotations, so that visitors to your page can see which of their friends have already +1’d your content.
You know your page and your users best, so we recommend putting the button wherever you think it will be the most effective. Above the fold, near the title of the page, and close to sharing links is often a good location. It can also be effective to place the +1 button at both the end and the beginning of an article or story.
If you want to add multiple +1 buttons to your page (for example, for different content modules), you’ll need to edit the button code. Use the href attribute to specify the target URL. For example, if your home page has a module linking to your blog, and you want to add a +1 button to that module, edit the value of the href attribute to point to your blog's URL, like this:
<div class="g-plusone" href="http://www.example.com/blog"></div>
Note: +1 is a public action, so don't add the button to any page you don't want visible on the web. When you add the +1 button to a page, Google assumes that you want that page to be publicly available and visible in Google Search results. As a result, we may fetch and show that page even if it is disallowed in robots.txt or includes a meta noindex tag.