Google has deprecated the Picasa API with effect from January 2019. This means that your Photonic galleries using Picasa as a source will no longer work. Please switch them over to Google Photos.
Using Photonic with simple parameters the gallery short-code / block can now be used to display albums and photos from Google Photos:
The main switch for Google Photos is the
type parameter. You also need to have a
view specified as well:
[gallery type='google' view='abc']
You can also control various skinning aspects of how the thumbnails are displayed.
Steps to Make Google Photos Work (🔗)
The following high-level steps are required to get Google Photos working on your site:
- Obtain a Client ID
In an ideal world this wouldn’t be required. However, Google enforces a 10,000 call cap on Google Photos API calls associated with each API key. Given Photonic’s popularity it is conceivable that more than 500 people use Photonic for Google Photos alone. If each person’s pages get visited around 20 times each day, across all users Photonic will quickly hit the daily cap of 10,000 requests. This makes it impractical for me to bundle my client id in the plugin, as people will start seeing errors on pages once the cap is hit.
I am working with Google to get a higher threshold for Photonic. In the meanwhile, nebulous though this is, you can get a client id using the following steps:
This is a must for Google Photos as unauthenticated calls are not supported
- Start creating your galleries
Creating a Google Project (🔗)
If you do not have a Google API project set up in the API Manager, follow these steps:
- When you log into the API Manager, your screen should look similar to this:
If you already have a listing of projects at the top, proceed to create a client ID. If not, read on.
- Start off by clicking on the project selection link:
- Now, click on the “+” icon:
- On the resultant screen fill out a project name and click “Create”
That’s it. Your project will now appear in the project selection dropdown.
Creating a Client ID (🔗)
The Client ID is mandatory for Google. To get one:
- Go to the API Manager. You will see a screen like this:
- Note that the above screen will show up if you have an API Project already. If you don’t, you can create one as per the previous section.
- Now you need to get your client ID. For this, click on the “Create Credentials” button, and select “OAuth client ID”:
- In the resultant screen, pick the option for “Web application”, give it a “Name”, then fill out the “Authorised Redirect URIs”. You can get the Redirect URIs for your site from Photonic → Settings → Google Photos → Google Photos Settings → Google Client ID. You first put in one, hit enter, then put in the next and hit enter again.
- Once you are satisfied with your app, click “Create”. Google immediately gives you the credentials:
- Copy the information from the above to Photonic → Settings → Google Photos → Google Photos Settings → Google Client ID and Photonic → Settings → Google Photos → Google Photos Settings → Google Client Secret.
Enabling the Client ID for Google Photos (🔗)
Once you have obtained the Client ID you have to follow these steps to make sure that you are able to use it with Google Photos.
- First, make sure that the “Redirect URIs” listed under Photonic → Settings → Google Photos → Google Photos Settings → Google Client ID are present in your API Key settings in Google’s API Console. Instructions are provided above.
- Navigate to the Dashboard of your API Manager and select your API project. If you don’t have a project, the instructions are provided above. You should see something like this:
- Do you see “Photos Library API” listed in the lower section above? If not, click on the link up top that says “+ ENABLE APIS AND SERVICES”. You should see something like this come up:
- In the search box above type in “photos”. The “Photos Library API” will now show up. Click on it:
- You will be taken to a page with details about the API. Click on the link to enable it:
- The API will be added and you will be taken to a page with statistics for it. You can go back to the “Dashboard” now:
- Your dashboard will show the new API now available. Your Client ID is ready for use!
To set up authentication you will need to do the following:
- The first step requires you to set the Google Client ID and Google Client Secret at Photonic → Settings → Google Photos → Google Photos Settings.
- Next, head over to Photonic → Authentication → Google Photos, then start the authentication:
- You will be taken to a screen on Google that will ask you to authorize an account. Pick the account associated with your photos:
Occasionally you are shown a warning screen at this point:
Once you click on “Advanced” you are given an option to proceed, which you can choose:
- You will be shown what permissions are requested by your API key. Note that for Picasa authentication only the first one is shown. Google Photos requires the two additional ones. You can allow access to the apps:
- You will be taken back to Photonic’s Authentication screen, where you can now obtain the “Refresh Token”:
- Clicking on “Obtain Token” will show you the token, which you can now “Save”:
With that your authentication is complete. Your setup is now good for use!
Authentication Workaround (🔗)
In some cases certain other plugins can cause conflicts with Photonic’s authentication. Typically such errors are caused by security plugins:
- Error code 401:
- Error code 403, typically caused by some security plugins that disable accessing wp-admin/admin.php from external sources. Such errors show up as:
- Error code 412:
- Error code 406, or Apache
mod_securityerrors, such as this:
These are beyond the control of Photonic to fix, as different web-hosting configurations and security plugins have different generic controls in place and often capture false positives. To get around such conflicts there is a workaround that you can follow:
- In step 4 to create a client ID, add an additional “Authorised Redirect URI”:
- Now go to the Google OAuth2 Playground. This is a site hosted by Google to help you do your validations. Click on the Settings icon:
- Select the option to “Use your own OAuth credentials”, and provide the “OAuth Client ID” and “OAuth Client secret” that you obtained in the step to create a client ID. Click “Close” once you are done:
- On the left, under the section that says “Select & authorize APIs”, you will see a box that says “Input your own scopes”. Put in
https://www.googleapis.com/auth/photoslibrary.readonly https://www.googleapis.com/auth/photoslibrary.sharing. Note that there are two URLs, separated by a space. Click “Authorize APIs”.
- You will be taken to the account selection screen, as you would see in the regular step 3 of the authentication flow. You can ignore any warnings that show up (since you will be authorizing your own API key to access your own pages).
- You will then be brought back to the OAuth 2.0 Playground. You will see and authorization code and an option to “Exchange authorization code for tokens”. Click on it:
- You will finally see Google provide you with a “Refresh token” and an “Access token”. Copy the “Refresh token”:
- Go to Photonic → Settings → Google Photos → Google Photos Settings → Refresh Token (for Back-end / Server-side Authentication) and paste what you copied, then “Save”: