Dec 182014
 

Display Picasa Private Photos Using Photonic post shows you how to set up Photonic to display private Picasa photos on your website or blog.

Last Updated: January 19, 2017

Please remember before you read this tutorial make sure you are familiar with Photonic setup and you know how to add a shortcode to your post or page. If you are in doubt read Add a Slideshow to Suffusion Theme Using Photonic from the menu below.

You might have some photos that are private and only those with permission are the only ones allowed to view them. This set up will show you step by step how you get your Google ID and how to set up Photonic to display the login button on your post or page.

Important: If you are reading this tutorial is because you have a Google account.

Display Picasa Private Photos Using Photonic Steps

Step 1 ) Log into your websites and go to Photonic -> Settings -> Picasa -> Picasa settings to set up the following options.

  • First click on API Console link and go to Step 2
  • Enter you new Google Client ID created from the previous step
  • Enter your Google Client Secret code
  • Enable Private Photos

(Remember = You will come back here once you complete your new Google Client ID in Step 4 below.)

photonic-picasa-private-settings

Step 2 ) The following image shows you the Google Play Developer Console login screen after you clicked on the API Console link above.

Note: This area is different to your normal Google login account.

photonic-picasa-private-project-id-sign-in

Step 3 ) The following image shows you where you have to click to view and set up the following. This menu is found on the top right hand side of the browser.

  • Click on All projects to view the menu
  • Then click on Create a project

display-picasa-private-photos-using-photonic-create-project

Once you select to create a new project you will see a popup menu with the following fields.

  • Project name = enter a project name
  • The project id will be reveal = you can change this if you like (Changing ID is optional)
  • You have the option to select the App Engine region (This is optional)
  • Click on Create button when you finish selecting your options.

Credentials And OAuth Consent

Step 4 ) In the following image you click on Credentials and then OAuth consent screen.

photonic-picasa-private-project-credentials-new

After you click on the above links you will see the following fields to fill out.

  • Email address
  • Product name shown to users
  • Homepage URL (Optional)
  • Product logo URL (Optional = Max size: 120×120 px)
  • Privacy policy URL (Optional)
  • Terms of service URL (Optional)

Once you finish completing the above then go to Credentials and select OAuth client ID. See image below.
photonic-picasa-private-project-credentials-oauth

Step 5 ) The following image allows you to set up the following options.

  • Application type = Select Web application
  • Name you can enter a name for your authentication set up
  • Authorized JavaScript Origins you can leave this empty
  • Authorized redirect URIs = enter here your website URL
  • Click on Create button

photonic-picasa-private-project-name-web-application

Step 6 ) Once you have completed the steps above, you will receive your new Google Client ID and Google Client Secret code.

Go back to Step 1 above to learn where you have to enter these credentials.

Step 7 ) The following image shows you the Login button on your website or blog.

photonic-picasa-private-project-id-web-application-login

Step 8 ) The following image is what the person who clicks on the Login button above see. This will ask them to accept Google terms and conditions before viewing the private photos.

photonic-picasa-private-project-id-accept-terms

If you followed all the steps correctly above then Picasa private photos should be displayed on your website or blog.

Click on the following URL Troubleshooting.

I will be updating this tutorial from time to time. So keep coming back for the latest update.

If you have any question please let me know.

Enjoy.

Go Back To Photonic Plugin Tutorial List:

Manuel Ballesta RuizManuel Ballesta Ruiz is a web developer, Blogger and WordPress Enthusiast.

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)