Tutorial: Google Contacts

<b>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.</b>   <br /><b><br /></b> <b><br /></b> <br /><div style="clear: both;"></div><a name="more"></a><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUxxS3GWHsU7vrH2sAa0vjtWyXR7bxHxgbRnCHAca9FjtMRJWGnkr5NugEPt6ZTV87es3tSh6JD3yCctySJcEOfAzAIl95W8LanIWplNv7s8QWbNkKNQb_0CI09RDb2XWhgVhMsbMT_5SH/s640/adding-google-contacts-quicklink-to-blogger-or-website.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><br /><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUxxS3GWHsU7vrH2sAa0vjtWyXR7bxHxgbRnCHAca9FjtMRJWGnkr5NugEPt6ZTV87es3tSh6JD3yCctySJcEOfAzAIl95W8LanIWplNv7s8QWbNkKNQb_0CI09RDb2XWhgVhMsbMT_5SH/s640/adding-google-contacts-quicklink-to-blogger-or-website.png" width="280" /></a></div>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.<br /><br />If you use Gmail as your email system, then <b>Google also gives you an address book, which they call Contacts.</b> 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.<br /><br />Google Contacts is tightly linked to your Gmail account, and the way that most people access it is by:<br /><ul><li>Going to Gmail </li><li>Clicking on the Contacts button in the left-sidebar.</li></ul><br />But you can <b>go straight into your Google Contacts, without having to load Gmail first</b>.   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.<br /><br />To go directly into your Google Contacts book, just type    <span style="font-family: 'Courier New', Courier, monospace;">www.google.com/contacts </span>into the address-bar of your web-browser.<br /><br />This is easy - but some people would prefer to have a button that they can click, rather than having to manually type an address. <br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_KyiM-qgpmt7d0BlADlNxD_fQgv6v_kzDXdI5viZ34N3qu1302yYJHTHqhyphenhyphen84bHPAIj_ydi9atX0I5Zxfa-trYVsy-5nZ8U1aqMG0kOWEmaaP8DhfTj5EhHNhP19ATykv2oIjYDVTZifg/s245/google-contacts-icon-medium.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_KyiM-qgpmt7d0BlADlNxD_fQgv6v_kzDXdI5viZ34N3qu1302yYJHTHqhyphenhyphen84bHPAIj_ydi9atX0I5Zxfa-trYVsy-5nZ8U1aqMG0kOWEmaaP8DhfTj5EhHNhP19ATykv2oIjYDVTZifg/s245/google-contacts-icon-medium.png" /></a></div>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 <a href="http://blogger-hints-and-tips.blogspot.com/2010/10/copyright-blogs-and-bloggers.html">freely used on any website</a>, so long as you say where it came from in the way that I've shown below.<br /><br /><i>(If you a wondering "why on earth would anyone want that" - then please don't waste time reading further - you are clearly <b>not </b>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</i><i>.)</i><br /><br /><br /><h2>How to add a Google Contacts button to your blog or website</h2><h3>Set up a place to put the button</h3>If you want to add the button to Blogger, then just <a href="http://blogger-hints-and-tips.blogspot.com/2012/03/adding-gadget-to-your-blog-using.html">add a gadget in the usual way</a>, and choose gadget-type of HTML/Javascript.<br /><br />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.<br /><br /><h3>Add the code</h3>The HTML code to add is:<br /><blockquote class="tr_bq"><blockquote class="tr_bq"><span style="font-family: Courier New, Courier, monospace;"><div class="separator" style="clear: both; text-align: center;"></span><span style="font-family: Courier New, Courier, monospace;"><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/AVvXsEiW6pLMBZW8iGzTYGK3hAnDVMBqiNOBJP03mWXuGxDDA2gi265opUNnVT_vm3uVF5L_6qOeOSC0EdXx3SraWARoIMuXxtuW8_qbQv0ns3lNOoWGeQ9irszDwWN269ppDi8m1UMUidjis7bY/s490/google-contacts-icon.png" width="50%" /></span><span style="font-family: 'Courier New', Courier, monospace;">  </a></div></span></blockquote></blockquote><br />Make sure you all all the code, including the Creative Commons license information - this is what says you are allowed to use the picture.<br /><br /><h3>Configure the size</h3>You can change the size of the button by changing the number in this statement:<br /><blockquote class="tr_bq">width="<b>98%</b>"</blockquote>On my sidebar in <a href="http://blogger-hints-and-tips.blogspot.com/">Blogger-Hint-and-tips</a>, I have it set to 50%. <br /><br />You can use either a percentage value, as shown, or a pixels or em measure, for example<br /><blockquote class="tr_bq">width="50px"<br />width="10em"</blockquote><div><br /><h3>Job done!</h3>Save the change in the usual way, and you will have a button on your website which opens Google Contacts<br /><br /></div><br /><h2>How to add a Google Contacts button to your computer / laptop / desktop</h2>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.<br /><br /><h3>Browser Favorites</h3>One option is to go to  <span style="font-family: 'Courier New', Courier, monospace;">www.google.com/contacts</span><span style="font-family: 'Courier New', Courier, monospace;"> </span>  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.<br /><br /><br /><h3>In the Windows desktop</h3>Right click on your desktop<br /><ol><li>Choose <b>New</b></li><li>Choose <b>Shortcut</b></li><li>In the screen that asks what you want the shortcut to, enter  <span style="font-family: 'Courier New', Courier, monospace;">www.google.com/contacts</span></li><li>Click <b>Next</b></li><li>Enter the Name you want the link to have, eg "Google Contacts", and click Finish</li></ol><br /><br />The shortcut that is added to your desktop has a standard internet picture.   To change it to another<br /><ol><li>Download <a href="https://drive.google.com/file/d/0B5nY2oe6M84xVmlOQ0pYU0hXM1U/edit?usp=sharing" target="_blank">this file</a> to your computer, and save it somewhere.</li><li><b>Right click</b> on the shortcut that was created, and choose <b>Properties</b>.</li><li>Choose <b>Change Icon</b></li><li>Choose the file that you saved in step 1</li></ol><br /><br />Note:   these instructions were prepared using Windows 8 - they may vary slightly for earlier versions.   But the same general approach applies.<br /><br /><br /><h4> </h4><hr /><h2>Related Articles:</h2><a href="http://blogger-hints-and-tips.blogspot.com/2010/10/copyright-blogs-and-bloggers.html">Copyright, blogs and bloggers</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2012/03/adding-gadget-to-your-blog-using.html">How to add a gadget to your blog</a>

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 pictur...

Tutorial

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

Popular Posts

Blog Archive

Labels