How the +1 Button Works
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:
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.
9 replies on “The Google +1 Sprite Animation”
Thank you for sharing this. I’m fed up with companies ramming stuff down our throats- what happened to the concept of “personal space”?
M3M Merlin – M3M launching its new project M3M Merlin in sector 67 on 14 Acres Land area, This Project comprising of a spacious bedroom apartments.
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.
Fab stuff! thanks so much for sharing.
thanks so much!
“Disable the +1 Button Animation” — yes, thank you very much!!!
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).
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.
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.