How to add a Google +1 button to your Freeway Pro site

Last update: 13-06-2011

 

One of the most recent Social Services launched by Google is +1. By clicking a +1 button you tell your friends that you like the website or page. So if this website or page shows up in their Google search results they will be able to see you +1'ed the website or page telling them to take a look.

I added the buttons to my website, and this is actually quite simple. To help others to add this service to their Freeway Pro website I wrote this article. If you like my articles, please +1 them :-)

---

You need to enter a line of code into the HTML of the page you want this button to appear on. Of you want it to appear on every page of your website, you can place it into the Master page.

To place this +1 code into your page first go to Page / HTML markup

A piece of code from Google needs to be added into the </body> tag. Copy the +1 code below and paste it into the popup.

<script>
(function(d, t) {
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.async = true;
g.src = 'https://apis.google.com/js/plusone.js';
s.parentNode.insertBefore(g, s);
})(document, 'script');
</script>

Now it is time to add the actual +1 button to your page. In my case I have a HTML element without a defined height where I write my articles in, double click in it and click Insert / Markup element.

A large popup appears and I paste the +1 code below into it

<g:plusone size="small"></g:plusone>

And that's actually it. You're done!

You do not need to put the Markup element into a HTML element. You can just click Insert / Markup element and place it everywhere on your page.

Important! You need to upload your website before you can see the actual +1 button, but if you did all the steps correctly, you will see the +1 button appear on your live site.

For my website I used the small +1 button. But if you go to the following Google Webmasters +1 website, you will be able to configure your own +1 button and size.

http://www.google.com/webmasters/+1/button/

---

UPDATE:

I've read a very interesting article from Aaron Peters called Google +1 button performance review about the not so very optimal code from Google for the +1 button. You can read this article here: http://www.aaronpeters.nl/blog/google-plus1-button-performance-review

The original Google code can sometimes takes over 2 seconds before it loads and will make your website extremely slow. Strange thing is that Google also looks at the speed of your website for their ranking. Fortunately Aaron offers a piece of optimised code on his website and this code is already used in this article.

<< check the button! Great huh!

 

>> Click here to go back to the homepage

---

blog comments powered by Disqus

Home   |   My personal WordPress blog   |   Follow me on Facebook, Twitter or LinkedIn