{"id":3150,"date":"2016-04-18T00:44:14","date_gmt":"2016-04-18T00:44:14","guid":{"rendered":"https:\/\/wpmudev.whitespark.ca\/how-to-get-google-calendar-events-in-the-search-results\/"},"modified":"2024-10-28T16:06:11","modified_gmt":"2024-10-28T22:06:11","slug":"how-to-get-google-calendar-events-in-the-search-results","status":"publish","type":"post","link":"https:\/\/whitespark.ca\/blog\/how-to-get-google-calendar-events-in-the-search-results\/","title":{"rendered":"How to get Google Calendar events in the search results"},"content":{"rendered":"<p><strong>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?<\/strong><\/p>\n<p>Take a look at what we were able to do for our\u00a0LocalSpark client <a title=\"Trampoline Parks in the USA\" href=\"http:\/\/www.urbanairtrampolinepark.com\/\" target=\"_blank\" rel=\"noopener\">Urban Air Trampoline Park<\/a>. When you search for events in their city, their events show up in the search results:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/whitespark.ca\/wp-content\/uploads\/2024\/06\/201604120-overland-park-events-serp.png\" alt=\"Overland Park events SERP\" width=\"1053\" height=\"627\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Their event listings also show up on branded search terms:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/whitespark.ca\/wp-content\/uploads\/2024\/06\/2016-04-18_UrbanAirBrandedSearch.png\" alt=\"\" width=\"1062\" height=\"624\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Want to know how I did it? Read on for step-by-step instructions.<\/p>\n<h2><\/h2>\n<h2>FREE implementation: Google to the rescue!<\/h2>\n<p>Depending on the platform you\u2019re using there are a number of solutions. In case you\u2019re 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\u2019ll have to pay for solutions which connect to Google Calendar.<\/p>\n<p>How about a FREE solution, using Google\u2019s own platform to generate the required code to import in your website to show the events from one or more Google Calendars?<\/p>\n<p>To get Google Calendar events in the search results, follow these steps:<\/p>\n<ol>\n<li>Create (or assign) a Google Calendar, dedicated to your online events list.<\/li>\n<li>Open Google Script Editor and copy\/paste the code from the bottom of this blog post.<\/li>\n<li>Run the Google Apps Script and grant the required privileges<\/li>\n<li>Get the public URL of your Calendar Script<\/li>\n<li>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<\/li>\n<\/ol>\n<p>Check out the video below to see how you can accomplish this for yourself, or follow the instructions underneath the video (HINT: <a title=\"Watch the video fullscreen\" href=\"https:\/\/www.youtube.com\/v\/7XiOXNYZ7wE?hd=1\" target=\"_blank\" rel=\"noopener\">watch the video fullscreen<\/a> to see more detail):<\/p>\n<p><center><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/7XiOXNYZ7wE?rel=0\" width=\"640\" height=\"360\" frameborder=\"0\"><\/iframe><\/center>&nbsp;<\/p>\n<p>This might sound more difficult than it actually is. Don\u2019t worry, let me take you through the steps, one step at a time.<\/p>\n<p>Prerequisite: From here on, you need a Google account&#8230;<\/p>\n<p>&nbsp;<\/p>\n<h2>Step 1: Create a dedicated Google Calendar<\/h2>\n<p>Steps to create a new Google Calendar:<\/p>\n<ol>\n<li>Login to your Google account and go to https:\/\/calendar.google.com<\/li>\n<li>Click the little triangle next to \u201cMy calendars\u201d in the left sidebar<\/li>\n<li>Click \u201cCreate new calendar\u201d<\/li>\n<li>Give the calendar a name, set the correct location and timezone<\/li>\n<li>Click \u201cCreate calendar\u201d button at the bottom when done<\/li>\n<li>Add one or more (dummy) events to the calendar so you\u2019re able to test it<\/li>\n<\/ol>\n<h2><\/h2>\n<h2>Step 2: Create and modify the script<\/h2>\n<p>To copy the script, surf to <a title=\"Google Script Editor\" href=\"https:\/\/script.google.com\/\" target=\"_blank\" rel=\"noopener\">https:\/\/script.google.com<\/a> and perform these steps:<\/p>\n<ol>\n<li>Assign a name to your project<\/li>\n<li>Select and remove all code<\/li>\n<li>Copy the Calendar Events Google Apps Script (below) to the clipboard and paste it in the editor<\/li>\n<li>Get the calendar ID (see below) and paste it in place of the \u2018#####\u2019 (5 hash tags \/ pound signs)<\/li>\n<\/ol>\n<p>To get the Calendar ID or ID\u2019s, do the following:<\/p>\n<ol>\n<li>In Google Calendar, click the wheel on the right and select \u201cSettings\u201d<\/li>\n<li>Click on the top menu on \u201cCalendars\u201d<\/li>\n<li>Select the calendar you just created<\/li>\n<li>Copy the ID to the clipboard<\/li>\n<\/ol>\n<div><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/whitespark.ca\/wp-content\/uploads\/2024\/06\/20160415-get-google-calendar-id.png\" alt=\"Get Google Calendar ID\" width=\"715\" height=\"407\" \/><\/div>\n<h2><\/h2>\n<h2>Step 3: Grant the required privileges to the script<\/h2>\n<p>Your script can not be used, until you:<\/p>\n<ol>\n<li>Save the script by clicking on the little disk<\/li>\n<li>Select \u201cdoGet\u201d in the \u201cSelect Function\u201d dropdown box<\/li>\n<li>Click the \u201cPlay\u201d-button<\/li>\n<li>Select \u201cContinue\u201d in the popup window, titled \u201cAuthorization required\u201d<\/li>\n<li>When the next window pops up, asking to \u201cManage your calendars\u201d, click \u201cAllow\u201d<\/li>\n<\/ol>\n<p>Congratulations, you\u2019re almost there\u2026<\/p>\n<h2><\/h2>\n<h2>Step 4: Get the public URL of the script<\/h2>\n<p>Once you\u2019ve granted the correct authorization and made sure the script doesn\u2019t return an error, follow these steps:<\/p>\n<ol>\n<li>Click \u201cPublish\u201d and select \u201cDeploy as web app\u201d<\/li>\n<li>Give an initial description<\/li>\n<li>Leave your Google ID under \u201cExecute the app as:\u201d<\/li>\n<li>Under \u201cWho has access to the app:\u201d, select \u201cAnyone, even anonymous\u201d<\/li>\n<li>Click on \u201cDeploy\u201d<\/li>\n<\/ol>\n<p>You\u2019re then shown a window with the \u201cCurrent web app URL\u201d. Copy it to the clipboard and paste it in a new browser window. If you\u2019ve performed all steps correctly, you\u2019ll see the events code, which you can embed in the source of your PHP template(s).<\/p>\n<h2><\/h2>\n<h2>Step 5: Get the events in your PHP code<\/h2>\n<p>In order to get the events embedded in the source code of your HTML-code, you\u2019ll most likely need to modify the PHP template(s) of your CMS.<\/p>\n<p>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..<\/p>\n<p>Once you have the events listed on your screen in the previous step, create a custom field named \u201ceventlisturl\u201d 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.<\/p>\n<p><strong>NOTE: Make sure that you DO NOT USE the \u201cCurrent web app URL\u201d shown in the Google Script Editor, as this will NOT WORK!<\/strong><\/p>\n<p>Then in the template of your theme, add the following PHP code (typically in footer.php, just before &lt;\/body&gt;):<\/p>\n<pre>if ( ($eventlisturl = get_post_meta( $post-&gt;ID, 'eventlisturl', true ) )) {\n$eventlistoutput = file_get_contents( $eventlisturl );\n\n$search = array( \"$location\", \"$url\" );\n$replace = array( get_the_title(), \"http:\/\/\" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'] );\n$eventlistoutput = str_replace( $search, $replace, $eventlistoutput );\necho $eventlistoutput;\n}\n<\/pre>\n<p>This piece of PHP code assumes the following:<\/p>\n<ul>\n<li>The custom field \u201ceventlisturl\u201d is set to the URL that you see when you view the script in your browser in step 6 above.<\/li>\n<li>\u201c$location\u201d will be substituted by the HTML title of your page<\/li>\n<li>\u201c$url\u201d will be set to the URL of the current page, so the event listing will link to the page containing the code<\/li>\n<\/ul>\n<p>While any location in the code will be fine, I advise to place the code in the footer, just before the closing \u201c&lt;\/body&gt;\u201d tag.<\/p>\n<h3>Further customizations<\/h3>\n<p>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:<\/p>\n<ul>\n<li>Add a line with e.g. &#8220;name: Whitespark HQ&#8221; (without the quotes) to have the location automatically set to &#8220;Whitespark HQ&#8221;<\/li>\n<li>Add a line with ONLY a URL, e.g. &#8220;https:\/\/whitespark.ca\/special-event&#8221; (without the quotes, but WITH http:\/\/) to link to the actual event page<\/li>\n<\/ul>\n<h2><\/h2>\n<h2>Google Apps Script for Step 2:<\/h2>\n<pre>function doGet() {\n\n  var calIds = [ \n    \"#####\" \/\/ ID(s) of 1 or more Google Calendars\n  ];\n\n  var total = '';\n  for ( var cal = 0; cal &lt; calIds.length; cal++ ) {\n    total = total + getEventsJSON( calIds[cal] );\n  }\n\n  return ContentService.createTextOutput().append(total);\n}\n\n\nfunction getEventsJSON( id ) {\n  var now = new Date();\n  var oneYearFromNow = new Date(now.getTime() + 1000 * 60 * 60 * 24 * 365); \/\/ 1 Year in advance\n\n  var output = '&lt;script type=\"application\/ld+json\"&gt;n';\n\n  var events = CalendarApp.getCalendarById(id).getEvents(now, oneYearFromNow, {search: '*'});\n\n  if ( events.length &gt; 1 ) {\n    output += '[';\n  }\n\n  Logger.log('Number of events: ' + events.length + ' in calendar \"' + id + '\"' );\n\n  for (var i=0 ; i &lt; events.length &amp;&amp; i &lt; 7 ;i++) {\n\n    output += '{n\"@context\": \"http:\/\/schema.org\",n\"@type\": \"Event\",n';\n    \n    var title  = events[i].getTitle();\n\n    var starttime = events[i].getStartTime();\n    var tz    = CalendarApp.getDefaultCalendar().getTimeZone();\n    var start = Utilities.formatDate(starttime, tz, \"yyyy-MM-dd HH:mm\");\n\n    var endtime = events[i].getEndTime();\n    var end = Utilities.formatDate(endtime, tz, \"yyyy-MM-dd HH:mm\");\n\n    var descr  = events[i].getDescription();\n    var sameas = '';\n    var name   = '';\n    \n    if ( (name = descr.match(\/name: (.*)\/i)) == null ) {\n      name = '$location';\n    } else {\n      descr = descr.replace( name[0], '');\n      name = name[1];\n    }\n    \n    if ( (sameas = descr.match(\/https?:[^s]+\/)) == null ) {\n      sameas = '$url';\n    } else {\n      descr = descr.replace( sameas[0], '');\n    }\n\n    \/\/ Strip any trailing whitespace\n    descr = descr.replace( \/[s]+$\/g, '');\n\n    var loc    = events[i].getLocation();\n\n    output += '\"name\": \"' + title + '\",n';\n    output += '\"startDate\": \"' + start + '\",n';\n    output += '\"endDate\": \"' + end + '\",n';\n    output += '\"location\": {n\"@type\": \"Place\",n\"name\": \"' + name + '\",n\"address\": \"' + loc + '\",n\"sameAs\": \"' + sameas + '\"n},n';\n\n    output += '\"description\": \"' + descr + '\"n';\n    output += '}';\n   \n    if ( events.length &gt; 1 &amp;&amp; i &lt; Math.min((events.length-1), 6) ) {\n      output += ',n';\n    }\n  }\n  \n  if ( events.length &gt; 1 ) {\n      output += ']n';\n  }\n  \n  output += '&lt;\/script&gt;n';\n\n  return output;\n}\n<\/pre>\n<h2><\/h2>\n<h2>Conclusion<\/h2>\n<p>There you have it. Follow the instructions above to get your events listed in the search results.<\/p>\n<p>I hope this solution is useful for you. If you have any comments or questions, feel free to post them below and I&#8217;ll do my best to reply to them.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3155,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_seopress_robots_primary_cat":"none","_seopress_titles_title":"","_seopress_titles_desc":"Do you want more exposure, more real estate in the search results? Want to get your events listed by simply adding them to a Google Calendar? Read This!","_seopress_robots_index":"","footnotes":""},"categories":[1],"tags":[],"classification":[],"class_list":["post-3150","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"acf":[],"_links":{"self":[{"href":"https:\/\/whitespark.ca\/wp-json\/wp\/v2\/posts\/3150","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/whitespark.ca\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/whitespark.ca\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/whitespark.ca\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/whitespark.ca\/wp-json\/wp\/v2\/comments?post=3150"}],"version-history":[{"count":2,"href":"https:\/\/whitespark.ca\/wp-json\/wp\/v2\/posts\/3150\/revisions"}],"predecessor-version":[{"id":5121,"href":"https:\/\/whitespark.ca\/wp-json\/wp\/v2\/posts\/3150\/revisions\/5121"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/whitespark.ca\/wp-json\/wp\/v2\/media\/3155"}],"wp:attachment":[{"href":"https:\/\/whitespark.ca\/wp-json\/wp\/v2\/media?parent=3150"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/whitespark.ca\/wp-json\/wp\/v2\/categories?post=3150"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/whitespark.ca\/wp-json\/wp\/v2\/tags?post=3150"},{"taxonomy":"classification","embeddable":true,"href":"https:\/\/whitespark.ca\/wp-json\/wp\/v2\/classification?post=3150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}