The Google +1 Sprite Animation

How the +1 Button Works

Google +1 Button The +1 Button uses an advanced sprite technique to simulate an animated `gif`. The animation occurs when hovering over search results with +1 enabled, and the shine moves across the button. (The image to the right is an animated `gif` I made…)

The +1 Button is not an animated `gif`, however. It’s a sprite image that moves a background image across the “window” of the button using Javascript. The code, if you care, goes something like this:

`onmouseover=”window.gbar&&gbar.pw&&gbar.pw.hvr(this,google.time())”`

The sprite image Google uses for the +1 button is below:

Google +1 Sprite

Pretty neat, huh?

Yeah, the +1 Button animation is pretty neat…
…now turn it off!

Oh goodness gracious, the animation is annoying. After hovering over one search result, it’s obvious how awful the animation is and I want to claw my eyes out with a rusty nail. I wanted to find a way to disable the animation.

Note: To use the code below, you must have a user stylesheet with the code shown added to the file. Here are links that will help you set it an user stylesheet: Safari, Internet Explorer, Firefox, Opera. Set that up, and then proceed below!

Disable the +1 Button Animation

`.esws { background-position: -400px 0px!important; } /* Disables animation of the +1 button */`

Hide the +1 Button

`.esw { display:none!important; } /* Hides the +1 Button completely */`

Improve the +1 Button

I want to use the +1 Button, so I’ve left it enabled. What I’ve done, however, is make the image lighter so it stands out less when you hover over a listing. When you hover over the button, it increases the brightness to 100%. It’s the best of both worlds:

`/* Disabled the animation, makes the +1 button lighter yet full brightness on hover */
.esws, .eswh { background-position: -300px 0px!important; }
.eswh:hover { background-position: -400px 0px!important; }`

I hope this helps people who love the +1 Button but hate the animation.

Author: Zack Katz

Zack Katz is the President of Katz Web Services and the developer of WordPress plugins with over 700,000 downloads. He lives in Southwest Colorado with his wife and two cats.

9 thoughts on “The Google +1 Sprite Animation”

  1. Thank you for sharing this. I’m fed up with companies ramming stuff down our throats- what happened to the concept of “personal space”?

    1. Exactly. The problem isn’t that it isn’t useful to certain people, but that it’s too IN YOUR FACE.
      And in defiance, I won’t be using it anytime soon.

  2. On latest Chrome on OSX you can put the CSS in this file: “/Users/francis/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css”

    No need to reload – it picks it up straight away (at least, in a new window).

  3. Firefox users:  Print and follow steps to turn off
    /disable/remove Google +1 Buttons from search results with or without AdBlock
    or AdBlock Plus:

     

     

    1) 
    Go to Firefox Profiles folder on your hard drive.   To locate your Firefox

         
    Profiles in Windows XP, Vista, 7, 
    press:

     

                     [Windows Key]+[R] → Type in
    (minus the quotes):   

     

                          
    “%APPDATA%MozillaFirefoxProfiles”   
    → click OK

     

     

                 or from the Taskbar click:

     

                      START  →  RUN  → Type in (minus the quotes):  

     

                           
    “%APPDATA%MozillaFirefoxProfiles”  
    → click OK

     

     

          
    The Profiles Folder will open.  
    There will probably be only one folder in the

          
    Profiles folder.

     

     

     

     

    2)  
    Open the folder with the 
    “.default”  extension
    name.

         

         

     

     

    3)  
    Look for a folder named Chrome in the .default folder.   If Chrome folder does

         
    not exist, you need to create it. 
    (If the Chrome folder exists, skip to #4).

     

             
    To create the Chrome folder:  

     

                   Right click inside the .default
    folder  → Select NEW FOLDER

                   → Type in (without the
    quotes):   “Chrome”

     

     

     

     

    4)  
    Open the Chrome folder and create a .text file named
    userContent.css. 

                (The contents of this file tells
    Firefox not to display +1 Buttons on

                  web pages.)  

     

                To create a text file named
    userContent.css:

     

                      Right click inside the Chrome
    folder  → Select NEW → TEXT

                      DOCUMENT → Type in (without
    the quotes):  userContent.css

     

     

           
    Windows will bring up “Rename” warning dialogue box that says:

     

                       If you change a file name
    extension, the file may become unusable.

                       Are you sure you want to
    change it?

                                                 Yes     No

                    

            
    Select  YES

     

             

     

     

     

    5)  
    Open userContent.css. 

            

             
    (It will open in Notepad with a box titled:  userContent.css – Notepad).

     

     

     

     

       

    6)  
    Paste the following into Notepad (minus the quotes):

     

                  ” .esw {
    display:none!important; } /* Hides the +1 Button completely */  ”

     

          
    Be sure to include the period (.) before “esw” in the above.

     

     

     

     

     

    7)  
    Save the Notepad file and Close it:  

     

              
    Select FILE → SAVE →  FILE → CLOSE
    (or select X on folder title bar

              
    to Close)

     

     

     

     

    8) 
    Close remaining open folders.

     

     

     

     

    9)  
    If Firefox Browser is not closed, close it.   Re-open Firefox Browser.  Navigate to Google’s

         
    search page and perform a search. 
    Google +1 Buttons will be gone from all future search

         
    results.

  4. Here’s how Firefox users can turn off
    /disable/remove Google +1 Buttons from search results with or without AdBlock
    or AdBlock Plus:

    1) 
    Go to Firefox Profiles folder on your hard drive.   To locate your Firefox

         
    Profiles in Windows XP, Vista, 7, 
    press:
         [Windows Key]+[R] → Type in
    (minus the quotes):  %APPDATA%MozillaFirefoxProfiles”   
    → click OK

        or from the Taskbar click:
        START  →  RUN  → Type in (minus the quotes): “%APPDATA%MozillaFirefoxProfiles”  
    → click OK 

       The Profiles Folder will open.  
    There will probably be only one folder in the Profiles folder.

     

    2)  
    Open the folder with the 
    “.default”  extension
    name.

     

    3)  
    Look for a folder named Chrome in the .default folder.   If Chrome folder doesnot exist, you need to create it. 
    (If the Chrome folder exists, skip to #4).To create the Chrome folder:  Right click inside the .default
    folder  → Select NEW FOLDER → Type in (without the
    quotes):   “Chrome”

     

    4)  
    Open the Chrome folder and create a .text file named
    userContent.css. The contents of this file tells
    Firefox not to display +1 Buttons on web pages.)  To create a text file named
    userContent.css:  Right click inside the Chrome
    folder  → Select NEW → TEXT DOCUMENT → Type in (without
    the quotes):  userContent.css
    Windows will bring up “Rename” warning dialogue box that says:  If you change a file name
    extension, the file may become unusable.  Are you sure you want to
    change it?   Yes     No                

    Select  YES

     

    5)  
    Open userContent.css. (It will open in Notepad with a box titled:  userContent.css – Notepad).

       

    6)  
    Paste the following into Notepad (minus the quotes):
             ” .esw {
    display:none!important; } /* Hides the +1 Button completely */  ”

         
    Be sure to include the period (.) before “esw” in the above.

     

    7)  
    Save the Notepad file and Close it:  Select FILE → SAVE →  FILE → CLOSE
    (or select X on folder title barto Close)

    8) 
    Close remaining open folders.

     

    9)  
    If Firefox Browser is not closed, close it.   Re-open Firefox Browser.  Navigate to Google’ssearch page and perform a search. 
    Google +1 Buttons will be gone from all future search 
    results.

Leave a Reply

Your email address will not be published. Required fields are marked *