Google has recently changed it’s theme, search method, oh and it has created a social networking site that will rival that of Facebook. The software giant has also rolled out the +1 button (plus 1 button) which is in direct competition with the Facebook like button. The plus 1 button has not only already been integrated into a lot of personal sites and blogs but it has been put into Google’s search results which is going to change the way we find content on the web and how this content is shared with friends, family and co-workers.
The Plus 1 Button Code
The button is also just as simple as the Facebook option when it comes to developer integration. The button only requires two lines of code, one in the header or body and the other where you would like the button to be placed.
1 2 | <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script> <g:plusone></g:plusone> |
Plus 1 Button Size Options
There some options as far as customization of the button goes. The first thing to take into consideration is the size and how it will appear. You can choose between small(height: 15px), medium(height: 20px), tall(height: 60px) and leaving it blank. If you leave it blank it will appear to look the same as the medium option but it will be 24px rather than the 20px that medium is.
1 2 | <!-- example of a small plus 1 button --> <g:plusone size="small"></g:plusone> |
Force A URL Through The Plus 1 Button
You can also force a URL into the button that the plus one will be applied to. This is simply done with an href tag and then the url.
1 2 | <!-- example of fixed url being set --> <g:plusone href="http://codewithdesign.com"></g:plusone> |



