How to get Google Calendar events in the search results

Have you ever seen those event listings in the search results and wondered how you can get them? Do you organize events, either online or offline that you want to give extra exposure? Do you want to get more clicks, more visitors, more business by easily promoting your events?

Take a look at what we were able to do for our LocalSpark client Urban Air Trampoline Park. When you search for events in their city, their events show up in the search results:

Their event listings also show up on branded search terms:

Want to know how I did it? Read on for step-by-step instructions.

FREE implementation: Google to the rescue!

Depending on the platform you’re using there are a number of solutions. In case you’re using WordPress there are many plugins (both free and paid) to choose from, in order to get events in the search results. In most cases, you’ll have to pay for solutions which connect to Google Calendar.

How about a FREE solution, using Google’s own platform to generate the required code to import in your website to show the events from one or more Google Calendars?

To get Google Calendar events in the search results, follow these steps:

1. Create (or assign) a Google Calendar, dedicated to your online events list.
2. Open Google Script Editor and copy/paste the code from the bottom of this blog post.
3. Run the Google Apps Script and grant the required privileges
4. Get the public URL of your Calendar Script
5. Import the content from the URL from the desired page(s) of your site and output it at the right place in the PHP code of the template within your CMS

Check out the video below to see how you can accomplish this for yourself, or follow the instructions underneath the video (HINT: watch the video fullscreen to see more detail):

This might sound more difficult than it actually is. Don’t worry, let me take you through the steps, one step at a time.

Prerequisite: From here on, you need a Google account…

Step 1: Create a dedicated Google Calendar

Steps to create a new Google Calendar:

1. Login to your Google account and go to https://calendar.google.com
2. Click the little triangle next to “My calendars” in the left sidebar
3. Click “Create new calendar”
4. Give the calendar a name, set the correct location and timezone
5. Click “Create calendar” button at the bottom when done
6. Add one or more (dummy) events to the calendar so you’re able to test it

Step 2: Create and modify the script

To copy the script, surf to https://script.google.com and perform these steps:

1. Assign a name to your project
2. Select and remove all code
3. Copy the Calendar Events Google Apps Script (below) to the clipboard and paste it in the editor
4. Get the calendar ID (see below) and paste it in place of the ‘#####’ (5 hash tags / pound signs)

To get the Calendar ID or ID’s, do the following:

1. In Google Calendar, click the wheel on the right and select “Settings”
2. Click on the top menu on “Calendars”
3. Select the calendar you just created
4. Copy the ID to the clipboard

Step 3: Grant the required privileges to the script

Your script can not be used, until you:

1. Save the script by clicking on the little disk
2. Select “doGet” in the “Select Function” dropdown box
3. Click the “Play”-button
4. Select “Continue” in the popup window, titled “Authorization required”
5. When the next window pops up, asking to “Manage your calendars”, click “Allow”

Congratulations, you’re almost there…

Step 4: Get the public URL of the script

Once you’ve granted the correct authorization and made sure the script doesn’t return an error, follow these steps:

1. Click “Publish” and select “Deploy as web app”
2. Give an initial description
3. Leave your Google ID under “Execute the app as:”
4. Under “Who has access to the app:”, select “Anyone, even anonymous”
5. Click on “Deploy”

You’re then shown a window with the “Current web app URL”. Copy it to the clipboard and paste it in a new browser window. If you’ve performed all steps correctly, you’ll see the events code, which you can embed in the source of your PHP template(s).

Step 5: Get the events in your PHP code

In order to get the events embedded in the source code of your HTML-code, you’ll most likely need to modify the PHP template(s) of your CMS.

Since WordPress is the most widely used CMS, I only focus on WordPress from here on. But for any PHP-based CMS, the solution will be quite comparable..

Once you have the events listed on your screen in the previous step, create a custom field named “eventlisturl” in the page you want to have the events listed in the search results. Copy/paste the URL from your browser into this custom field.

NOTE: Make sure that you DO NOT USE the “Current web app URL” shown in the Google Script Editor, as this will NOT WORK!

Then in the template of your theme, add the following PHP code (typically in footer.php, just before </body>):

if ( ($eventlisturl = get_post_meta( $post->ID, 'eventlisturl', true ) )) {
$eventlistoutput = file_get_contents( $eventlisturl );

$search = array( "$location", "$url" );
$replace = array( get_the_title(), "http://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'] );
$eventlistoutput = str_replace( $search, $replace, $eventlistoutput );
echo $eventlistoutput;
}

This piece of PHP code assumes the following:

• The custom field “eventlisturl” is set to the URL that you see when you view the script in your browser in step 6 above.
• “$location” will be substituted by the HTML title of your page
• “$url” will be set to the URL of the current page, so the event listing will link to the page containing the code

While any location in the code will be fine, I advise to place the code in the footer, just before the closing “</body>” tag.

Further customizations

It is also possible to customize the Location and URL fields by adding a bit of additional content to the event description in Google Calendar:

• Add a line with e.g. “name: Whitespark HQ” (without the quotes) to have the location automatically set to “Whitespark HQ”
• Add a line with ONLY a URL, e.g. “https://whitespark.ca/special-event” (without the quotes, but WITH http://) to link to the actual event page

Google Apps Script for Step 2:

function doGet() {

  var calIds = [ 
    "#####" // ID(s) of 1 or more Google Calendars
  ];

  var total = '';
  for ( var cal = 0; cal < calIds.length; cal++ ) {
    total = total + getEventsJSON( calIds[cal] );
  }

  return ContentService.createTextOutput().append(total);
}


function getEventsJSON( id ) {
  var now = new Date();
  var oneYearFromNow = new Date(now.getTime() + 1000 * 60 * 60 * 24 * 365); // 1 Year in advance

  var output = '<script type="application/ld+json">n';

  var events = CalendarApp.getCalendarById(id).getEvents(now, oneYearFromNow, {search: '*'});

  if ( events.length > 1 ) {
    output += '[';
  }

  Logger.log('Number of events: ' + events.length + ' in calendar "' + id + '"' );

  for (var i=0 ; i < events.length && i < 7 ;i++) {

    output += '{n"@context": "http://schema.org",n"@type": "Event",n';
    
    var title  = events[i].getTitle();

    var starttime = events[i].getStartTime();
    var tz    = CalendarApp.getDefaultCalendar().getTimeZone();
    var start = Utilities.formatDate(starttime, tz, "yyyy-MM-dd HH:mm");

    var endtime = events[i].getEndTime();
    var end = Utilities.formatDate(endtime, tz, "yyyy-MM-dd HH:mm");

    var descr  = events[i].getDescription();
    var sameas = '';
    var name   = '';
    
    if ( (name = descr.match(/name: (.*)/i)) == null ) {
      name = '$location';
    } else {
      descr = descr.replace( name[0], '');
      name = name[1];
    }
    
    if ( (sameas = descr.match(/https?:[^s]+/)) == null ) {
      sameas = '$url';
    } else {
      descr = descr.replace( sameas[0], '');
    }

    // Strip any trailing whitespace
    descr = descr.replace( /[s]+$/g, '');

    var loc    = events[i].getLocation();

    output += '"name": "' + title + '",n';
    output += '"startDate": "' + start + '",n';
    output += '"endDate": "' + end + '",n';
    output += '"location": {n"@type": "Place",n"name": "' + name + '",n"address": "' + loc + '",n"sameAs": "' + sameas + '"n},n';

    output += '"description": "' + descr + '"n';
    output += '}';
   
    if ( events.length > 1 && i < Math.min((events.length-1), 6) ) {
      output += ',n';
    }
  }
  
  if ( events.length > 1 ) {
      output += ']n';
  }
  
  output += '</script>n';

  return output;
}

Conclusion

There you have it. Follow the instructions above to get your events listed in the search results.

I hope this solution is useful for you. If you have any comments or questions, feel free to post them below and I’ll do my best to reply to them.