Google+ Search Widget

Highly customizable search widget for Google+ that is inspired by Twitter widgets. This widget searches across the body and comments of public posts and displays a summarized version of matching posts with any attached images.

This is my second take on Google+ API, last month I created a profile widget for Google+ users. Google+ API was released a month ago, and in couple weeks later they added search support too. If you are starting to develop with Google+, you may check these API tips.

Demo 3 | Demo 2 | Demo 1

Setup

<!-- Include javascript and CSS once -->
<link href="http://googleplus-search-widget.googlecode.com/svn/v1/light.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://googleplus-search-widget.googlecode.com/files/jquery.googleplus-search-1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
jQuery.fn.googlePlusSearch.defaults.api_key = 'Your_KEY';
//]]>
</script>

<!-- Insert widget placeholder -->
<div class="google-plus-search" data-options="{
    query: 'Tech Tips'
    , show_header: 1
    , header_title: 'Search for Tech Tips' }">
   <a class="gpsw-info" href="http://www.moretechtips.net" target="_blank">Google+ Search Widget</a>
</div>
 

1. Include light-color CSS file.
Or use the dark one by using this URL instead "http://googleplus-search-widget.googlecode.com/svn/v1/dark.css"

2. Include jQuery library.
If it is already added to the page, then you don't need to do it again!
Plugin was tested with jQuery v1.2.6, v1.3.2, v1.4.2 and v1.6.2

3. Include this jQuery plugin.

4. Use your API key
You should use your own key to avoid being blocked by Google+ API due to rate limits.
Just set your API key right after including the javascript files as in the above code.

 How to get a Google+ API key
- Go to https://code.google.com/apis/console#access.
- Login and click "Create Project".
- Under service list, click "off" button next to "Google+ API" to turn it on.
- Accept the agreement.
- From the left menu, Go to "API Access" and copy your API key.

5. Insert placeholder div
In your page where the widget should appear. Note that, you need to set the class name of div tag as "google-plus-search" to have the widget loaded automatically.
Set widget options as a list of comma-delimited values and surrounded by braces. Only "query" option is mandatory, to set the search query.

Alternative Setup

a. Place options in HTML comment. [ Demo 2 ]
<div class="google-plus-search">
   <!-- {
    query: 'Web development'
    , show_header:1
    , header_title: 'Search for Web Development'
    , show_image:0 }
   -->
   <a class="gpsw-info" href="http://www.moretechtips.net" target="_blank">Google+ Search Widget</a>
</div>
Note that "show_image" is set to 0 to disable attached images display.

b. Or Load widget by a jQuery plugin call and pass options array as the first parameter. [ Demo 3 ]
<!-- Custom Header style -->
<style type="text/css">
a.custom-header{
   display:block;
   text-decoration:none;
   border-top:#eee 1px solid;
   border-bottom: 1px solid #E5E5E5;
   background:#f5f5f5 url(gp-bg.jpg) no-repeat;
   padding:10px 10px 10px 50px;
   overflow:hidden;
   color:#000;
   font-size:130%;
   font-weight:bold;
}
a.custom-header:hover{
   color:#666;
}</style>

<!-- Include javascript and CSS once -->
<link href="http://googleplus-search-widget.googlecode.com/svn/v1/light.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.googleplus-search-1.0.js" type="text/javascript"></script>
<script type="text/javascript">//<![CDATA[
   jQuery(document).ready(function($) {
      $('#gpsw').googlePlusSearch({
         api_key : 'your_KEY'
         ,query:'Social Media Widgets'
         ,image_width:100
         ,image_height:75
         ,body_height:320
      });
   });
//]]>
</script>

<!-- Insert widget placeholder with custom header -->
<div id="gpsw">
   <a class="custom-header" href="http://www.moretechtips.net">
      Searching for Social Media Widgets
   </a>

   <a class="gpsw-info" href="http://www.moretechtips.net" target="_blank">Google+ Search Widget</a>
</div>
Note that, options in previous code change the dimensions of attached images and the height of posts wrapper.

Features:

1. Search query supports some operators that you can use in usual Google search like "minus" for negation or searching for exact words by enclosing it in double quotes.

2. Widget slides down matched posts with any attached images. You can also disable animation to have a fixed list instead.
3. You can set header title and image, or create your custom header.

4. Widget comes with 2 CSS schemes, a light color scheme and a dark one too. however, you can create custom styles starting from those CSS files.

5. Widget uses partial responses of Google+ API to optimize API queries.

6. You can place widget options in HTML5 data attribute. You can place it in HTML comment so it would not break HTML validation of your page.

7. Since this is a Javascript-only solution, you can add this widget anywhere you can embed Javascript like Google Blogger or Wordpress.
8. Use a jQuery plugin call or auto-load any number of div elements with class name "google-plus-search".

Project | Plugin Options | Download plugin JS| Demo 1 | Demo 2 | Demo 3

Tags: Google Plus , javascript , jQuery , jQuery Plugin , Social Media