How to add a Google Contacts button to your blog, website or desktop

This article shows how to add a button that takes a user straight to Google Contacts to your blog or website. It also distributes a picture that you can use in other places (eg your PC desktop) to make your own Google Contacts icon.

Most people have a button on their computer or smartphone, which they use to start their email. For some, this goes straight to their Gmail account in a web-browser, while others use an system like Thunderbird or Outlook to look at their email messages in a Gmail account and/or in email accounts they have with other services.

If you use Gmail as your email system, then Google also gives you an address book, which they call Contacts. This is not the same as the address book in Thunderbird or Outlook etc, which is saved on your local computer. Instead, the Google address book is saved on the internet, in your Google account.

Google Contacts is tightly linked to your Gmail account, and the way that most people access it is by:

Going to Gmail
Clicking on the Contacts button in the left-sidebar.

But you can go straight into your Google Contacts, without having to load Gmail first. And I often find that it is faster, especially if I just want to look up an address or phone number and not send an email.

To go directly into your Google Contacts book, just type www.google.com/contacts into the address-bar of your web-browser.

This is easy - but some people would prefer to have a button that they can click, rather than having to manually type an address.

So I have created a picture that can be used on such a button, and written up instructions on how to add it to your website, or your computer. This is licensed under Creative Commons: I am giving permission for it to be freely used on any website, so long as you say where it came from in the way that I've shown below.

(If you a wondering "why on earth would anyone want that" - then please don't waste time reading further - you are clearly not the target audience of this post! I know that there are some people who will be delighted with the idea, and that's who I'm writing for today.)

How to add a Google Contacts button to your blog or website

Set up a place to put the button

If you want to add the button to Blogger, then just add a gadget in the usual way, and choose gadget-type of HTML/Javascript.

If you want to add it to some other type of blog or website, then you need to use whatever procedure is required to add 3rd-party HTML to your site.

Add the code

The HTML code to add is:

<div class="separator" style="clear: both; text-align: center;"><a href="https://www.google.com/contacts" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm0cqJ1V038IbYg0el-ueOEhgMjT9iFqmJOMPX2efYYH9y02h2Y8lp1q3WAl13zSQO1aYkmSr02yY-q3x9eqN6s3TZZvSBww9WJ-BKWlkUcOWtlN-Cblfez2pEjdMUcmcSL2SHxsMJyr0M/s490/google-contacts-icon.png" width="50%" /> </a></div>

Make sure you all all the code, including the Creative Commons license information - this is what says you are allowed to use the picture.

Configure the size

You can change the size of the button by changing the number in this statement:

width="98%"

On my sidebar in Blogger-Hint-and-tips, I have it set to 50%.

You can use either a percentage value, as shown, or a pixels or em measure, for example

width="50px"
width="10em"

Job done!

Save the change in the usual way, and you will have a button on your website which opens Google Contacts

How to add a Google Contacts button to your computer / laptop / desktop

This is a little more difficult to describe, because it depends on exactly what computer and operating system you have, and what you mean by adding the button "to your computer". But here are some options.

Browser Favorites

One option is to go to www.google.com/contacts and then before you do anything else save it to the Favourites section in your browser - and then you know you can get to Contacts using your regular internet button and choosing it from your favourites.

In the Windows desktop

Right click on your desktop

Choose New
Choose Shortcut
In the screen that asks what you want the shortcut to, enter www.google.com/contacts
Click Next
Enter the Name you want the link to have, eg "Google Contacts", and click Finish

The shortcut that is added to your desktop has a standard internet picture. To change it to another

Download this file to your computer, and save it somewhere.
Right click on the shortcut that was created, and choose Properties.
Choose Change Icon
Choose the file that you saved in step 1

Note: these instructions were prepared using Windows 8 - they may vary slightly for earlier versions. But the same general approach applies.

Pages

Monday, July 14, 2014