Beginner’s Guide: How to utilize Google resources in WordPress

25 Comments

There are many ways to utilize the seemingly endless resources of Google in WordPress. The following list includes what I consider to be the most important Google tools, some others nearly every web developer uses, and hopefully even some that you don’t know about yet.

In this post we’ll be looking into 18 Google services and applications, including:

  • Google Analytics
  • Goo.gl url shortener
  • Google Chrome/Developer Tools
  • Google Website Optimizer
  • Google Docs
  • Google Custom Search
  • Google Maps
  • Google Reader, and
  • Google Adsense/Adwords

Google Analytics

Google Analytics WordPress

Nearly all website owners use Google Analytics. There are so many resources and cool things you can track with this invaluable tool. Track referrers, clicks, advertising, and a gillion other things. Track one website or a thousand. Target specific content, see where your visitors live, how long they’re on your site, and much, much more. Enough of me, check out these awesome tutorials for using Google Analytics.

Goo.gl url shortener

Google couldn’t miss out on the shortlinks action, so they came up with their own provider, goo.gl. Google claims it’s not just another url shortener. Do you use it as your default shortener? If not, this article by Kovshenin can help you get started with integrating it into WordPress, and you can also check out a couple of plugins that have popped up around it.

Google Chrome / Developer Tools

Google Chrome is now responsible for more than 10% of all browser usage, more than Safari and Opera combined. It has a great reputation for being extremely fast and very stable — like most Google stuff, I’d say. One of the only complaints I tend to see from web developers is that it doesn’t have all the fun extensions that Firefox has. But it is getting close.

Chrome comes with a built in pack of Developer Tools, that some say is better than Firefox’s Firebug. Chrome also has Firebug lite and a lot of other awesome extensions that are similar to Firefox’s offerings. I made the switch to using Chrome as my default browser a few months ago, and I now I think I have as much power in the Chrome Developer Tools and extensions as I had in Firefox.

Google Website Optimizer

Split-testing can be extremely valuable for your landing and sales pages. We even heard from Obox how a small change in their sales page made a drastic difference in theme sales. Google Website Optimizer helps you create experiments to see what works best for your site.

Website Optimizer is pretty advanced stuff (in my opinion at least). If you are looking for a simpler option, you may want to look at the MaxA/B free WordPress plugin that lets you compare WordPress pages in a matter of minutes. But if you want to dive into all the details of multivariate split-testing, Google’s product is a great place to start.

Google Libraries API

Google keeps minified libraries of a lot of code frameworks. Using simple scripts, you can use these libraries with WordPress. Even if WordPress already loads a framework, like it does with jQuery, you can still register and use the Google version. There is some argument about how good of an idea this is, but many claim it’s faster than using the WordPress packaged version. It’s obviously a good idea for any library not already bundled in WordPress.

The Google Libraries API currently supports Chrome Frame, Dojo, Ext Core, jQuery, jQuery UI, MooTools, Prototype, script.aculo.us, SWFObject, Yahoo! User Interface Library (YUI), and WebFont Loader. Learn more with the developer guide.

The easiest way to get started with integrating Google hosted libraries and WordPress is to use a plugin, but you can also go the manual route, which can be fun. The basic idea would be the following (credit: Frederick Townes):

php
wp_deregister_script(‘jquery’);
wp_register_script(‘jquery’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js’);
wp_enqueue_script(‘query’);
?>

This method is best to use in a custom extension or plugin, if anywhere. New themes will likely not allow registering jQuery this way.

Google Font Directory

Google Font DirectoryThe Google font directory is one of the most exciting new things to using non-standard fonts in our websites. The font directory does all the dirty work of implementing the CSS @font-face technique, including all of the best practices for making it cross-browser compatible.

The directory is entirely free to access, takes one line of code to implement, and you can use the fonts just like any other in your stylesheets. They started with just a few available fonts, but now there are dozens and more and more show up all the time.

This is my single favorite Google resource right now. You can implement the font directory multiple ways. For personal and client projects you could use a plugin or just use a simple @import command at the top of your css file and then just use the font name in your stylesheet. It could look like this:

@import url(‘http://fonts.googleapis.com/css?family=Droid+Sans’);
#body { font: normal normal normal 14px/20px ‘Droid Sans’, Arial, sans-serif; }

Google Checkout

google checkoutGoogle checkout is a cart solution similar to PayPal. It may not be the most familiar checkout option to WordPress users, but it is at least a viable solution to work alongside PayPal and other third party options.

The biggest positive of Checkout is the deep integration with Google Adwords and Google Product Search. One drawback is that Google Checkout doesn’t play well outside of the United States and United Kingdom, and by not play well I mean isn’t available.

There are a couple of plugins worth considering that can help you integrate this shopping cart application into your WordPress site.

Google Chart Tools

I’ll be honest. I just discovered Google’s chart tools. With these, you can pretty easily use Google Docs to create interactive charts for use on your website. There is a lot of power and potential behind these tools, and the sky is pretty much the limit with what you can do. Assuming the sky is limited to charts, of course.

Google Docs

Google DocsGoogle Docs is a great way to bring office tasks to the web. It is easy to share documents, spreadsheets, presentations and even forms. One of my favorite features is the ability to live-edit a document with a public or private group.

Ryan did this with a spreadsheet to line up interviews for WordCamp Phoenix. He simply invited people to sign up for a time on the shared Google spreadsheet. Awesome, right?

You can also embed Google Docs right into your WordPress posts and pages. All in all, it’s a nice, online-friendly alternative to Microsoft Office.

Google Custom Search

Google’s custom search feature lets you create just that, a custom search engine, and implement it on your own website. You can set up all sorts of features, such as making it just search your site, or a select number of sites, exclude certain results, and many other things. You can also connect your adsense account to the ads that display at the top of search results in the free version. The paid version includes the ability to remove the ads, and starts at $100 per year.

You get all of the power of Google in your own search engine. It’s really a nice alternative to WordPress search, which to be honest, could use a facelift.

Google Maps

There are a slew of Google Maps related plugins, but MapPress will allow you to do a basic, but thorough, integration of Google Maps into your WordPress site. Google Maps is an extremely powerful tool that almost everyone uses in everyday life, and thanks to other people’s efforts, we can also use Google Maps to assist us in our development projects.

WPCandy Powered Map

YouTube

YouTube logoYouTube is good for a lot more than watching funny cats and bros getting tazed (although I do love those). It is a great platform to upload and share all types of videos. And because YouTube bears the burden of the heavy lifting, we can spend less of our own bandwidth serving up the video itself.

WordPress has made it easier than ever to embed YouTube videos, so that now all you have to do is enter the url of the video on its own line and WordPress takes care of the rest. Of course, if you want more control, you may like TubePress or Viper’s Video Quicktags.

You can also take advantage of using your YouTube channel to expand your social profile and get visitors to your site.

Gmail

You may think I’m strange for including Gmail in a post about Google products and WordPress, but I’d venture to say a majority of WordPress developers use Gmail as their base account.

It’s really easy to have all of your emails consolidated to a single Gmail account. You can have your main account, forward emails from different domains to that account, and then use a ton of tools to organize and manage your emails. I have about half a dozen email accounts that all forward to my single Gmail account.

Google Reader

google Reader logoGoogle Reader is really one of the only free web-based RSS feed tools available. It’s a pretty decent system, and it’s always nice to keep all the sites you like in one place. But, I personally recommend you still come and visit the real world every now and then ;).

In WordPress, keep in mind that you can change your RSS settings to either show the full content or just excerpts. Personally, I get annoyed when I can only view the excerpts, and I actually tend to visit the real site even less than when the author shows me the full content in my Reader. I know right, the opposite of the intended effect. Something to think about for those of you that only allow excerpts in feed readers!

You may also be interested in this post by Jamie Thinglestad that shows how to easily add your WordPress site as a “send to” link in Google Reader so you can quickly and easily blog about posts in your feed.

Google Adsense / Adwords

Google Keyword Search

If you are going to use ads and don’t have a high-traffic site, Google Adsense is one of the simplest ways to do it. There are fifty bagillion tutorials online as to how to best target ads to fit your content, so check out some of those. You can also see some of the plugins in WordPress designed to make it easier for you to implement Adsense with WordPress.

Certainly one of the coolest things about Adwords, whether you use them for buying ads or not, is the keyword search tool. It’s simple to see how often specific words and phrases are searched for, both globally and locally.

Feedburner

feedburner in wordpressFeedburner is a great tool that can redirect your WordPress feeds through their system so you can track your subscribers in many different ways. It also helps you customize your feeds and has tools for things like managing email subscriptions.

Tentblogger has done an outstanding job explaining in detail how to set up Feedburner. Even if you’ve set up Feedburner half a dozen times, it’s worth a read.

Google Project Hosting

Want to maintain a project online? Google Project Hosting could be your answer. Similar to the idea of Github, it allows you to host projects (up to 2 GB) for free, and uses subversion, issue tracking, project wikis, and the ability to star projects and developers.

I noticed quite a few WordPress projects tagged, such as Carrington, Thematic, and NextGen Gallery.

Google Summer of Code

While not really an extension or tool, Google has a very cool program for students called the Google Summer of Code. WordPress has participated since 2007, and a lot of great developments have come from it. You can check out all of the awesome WordPress stuff from the 2010 GSoC and learn how to apply on the codex.

You can also view the participants for the upcoming GSoC 2011.

Wrapping it up

It’s pretty clear that there are a plethora of tools that Google has that can assist us in our WordPress projects. Which of these do you use? Or maybe I should ask which ones don’t you use? Also, let me know of any I missed, which I’m sure there are many.

I hope you enjoyed the list, and be sure to bookmark this post to refer back to it for your future projects.

25 thoughts on “Beginner’s Guide: How to utilize Google resources in WordPress

  1. That custom code to register Google’s jQuery won’t work, because it fails to account for setting the jQuery noconflict mode.

    Use the plugin. It does things properly.

    • Hey Otto,

      edit: If I had read your comment properly, I would’ve not brought up something different than you mentioned : ) I had not thought of no-conflict mode problems. I believe I settled that in my .js file for my implementation. Nevertheless, I did anticipate some people may take issue with the unversioning aspect, which others can read more about at the WPTavern forum

      I’m obviousy no jQuery guru : ) Anyway, sorry for bringing up what you didn’t mention.

      I’ve used jQuery from Google before and done it this way to unversion without a plugin:

      function slider_scripts_register() {
      
          if ( !is_admin() ) {
      
      		wp_deregister_script( 'jquery' );
      		wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js', false, '1.4.2', true );
      
      		wp_deregister_script( 'jquery-ui-core' );
      		wp_register_script( 'jquery-ui-core', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js', array( 'jquery' ), '1.8.2', true ); 
      
          }
      }
      
      
      function google_scripts_unversion( $src ) {
      
      	if( strpos($src, 'ajax.googleapis.com' ) )
      		$src = remove_query_arg( 'ver', $src );
      
          return $src;
      }

      And then included the functions w/ action and filter hooks into my custom plugin function:

      	slider_scripts_register();
      	add_filter( 'script_loader_src', 'google_scripts_unversion' );

      which I did w/ the help of Rarst, and it works fine.

      I guess I shouldn’t have been generic in the post. I’ll consider either editing it or taking it out. Thanks for chiming in.

  2. Another great article Brian. I use many of the Google services listed above, but just had an epiphany regarding using Google Custom Search (paid version) for a network of sites for a certain client. We’ve been using the wpSearchMu plugin for several years and getting the results we want has been a chore.

    We’re about to start a redev of the site so it would be good timing:)

  3. Hi all…
    Personally i wouldn’t knock anybody for varying degrees of genuine enthusiasm in gathering knowledge and sharing to others appreciative to learn and or become enlightened… Funny thing is: i’ve just landed here via reading counter phrases between Sufyan and Brian,, partly relevant info to myself having only last night managed to use Google Fonts Libraries! (Ace!)
    Anyhow, i felt a need to post here… noticing your correspondence with Greatness! I being novice in such matters..yet, am able to acknowledge mr Otto… for his impressive correct structuring around the net.. as far as i can make out! Then to cream it all… the bloke who what! Created: ‘use-google-libraries’ Geniuses… Anyhow again,, I’d be interested to learn if yourselves as web professionals are into ‘Buckethead’ ? The reason i inquire firstly, is awesomeness.. and that i became aware via another software brilliance: LoRd MuldeR… http://mulder.brhack.net/ (trying my part to sharing) Thank you… majicmike…(‘ ‘,)

  4. Sorry..
    Forgot to post my efforts using Google Web Fonts API…

    http://www.iOccupy.co.uk/

    PS: Happened by chance just the other day… Intel UK on facebook freely uploading/ using any picture.. creating any link… personalizing QR-Codes with pictures for people… pretty neat i thought! https://www.facebook.com/IntelUK?sk=app_203388046382991 not shure this link will work here! [Intel UK - i'm visibly smart] is what you’d be looking for… all the best… bye for now…

  5. The Use Google Libraries plugin fixed WordPress menus (and other problems) that were crippling my blog. I couldn’t move items in the menus or toggle between Visual and HTML editor modes. Nice run down of some powerful Google tools, Brian.

Leave a Reply

Please note that WPCandy is a moderated community.

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>