Dec 2, 2015

Google Feed API deprecation replacement scripts

So I was completely out of the loop on the Google Feed API being terminated.

Today has been all about writing a quick replacement, and implementing it on a dozen+ websites. The scripts below were written to replace the API for three examples: a Blogger JSON feed, a JSON feed from a Google Drive spreadsheet, and a JSON feed from Picasa. In the spreadsheet examples the field names are generated by the first row in the spreadsheet.

Enjoy, and I hope this helps!

// blogger feed example
// : title, url, date, media thumbnail
var url = 'http://www.confluentforms.com/feeds/posts/default?alt=json';
$.getJSON(
  url + '&callback=?').
  done(function(data){
    $.each(
      data.feed.entry || [],
      function(i, e){
var title = (e.title.$t || '');
var url = (e.link || []).pop().href;
var date = new Date(e.updated.$t || Date.now());
var thumbnail = (e.media$thumbnail.url || '');
// do your stuff here
      });
  }).
  fail(function(){
    // handle failure here
  });


// google spreadsheet example
// : location, photo, logo, url, title, showcase, number, category
var url2 = 'https://spreadsheets.google.com/feeds/list/0AuaRGq3RzJsadFdMUHhPNC1WQ3hrNkdTaGYzbzZLTWc/od6/public/basic?alt=json';
$.getJSON(
  url2 + '&callback=?').
  done(function(data){
    $.each(
      data.feed.entry || [],
      function(i, e){
var entry = {};
$.each(
 e.content.$t.split(','),
 function(i, x){
   var s = x.split(':');
   var key = s.shift().trim();
   entry[key] = s.join(':').trim();
 });

// do stuff here, entry has column headers as keys

      });
  }).
  fail(function(){
    // handle failure here
  });


// picasa feed example
var slides = new Array();
var captions = new Array();
var url3 = 'http://picasaweb.google.com/data/feed/api/user/106704368739672674589/albumid/6184901565410700577?kind=photo&imgmax=800&alt=json';
$.getJSON(
  url3 + '&callback=?').
  done(function(data){
    $.each(
      data.feed.entry || [],
      function(i, e){
var entry = {};
$.each(
slides[i] = entry.content.src;
captions[i] = entry.summary.$t;
 );

      });
  }).
  fail(function(){
    // handle failure here
  });


The following is an example feed grab that you can place into a HTML widget

<ul id='newsandevents'></ul><br /><div style='display: block; clear: both;'><a href="/search/label/news%2Bevents?max-results=100" class="morenews">more news & events</a></div><script type='text/javascript'>//<![CDATA[
var imageReg = /s\B\d{2,3}-c/;
$(document).ready(function(){
var slideContainer = $('#newsandevents');
var url = 'http://www.pinchgallery.com/feeds/posts/default?alt=json';
$.getJSON(
 url + '&callback=?').
 done(function(data){
$.each(
 data.feed.entry || [],
 function(i, e){
if(i<3){
var title = (e.title.$t || '');
var content = (e.content.$t || '');
var url = (e.link || []).pop().href;
var date = new Date(e.updated.$t || Date.now());
date = (new Date(date)).toLocaleDateString(
'en-us',{
month: 'long',
day: 'numeric',
year: 'numeric'
}
);
var thumbnail = (e.media$thumbnail.url || '');
var thumbnail = thumbnail.replace(imageReg,'s80-c');
var slideEntry = document.createElement("li");
var slideContent = "<a href='" + url + "' class='newstitle'><img src='" + thumbnail + "' style='float: left; padding-right: 10px; padding-bottom: 5px;'/>" + title + "</a>";
slideEntry.innerHTML=slideContent;
slideContainer.append(slideEntry);
}

 });
 }).
 fail(function(){
// handle failure here
 });

});
//]]></script>

Mar 7, 2015

JS/CSS animated hamburger menu for responsive websites

In working on a website I ended up developing this toggle animation for the traditional "hamburger" menu that most sites use to open/close the navigation system in a responsive website design.

The code uses pure CSS to create the three horizontal lines, then on click of the toggle, creates an animation transformation to change the three bars to an X closure.

Pure Javascript/CSS with a JQuery simply for the toggle, but not necessary.

Code found here.

Demo here.






Aug 13, 2014

Using a Google Drive Spreadsheet as a database for Blogger

One of the "limitations" to Blogger is that you don't have access to a database to create fields for populating content. In previous posts we've showed you how to create a form using Google Drive and to incorporate it into your Blogger website; in this tutorial we're going to show you how you can also use that same content, stored in the Google Drive Spreadsheet, to populate your site with the content, as well as content from any other Google Drive Spreadsheet.

This tutorial uses JQuery as the Javascript library, as well as JSON as the format to pull in the content. While the example only shows it in a simple list format, there are many different ways you can use this data and functionality, such as building an interactive rolodex for example.

Jan 2, 2014

Getting your Blogger site to have Twitter Summary Cards

Twitter cards are a newish functionality that make it possible for you to attach media experiences to Tweets that link to your content. With a few added lines of HTML to your Blogger template, users who Tweet links to your content will have a "card" added to the Tweet that’s visible to all of their followers.

You might have read one of our recent posts regarding creating Rich Pins for Pinterest on your Blogger blog; the process for Twitter cards is very, very similar.