Google Drive integration
Last updated
Last updated
Integrating FileBird with Google Drive enhances its functionality by allowing users to access, sync, and manage files stored on Google Drive directly from the WordPress dashboard. This integration streamlines media management, making it easier to handle both local and cloud-stored files within a single interface.
One-Way Direction: The syncing process only updates your WordPress media library with changes from Google Drive. Any changes made directly in WordPress, such as adding or deleting files, will not affect Google Drive. This ensures that Google Drive remains the master copy, with WordPress acting as a reflection of its current state.
Folder Structure Preservation: When you import folders from Google Drive into FileBird, the entire folder structure is preserved, making it easy to maintain organization.
What Happens When You Sync:
Additions: Any new files or folders added to Google Drive since the last sync will appear in your WordPress media library.
Deletions: Importantly, if files or folders are deleted from Google Drive, they will not be automatically removed from the WordPress media library after the last sync. You must manually remove these items from WordPress if they are no longer needed.
Updates: Any updates or changes made to existing files in Google Drive (such as renaming) will not be reflected in the WordPress media library after the next syncing.
To begin, open the web browser and navigate to https://console.cloud.google.com/cloud-resource-manager.
Then, log in with your Google Account and click on the Create Project button at the top of the page.
Fill in the required details, including the Project Name where you’ll enter a name for your project, and the Location where you’ll choose an organization or location, if applicable.
When finished, hit the Create button.
You’ll receive a notification announcing the successful creation of your project. Once you see this, click the Select Project to start working with your new project.
Click Go to APIs overview to proceed to the next step in setting up your project.
Then, click ENABLE APIS AND SERVICES.
Here, type "Google Drive API" in the search bar and press Enter.
Waiting for the results to appear, select Google Drive API from the search results list.
After choosing it, click the ENABLE button to activate the Google Drive API for your project.
Open the Credentials tab (1) > Click CREATE CREDENTIALS (2) > Choose OAuth client ID (3)
Click CONFIGURE CONSENT SCREEN to continue.
Choose External for the user type and click the CREATE button.
Now, you'll need to fill in several details for the OAuth consent screen.
App information:
App name: The name of your application.
User support email: An email address where users can reach out for support.
Authorized domains:
Click ADD DOMAIN and enter your domain name.
Developer contact information:
Enter an email address where users and Google can contact you regarding the app.
Once you've filled in these details, your OAuth consent screen will be set up and you can proceed to create by clicking SAVE AND CONTINUE.
Let’s move on to the Scopes step, here you simply need to click the SAVE AND CONTINUE button.
At Test users, you'll need to add users who will be able to test your application before it is fully published by following these steps:
Click ADD USERS (1) > Enter your email address (2) > Click ADD button (3)
If you successfully add users, you will see your email address in the User Information section. This confirms that the email addresses you added have been correctly configured for testing purposes.
Don't forget to save by hitting the SAVE AND CONTINUE button.
The final step is here. In the Summary, you just need to check and review all the details you've entered for the OAuth consent screen, including app information, scopes, and test users.
Click BACK TO DASHBOARD to complete the setup.
Open the Credentials tab (1) > Click CREATE CREDENTIALS (2) > Choose OAuth client ID (3)
Back to your site. Make sure you’ve downloaded and installed the FileBird Cloud plugin, go to FileBird > Cloud.
Choose the Google Drive tab, then copy the JavaScript origins and Redirect URIs.
Return to Google Cloud Console. In the Credentials tab (1), from the Application type dropdown menu, select Web application (2).
Under the Authorized JavaScript origins section, click ADD URI. Paste the JavaScript origin URL you copied from FileBird Cloud into the field. (3)
Similarly, at Authorized Redirect URIs, click ADD URI and paste your redirect URIs. (4)
Your OAuth client has been successfully created.
Copy the Client ID and Client Secret from Google Cloud Console and paste them into your FileBird Cloud settings.
In your wp-admin panel, paste the Client ID into the Google Client ID field and the Client Secret into the Google Client Secret field, respectively.
Click Save Changes.
Once you have completed the above steps, the Connect button will appear. Simply click on it to connect your Google Drive with FileBird Cloud.
Choose your email address, the one you entered in the Google Cloud Console.
Here, click Continue to proceed.
After that, the page will redirect you back to FileBird Cloud. It's almost done, you’re now connected to Google Drive.
Please go to https://drive.google.com/ and log in to your account to check the folder.
When the connection is successful, your folder will appear in Google Drive with the following syntax: Name (the name you gave the app) - your site.
Now, let's create some child folders and upload images into them. 🙌
Return to the FileBird Cloud panel again. Click the Resynchronize button to synchronize your folders and images from Google Drive to the FileBird folder tree.
Ta-da! 🎉🎉🎉
You've successfully connected to Google Drive and synchronized your folders and images with FileBird Cloud.
This is the result.
Your Google Drive folder now appears in the FileBird folder tree, and you can manage your files seamlessly using bulk select and drag-and-drop features.
This integration is ideal for users who regularly work with large amounts of media and require a seamless connection between their WordPress site and Google Drive, ensuring that media files are always up to date without manual uploads or downloads.
Happy Cloud-ing ☁️
