fbpx

WP Media Folder Addon: Google Drive Integration

1. Create a Google Drive App


The Google Drive integration with WP Media Folder is included in the Add-on. You need to install this add-on (plugin) in addition to WP Media Folder. The addon includes integration for Google Photo, Dropbox, OneDrive Personal, OneDrive Business and Amazon S3 too.

First, to use Google Drive you need a Google dev App to connect your website. Go to https://console.developers.google.com/project and create a new project.

 

image79

 

Then setup a project name - you can provide any name you want, but do not include spaces or accents.

 

image31


Then wait few seconds for the project creation.

 

image62

 

If it's the first time you're using the Google Drive API, you'll need to activate it.

 

enable-drive-api

 

From the left menu, click on “API Manager.”

 

menu-api-service


From the left menu, navigate to “Credentials”, on the main panel click “+ New Credentials” >> OAuth client ID; if asked, add a name to your OAuth consent screen.

 

oAuth-google-drive


Now, the most important step:

  • Select “Web application” and add a name of your choice
  • Authorized JavaScript origin: https://your-domain.com (replace by your domain name, with no trailing slash)
  • Authorized redirect URIs: https://your-domain.com/wp-admin/options-general.php?page=option-folder&task=wpmf&function=wpmf_authenticated 
    (replace by your domain name)

 

app-credentials

 

Note: if this warning appears: "To create an OAuth client ID, you must first set a product name on the consent screen" you should click on Configure consent screen button or go to APIs & Services >> OAuth consent screen, then add your domain name at Authorized domains.

First, you need to select User Type.

 

OAuth-user-type

 

  • Internal: your app is limited to G Suite users within your organization.
  • External: your app will available to any user with a Google account.

Then, fill your authorized domains. Now you can back to the previous step: Select “Web application” to create the credentials.

 

consent-screen

 

Then… voilà! You got your ID and Secret to add in WP Media Folder's configuration.

 

oauth-client

 

2. Login to Google Drive in WP Media Folder


Then go back in WordPress admin and click on the menu Settings > WP Media Folder > Cloud > Google Drive tab.

From now, you can use not only your own Drive, but also Shared drives, please choose it first.

  • My drive: your personal account
  • Shared drives: your G Suite account 

 

drive-type

 

Then select your Media link type:

  • Public link: generate a public accessible link for your files and affect the appropriate rights on the cloud files (Shared link)
  • Private link: AJAX link, hide the cloud link to keep the original access right of your file (Users need a login to view the images)

 

media-link-type

 

After that, you can paste your

  • Client ID
  • Client secret

Save the configuration and click on the Connect Google Drive button.

 

google-login

 

If you haven’t made any mistake you should validate the authorization in a new window as shown:

 

google-api-permission

 
The connection should be a success ☺ If it is successful, you can create and manage Google Drive media right from WordPress' media manager.

 

3. What can I do with Google Drive media?

How does it works? 

WP Media Folder will generate a root folder on your Google Drive with the site name.

 

google-drive-folder


All the folders and sub-folders added in WP Media Folder Google Drive will be synchronized under this folder (WP Media Folder - {sitename}). And vice versa, all your media from that root folder on Google Drive will be synchronized to your Media library on Wordpress.

 

What are the sync directions?

It works in both directions! You can add a file from Google Drive and see it in WP Media Folder, or add a file in WP Media Folder and see it in Google Drive. It also means you can manage WordPress files from your desktop using Google Drive sync software. That’s crazy - we know! ☺

 

google-drive-sync

 

The WP Media Folder Google Drive integration allows you 2 types of actions with your media:

The first option is to import the Google Drive media in WP Media Folder (folder selection for import).

 

import-media-google-drive

 

The second option is to embed the Google Drive media in your content directly. In this case, the media will be loaded from Google Drive, not from your server.

 

embed-google-drive

 

Get rid of the error: error: "invalid_scope when connecting WP Media Folder with Google Drive"

Google has recently introduced a new security layer that forces apps to be verified.  If you've created the app with your Google account and then you log in from WordPress with the very same account you won't see this error.
This error will only appear if you've created an App with a Google account and trying to connect to Google from WordPress with another account.

In this case, you need your app to get approved by Google following this process: https://support.google.com/code/contact/oauth_app_verification

 

OAuth-Developer-Verification-Form