I’ve talked about the importance of social media endorsement of your pages in previous posts and in our newsletter. While Facebook “Shares” are still the most important consideration do to its popularity, it is time to start taking Google Plus seriously, especially considering how integrated Google is in other key Google applications such as the Google Search Engine, Analytics, Webmaster Tools, Google Charts and Calendar, Google Plus Local and more. If you’ve yet to create a Google + page for your business, well, I recommend it. If you need help getting started I encourage you to view by blog post “Google Plus for Business” at: https://www.ecurtisdesigns.com/2012/08/google-for-business/
If you’ve been wondering how to add the “Plus One Button” then this blog post is for you. Firstly you’ll need to have a Google Plus Account. My assumption is that you have this by now so the next step is to visit the Google Developer’s page. The direct link to the Google +1 button is: https://developers.google.com/+/plugins/+1button/
When you visit this page, and are signed into Google Plus (this will show as an icon and your email address in the upper right corner of the browser page) then the code sample provided will show you what the button will look like on your page/s. Adding the code is really quite simple.
The top section of the code snippet reads:
<!– Place this tag where you want the +1 button to render. –>
<div data-annotation=”inline” data-width=”300″></div>
The first part with the <!– Place this tag … –> will not show since they are enclosed in comment tags, this is simply instructions. You can leave this on your page, or remove it. The second part of the above text will add the button, which you can add in multiple places, such as before or after every article on your web pages or blog posts.
The following part of the code is JavaScript used to render the code correctly. The instructions read:
<!– Place this tag after the last +1 button tag. –>
Again the instructions can be left or removed. The important thing is to add this code directly after the last button added.
The JavaScript code reads:
<script type=”text/javascript”>
(function() {
var po = document.createElement(‘script’); po.type = ‘text/javascript’; po.async = true;
po.src = ‘https://apis.google.com/js/plusone.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s);
})();
</script>
Note that this code (button and then JavaScript) can be added to an HTML page, an HTML5 page, or to a CMS page such as WordPress. For WordPress you can add it to the page itself in source code view, or on a sidebar by using a text widget. You can view our “+1 Button” on our sidebar.
Okay, so that being said, you will note that the developer page provides a lot of customization options for the button.
First we have size: The options are small, medium, standard, and tall.
The simple button inclusion code would be as follows: <g:plusone size=”small”></g:plusone>
The “annotation” has the options of: inline, bubble, and none.
- Inline provides the +1 button with the text “Recommend this on Google”. Once clicked it will shown your Google Plus button adjacent to the icon/picture of the person who endorsed it. This is similar to the Facebook like box. There is also the option of the width of the annotation area, and the language – English by default.
- The bubble will show the +1 button with a bubble of the number of clicks endorsements.
- The none option only shows the +1 button, no clicks bubble.
If your website is HTML5 then you need to use the div tag version of the button, which as the sample notes is: <div data-size=”tall” … ></div>; if you worked with jQuery mobile then this should be familiar to you.
The next section talks about Asynchronous JavaScript loading. Basically it notes that it is a best practice to ensure that the web page does not have to wait for the button to render while loading so as not to increase the page load time. The code provided above does provide for this. But yes, there is the other, less favored way to add the button which is found under the “a simple button” section:
The Simple Button – Not Recommended:
<script type=”text/javascript” src=”https://apis.google.com/js/plusone.js”></script>
<g:plusone></g:plusone>
The above example uses less JavaScript yet considering how easy the Asynchronous JavaScript is to add there is no reason to use the “simple button” option.
The next section states that if you would like to set “script tag parameters” then use the following code:
window.___gcfg = {
lang: ‘zh-CN’,
parsetags: ‘onload’
};
As you can see from the above example, this is changing the language from English to Chinese. If you click the links provided on this page you can see all of the language options. Another option is the button alignment. The following code shows you how to align it right, in this case you need to both float it right in a div tag and in the button tag itself.
<div style=”float: right”>
<g:plusone align=”right”></g:plusone>
</div>
As I noted above, under the button annotation section by default the text for “inline” reads: “Recommend this on Google”, yet if you don’t want this to show you can set the recommendation attribute to “false” on the +1 tag. See this chart for help: https://developers.google.com/+/plugins/+1button/#attr-recommendations
There are some other tag options as well (such as flash integration), but for most people what I noted above will be all you need to set up your Google +1 buttons on your pages.
Please feel free to contact me if you need help.
https://www.ecurtisdesigns.com
