Voxel Facebook Sign In
The {CODICTS} Voxel Facebook Sign In plugin adds one-click Facebook authentication to sites running the Voxel Theme. Users can sign in or register using their Facebook account — their name, email, and profile picture are imported automatically. The plugin integrates with Voxel’s role-based registration system and supports per-role access control.
Installation & Activation
Start by downloading the plugin from the Downloads page on your dashboard on the CoDicts website.
After downloading, install and activate the plugin in WordPress by navigating to “Plugins” > “Add New” > “Upload Plugin” and selecting the downloaded zip file. Click “Install Now” and then “Activate”.
Once activated, navigate to “Facebook Sign In” in the WordPress admin sidebar to configure the plugin.
Setting Up Your Facebook App
Before the plugin can work, you need a Facebook Developer App. If you don’t have one yet, follow these steps:
Step 1: Create a Facebook App
Go to developers.facebook.com, log in with your Facebook account, and create a new App. Choose the “Facebook Login” use case when prompted.
Step 2: Add the Email Permission
In your Facebook App’s settings, navigate to the Permissions section and make sure the email permission is added. This allows the plugin to retrieve the user’s email address for registration.
Step 3: Add Your Domain
In the App’s “App Domains” setting, add your website’s URL (e.g., yoursite.com). This must match exactly what’s shown in the plugin’s settings page under “App Domains”.
Step 4: Copy Your App ID and App Secret
From the Facebook App dashboard, copy the App ID and App Secret. You’ll need these for the plugin settings.
Important: Keep your App Secret private. It is stored securely in your WordPress database and is never exposed to the frontend.
Plugin Settings
Navigate to “Facebook Sign In” in the WordPress admin sidebar to configure the plugin.
Step 1: Enable Facebook Sign In
Check the “Facebook Sign In Enabled?” toggle to activate the feature site-wide.
Step 2: Enter Your Facebook App Credentials
Paste your App ID and App Secret from the Facebook Developer dashboard into the corresponding fields.
Step 3: Verify the App Domain
The “App Domains” field shows your site’s URL. Make sure this exact domain is added to your Facebook App’s domain settings.
Step 4: Save Changes
Click “Submit” to save your settings. The “Sign in with Facebook” button will now appear on your Voxel login and registration forms.
Role Control
By default, the Facebook Sign In button appears for all Voxel registration roles. If you want to restrict it to specific roles:
Step 1: Enable Role Control
In the plugin settings, check the “Role Control?” toggle.
Step 2: Select Allowed Roles
A multi-select dropdown will appear listing all your Voxel roles. Select the roles that should have access to Facebook Sign In. Hold Ctrl (or Cmd on Mac) to select multiple roles.
When a user switches between roles on the Voxel registration form, the Facebook button will automatically show or hide based on whether the selected role is in the allowed list.
Note: For security, the
administratorrole can never be assigned via Facebook Sign In. If someone attempts this, the plugin automatically falls back to the default Voxel role.
How It Works for Users
Signing In (Existing Users)
When a user clicks “Sign in with Facebook”, a popup window opens with the Facebook authorization dialog. After approving, they are automatically logged in and the popup closes. The original page then redirects according to your Voxel login redirect settings.
Existing users are matched by their Facebook account or email address — no duplicate accounts are created.
Registering (New Users)
If the user doesn’t have an account yet, one is created automatically with their Facebook details:
| What’s Imported | Where It Goes |
|---|---|
| WordPress user email | |
| First name | WordPress first name + Voxel profile |
| Last name | WordPress last name + Voxel profile |
| Full name | Voxel profile post title |
| Profile picture | Voxel avatar (downloaded to your media library) |
A username is generated from the email prefix. If that username already exists, a random suffix is appended to make it unique. A secure random password is generated (the user doesn’t need it since they log in via Facebook).
After registration, the user is automatically logged in and redirected according to your Voxel role’s registration redirect settings. Any Voxel automations triggered by the User Registered event will fire normally.
Form Prefill Mode (Advanced)
The plugin also provides a form prefill feature designed to work with Voxel create-post forms (typically alongside the {CODICTS} Voxel Create User From Post plugin). Instead of logging in, this mode pulls data from Facebook and fills in form fields automatically.
How to Use It
Place the following shortcode inside a Voxel create form’s UI Heading field description:
[codicts-voxel-facebook-get-data]This renders a “Get details from Facebook” button. When clicked, it opens the Facebook popup, retrieves the user’s name and email, and auto-fills the corresponding form fields — without logging the user in.
Note: This is an advanced feature intended for specific use cases with the Create User From Post plugin. For standard Facebook login functionality, you only need the main plugin settings — no shortcode required.
Troubleshooting
“Voxel Theme Not Detected” Error
Ensure the Voxel Theme is installed and set as the active theme. The plugin checks that the theme template is exactly voxel.
Facebook Button Not Appearing
Check the following:
Is the plugin enabled? Make sure “Facebook Sign In Enabled?” is checked in the plugin settings.
Is Role Control blocking it? If Role Control is enabled, verify the current registration role is in the “Enabled Roles” list.
Is the user already logged in? The button only appears for logged-out users.
Is Voxel’s social login enabled? Check that Voxel’s allow_social_login setting is enabled for the registration role in your Voxel theme settings.
Login Fails — Popup Closes But User Is Not Logged In
Check your browser console for errors on the AJAX request. Ensure cookies are not being blocked by browser privacy settings or extensions. If you recently changed your site URL, clear your browser cache and try again.
OAuth Callback Shows “Error!”
This means the Facebook API did not return valid user data. Check the following:
Make sure the App ID and App Secret in the plugin settings are correct. Verify the email permission is added to your Facebook App. Confirm your site’s URL in the Facebook App’s “App Domains” setting matches exactly what the plugin shows — including https:// vs http://.
Profile Picture Not Imported
Your server’s PHP configuration must have allow_url_fopen enabled to download images from Facebook. Also check that your wp-content/uploads/ directory is writable and that PHP memory limits are sufficient for image processing.
User Created With Wrong Role
The role is determined by which role the user has selected on the Voxel registration form at the time they click the Facebook button. If Role Control is enabled, only allowed roles will be available. The administrator role is always blocked for security.
For further support, visit codicts.com or contact us at support@codicts.com.