Google Drive Viewer - WordPress Plugin

Embed Google Drive folders directly into your WordPress site

📋 About

Google Drive Viewer is a completely free WordPress plugin that allows you to display Google Drive folder contents directly on your website. With a dedicated Elementor widget and powerful REST API endpoints, you can seamlessly integrate your Google Drive files into any WordPress page or post.

✨ Key Features

🚀 Installation

Method 1: WordPress Dashboard (Recommended)

1. Go to Plugins → Add New in your WordPress admin
2. Click Upload Plugin
3. Choose the google-drive-viewer.zip file
4. Click Install Now
5. Activate the plugin

Method 2: Manual Installation

# 1. Download the plugin files
# 2. Upload to your WordPress installation
wp-content/plugins/google-drive-viewer/
# 3. Activate from WordPress admin panel

Method 3: Via FTP

1. Extract the plugin ZIP file
2. Upload the google-drive-viewer folder to: /wp-content/plugins/
3. Activate the plugin through the Plugins menu in WordPress

⚙️ Configuration

Step 1: Get Google API Credentials

1. Go to the Google Cloud Console
2. Create a new project or select an existing one
3. Enable the Google Drive API
4. Create credentials → API Key
5. Copy your API key

Step 2: Configure Plugin Settings

1. Navigate to Google Drive Viewer → Settings in your WordPress admin menu
2. Enter the following details:

• Google API Key
  Paste your Google Drive API key

• Default Folder ID (Optional)
  Set a default Google Drive folder ID to load automatically

3. Save the settings

Step 3: Using the Elementor Widget

1. Edit a page with Elementor
2. Search for Google Drive Viewer in the widget panel
3. Drag & drop the widget to your desired location
4. Configure widget options:

• Folder ID (from Google Drive URL)
• View Mode (Grid / List)
• File filtering options
• Display preferences

5. Publish or update the page

📁 How to Get Google Drive Folder ID

1. Open Google Drive in your browser
2. Navigate to the folder you want to display
3. Copy the folder ID from the URL: https://drive.google.com/drive/folders/THIS_IS_YOUR_FOLDER_ID

🛠️ REST API Endpoints

The plugin provides REST API endpoints for programmatic access.

📂 Get Folder Contents

GET /wp-json/google-drive-viewer/v1/files?folder_id=FOLDER_ID

Example Response:

{
  "success": true,
  "data": [
    {
      "id": "file_id_123",
      "name": "document.pdf",
      "mimeType": "application/pdf",
      "size": "2.5 MB",
      "modifiedTime": "2024-10-15T10:30:00Z",
      "webViewLink": "https://drive.google.com/file/d/...",
      "webContentLink": "https://drive.google.com/uc?export=download&id=...",
      "iconLink": "https://drive-thirdparty..."
    }
  ]
}

Download File

GET /wp-json/google-drive-viewer/v1/download?file_id=FILE_ID ➡️ Redirects to the Google Drive download URL.

🎨 Frontend Features

🔳 View Modes

• Grid View
  Thumbnail-based layout with visual previews

• List View
  Detailed list with file information and actions

📄 File Actions

• 👁️ Preview – View files in a popup modal
• ⬇️ Download – Direct download links
• 🔗 Open in Drive – Open files directly in Google Drive
• ℹ️ View Details – File size, type, and last modified date

🪟 Popup Preview

Files can be previewed directly on your website with:

• Navigation controls (back / forward)
• Grid & list view toggle buttons
• Download button
• Responsive iframe-based document preview