By BoLOBOSE payday loan

Google’s Plus 1 Button Integration And Options

by: Caleb Jonasson - June 29th, 2011   13 Comments

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>

Related posts:

  1. Adding The ‘Like’ Button to WordPress
  2. Creating a top button
Tags: , , ,
Caleb Jonasson

About: Caleb Jonasson

I am a web application developer currently spending my days coding at work, completing contracts and running around with my Nikon. This is my primary place for updates and everything code, technology and database related.
  • http://codewithdesign.com Caleb Jonasson

    Here is a link to the Google Documentation for the Plus 1 Button http://www.google.com/webmasters/+1/button/

  • http://aboitizland ferdinand marte

    Hi Caleb, I want to use +1 icon (taken from an icon set at http://ginva.com/2011/07/download-16-free-google-1-google-plus-one-icon-packs/) instead of the default +1 button. How should I code this, so that when the icon is clicked, it counts the click.

  • http://codewithdesign.com Caleb Jonasson

    I’m sure that it is possible to hack the dom to allow it via javascript but the iframe is being loaded from another server and thus it cannot be done with conventional means.

    Google has made it pretty unhackable and I was able to pull all of the content out of it but I was unable to change the sprite path from which google loads the images for all sizes or change any of the styles that are attached to it. One method that may work for you is copying the code and creating your own plus one button that ties into their api although this may take a little bit longer.

    And thus I conclude, although after a little testing I was unable to get any results. You may have different results but after spending half an hour on it I decided to give up.

    Good luck and happy hacking.

  • matteo conta

    How about security? The URL option allow malicious web site to let you vote for things you don’t trust or support, see my examples at http://devcoma.blogspot.com/2011/09/google-1-button-security-concerns.html

  • Anonymous

    I wouldn’t call it a security issue but I would call it possibly misleading. Either way the feature should be there for a website such as this one. I’m just going to throw out an example. If you had a weblog with a bunch of different stories on the front page and a plus one button above each story you would want those to link to the pages that the stories were on rather then the weblog landing page.
    It isn’t so much a problem as it is a feature and you can always check to see just what you are plus one-ing when you go the Google plus application.
    This is a common feature with almost all of the social media bookmarks on the web today.

  • Matteo Conta

    My only concern is that you can’t see the details of what you are clicking, google shows only the number of +1 but, if you are referencing an external web site, you see the right url only analyzing the source code.

    A better approach should be to show the linked site when the +1 button references something external to my web site.

    Your example is correct but if you have a lot of stories in your blog then it should be possible to add a relative url, showing that the reference of your +1 button is local.

    The problem are external references, imagine a feauture were your +1clicks are published to your publick profile… You click ‘I like music’ and you publish on your profile that you support Nazi web site…. I think that it’s not correct, right?

  • Anonymous

    You raise a valid point but at the same time but the Google would have to add in the feature because if anyone wanted to display exactly what you were going to plus one they could still change the results of what the plus one actually leads to.

    Either way I do think that Google has done a good job by keeping it simple for everyone to use and hopefully you trust the site that you are clicking plus one on.

    If the site that was being plus one’d did have external link some kind of warning or notification would be handy but at the same time It would intrude on the simplicity and speed of the button.

  • Tuuu

    Good

  • http://pulse.yahoo.com/_L2Q5H5LVBLM63S2MAJLXMXSURA Romero

    Perhaps it sounds silly for you guys but I am feeling a bit, yes, almost afraid of what we are going to create by following google’s plus1 policy. I want to explain:
    Plus 1 only works when you log into a Google account. This alone will shrink the reach of this button markedly, like the facebook button. Means: if you publish content on intimate matters, let’s say certain illnesses f.e., you will not gain follwers by this means. Now this may be an exception, you will say. But certainly a very big part of the web IS about intimate matters (just imagine the highest profit biz on the internet, … porn). Facebook at least allows you to like something and hide it. Google doesn’t, as far as I know. Facebook did this certainly for good reasons….
    Then, the SERPs will be affected by the plus counts … right now they claim, it’s just affecting SERP listing as long as you stay logged in, prefering those results who received plusses by someone in your circle.
    So, let’s do a resume: All this requires that everybody and his dog have a Google account and, to make the story even more “exciting” (irony), you are supposed to stay logged into your Google account thus allowing Google to track almost your entire life!!! I mean, who will remember to log out when going into online banking, into perhaps other webmail accounts, surfing websites belonging into an intimate area of the person etc….
    You are promoting a 1984 scenario without even noticing it.
    This way Google will gather a database of the population of the western world to an extend that frightens me. Just imagine: they might deny listing in their SERPs to those websites that do not show their dammed button. If you want to advertize via Google you might gain a discount for every “plus” you acrued, thus forcing businesses to enter in this game. This is already on its way given the fact that SEO companies already claim the era of backlink spamming over, the next buzz in SEO is already Google Plus +1. All this doesn’t really add any value to the web which is an information media. It just keeps webmasters busy to stay topic on the newest social buzz buzz all the time instead of letting them focus on creating good and relevant content! Sorry for the lengthy statement. I just needed to get rid of that.

  • Pingback: Links About Working With Google+ | Sunshine Coast + Website Design + Logos + Stationary + Queensland

  • Anonymous

    This isn’t just a new trend to talk about because it does add value to a website. Page ranks go up and it is a sharing feature rather than a simple button showing how many people like and it does drive traffic to websites via an application like G+.

  • http://www.nwesource.com nwesource

    Did you see Brian Horn’s post today? SEO value seems to be BIG from the +1. My question is it better to send all +1′s to your home page for now? Perhaps then make them per page after you have some home page rep built up?

  • CalebJonasson

    It would be better to have more pages with the +1 than just the base URL with a ton of pluses. This is because the index per page will be higher and thus varying keywords that are used when your website appears in Google searches will have more merit.