User Id, Album ID, and JSON/RSS feed URL of a Google Photos album

While this was easy in PicasaWeb, it's a bit more challenging in Google Photos... if you've found a better way please share them below!

The way we've found that works best is via the JSON view of all of your albums in your account.

Step 1: get your User ID

You can get the ID by going to your Google+ Page, right-click on Profile, and copy that URL. Your User ID is the long numerical string like below (the Xs):

https://plus.google.com/u/0/XXXXXXXXXXXXXXX

another method is by going to https://get.google.com/albumarchive, which will then redirect to https://get.google.com/albumarchive/[User ID] (thanks +Peggy K!


Step 2: create your JSON url for your User ID

This is what the URL needs to look like; replace the XXXXXXX with your own User ID from above.

http://photos.googleapis.com/data/feed/api/user/XXXXXXXXXXXXX?alt=json

This URL will also work:

https://picasaweb.google.com/data/feed/base/user/XXXXXXXXXXXXX/


Step 3: load the JSON feed into a viewer

For example, you can use Code Beautify's JSON Viewer. In the middle there is a box to load an external feed; pop your URL in there and load it up. Once loaded, search for the title in the right side search box. Scroll down to find the highlighted entry, then open up LINK / 0 below it and get the HREF value.

Or if you prefer a needle in a haystack approach, load up the JSON url above in your Chrome browser window, then do a Ctrl-F to find the title of the album you need. Almost immediately following the title you'll see the JSON url for that album like so:

media$title":{"$t":"Keepers 2015","type":"plain"}}},{"id":{"$t":"http://photos.googleapis.com/data/entry/api/user/XXXXXXX/albumid/YYYYYYYY?alt=json"}

(Keepers 2015 is the album title in this case)

or you'll see URLs that look like https://picasaweb.google.com/XXXXXXX/YYYYYYYY

(where XXXXX is the User ID and YYYYYY is the Album ID)

With this information in hand you can now use your JSON feed for all sorts of nify things.

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
  });


If you need help finding your User ID or Album ID for Google Photos please read this.


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>

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.

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.