How can I add Google +1 on any webpage with any icon?

Alexis Wilke's picture

Google +1Today I was looking for a way to add a Google +1 button that looked like other buttons. Suppose you have a website where you already added buttons: Facebook, YouTube, and Pinterest. You created a very specific look for those 3 buttons to match your website. It looks really nice. Now you want to add a Google +1 button...

The image on the right shows you the default Google +1 look.
If that is not what you want on your site, you'll want to use the following trick.

The default Google +1 button look is certainly fine for most websites, especially if you have a white background and contrast with colors for the different items appearing on your site. Once in a while, however, the buttons you're offering for Social Media are grayish or round or just not compatible graphically. Your graphics designer will certainly be able to provide you with the right look, but the default code from Google Plus will give you the wrong graphic.

To offer a +1 button with your own button, you'll need the following URL and encompass your button in an anchor tag.<page url>

The hl=en information is not important (it can be removed if you'd prefer.) It indicates the language of the page being indexed. Replace the two letter language with your own ("en" is English, use "fr" for French, "es" for Spanish, "de" for German, etc. See Languages and their Abbreviations)

Note that the <page url> must be a full URL and if it includes special characters they need to be URL encoded (for example, if it includes an & character, it has to be transformed to %26.) Yeah... I know... What did I just say??? But you're in luck because...

The following form will help you generate your Google +1 link. Enter the full URL (including http:// or https://) of the page for which you want to generate the link, and then click Generate. The result is the Google +1 link shown under Result below.

You like this tool? Don't forget to share with your friends!