🌐Ez Social Dashboard

Your central hub for managing and optimizing your social media

PreviousEz AI Marketplace NextEz Smart House Dashboard

Last updated 5 months ago

🌐Ez Social Dashboard

Your central hub for managing and optimizing your social media

🔗Links

Template Link on Bubble Marketplace

Template Link on Our Website

Preview Link

Forum Link

Photos

Introduction

Are you or your business actively involved in the digital world and want to optimize your social media management and maximize your online presence? EazyCode has created a social website template that will revolutionize the way you interact with your audience online.

Ez Social Dashboard is an elegant and user-friendly web template developed on the bubble.io platform. This UI Kit template is a godsend for individuals, marketers, social media managers, and businesses looking to consolidate their social media tasks into one centralized dashboard.

With Ez Social Dashboard, you get access to a wide range of features that improve your productivity and interaction across multiple platforms. Here's what you can expect:

Overview - Get your social media performance metrics, making it easier to analyze your online presence and influence.
Social Networks - Easily integrate all your accounts in one place for easy access and comprehensive management.
Schedule - Schedule and automate content publishing across multiple platforms so you don't miss a beat.
Message - Streamline communication by centralizing messaging, making it easier to communicate with your community.
Advertising - Accurately track and manage your advertising campaigns, optimizing your ad spend to achieve the highest possible ROI (Return on Investment).

Although Ez Social Dashboard is a UI template and not a full-featured application, its appeal lies in its robust customization options. We've enabled basic authentication for linking accounts (Facebook/Instagram, TikTok, LinkedIn) and provided detailed instructions to walk you through the integration process. After template purchasing, it is extremely important to understand how to obtain the keys and successfully pass the verification of its operation. Check out our step-by-step guide to seamlessly integrate popular social media APIs into your Bubble app powered by Ez Social Dashboard. Our template is fully compatible and responsive across all device types. Our team has developed this template in line with up-to-date UX/UI design standards, providing an intuitive interface and visually pleasing aesthetics.

While we sell the template as is, we remain open to discussing additional modifications. Before purchasing the template, we recommend checking out the preview section. If you have any questions or require further clarification, please do not hesitate to contact us, and we'll be delighted to assist and tailor a solution to suit your needs.

Features

Overview
Social media
Involvement
Schedule
Message
Ads
Responsive Design

Notes

Important note: After purchasing this template and customizing it, be sure that you had a chance to learn how to set up data security.

Check all privacy settings by the following link before launch: Bubble Privacy

Since access to objects differs in each application and is unique for each case, ensure you have established all the privacy rules.

This template is not the final product. Any part of the application can be modified for different needs.

Reusable elements

Footer

This reusable element includes links to the EazyCode templates, socials, and personal web.

Header

This reusable element includes the app navigation panel.

Facebook Integrations Guide

To integrate Facebook API into your Bubble app, you'll need to use Bubble’s API Connector plugin and follow these steps: 1. Create a Facebook App: - Go to https://developers.facebook.com/ and create a new app. - Set up your app's basic settings. - Get the App ID and App Secret, which you will need later. 2. Set Permissions: - In your Facebook App Dashboard, navigate to App Review -> Permissions and Features. - Request the necessary permissions that your Bubble app will require from the users (e.g., public_profile, email). 3. Add the API Connector Plugin: - In your Bubble editor, go to the Plugins tab and add the API Connector plugin to your app. 4. Configure the API Connector: - In the API Connector, create a new API to connect to Facebook. - Name your API (e.g., “Facebook API”). - Set up the API parameters: - **API Base URL:** `https://graph.facebook.com/` - **Authentication:** Choose "OAuth2 User-Agent Flow" - **Client ID:** Your Facebook App ID - **Client Secret:** Your Facebook App Secret - **Scope:** Specify the scopes as per your Facebook App permission settings (e.g., `public_profile,email`) - **Token URL:** `https://graph.facebook.com/oauth/access_token` - **User Profile Endpoint for Debugging:** `https://graph.facebook.com/me?fields=name,email` 5. Initialize the API: - Use the "Initialize Call" feature within the API Connector to authenticate with your Facebook app and get the OAuth2 Token. 6. Set Up Bubble Workflow: - In the Bubble workflow where you want to integrate Facebook (for example, a ‘Log in with Facebook’ button), create a new workflow event. - Add an action from the Plugin's section, choosing the Facebook API call you’ve set up. 7. Test the Integration: - Preview your app and test the workflow to ensure the Facebook API is properly integrated and functioning as expected. 8. Handle Facebook Data: - Once the user is authenticated, their data will be sent back to your Bubble app where you can use it according to your needs (e.g., save user details to the database). 9. Privacy and Security: - Make sure to set up privacy rules in your Bubble app to keep user data secure. - Always keep your App Secret confidential and only use it in secure server-side code or Bubble’s API Connector which stores it securely. Remember to adhere to Facebook's Data Use Policies and ensure you have the rights and consent to collect and use Facebook user data following GDPR and other applicable laws. Facebook Graph Analytics and Insight. Integrating the Facebook Graph API to gather detailed information about your profile, including engagement, analytics, statistics, and the ability to post content, involves several steps. Here's a high-level overview of the process: Bubble API (oAuth User-Agent Flow) automatically adds an access_token to every request, you can skip this parameter. 1. Register for a Facebook App To use the Graph API, you first need to create a Facebook app in the Facebook Developers portal. - Go to Facebook Developers. - Click on 'My Apps' > 'Create App'. - Choose an app type that suits your needs (most likely 'For Everything Else'). - Fill out the form with your app details. - Once the app is created, you'll be given an App ID and App Secret, which are important for authentication. 2. Get Access Tokens Access tokens are required to make API calls. There are different types of access tokens: - User Access Token: For actions performed by a user. - Page Access Token: For managing pages and retrieving page-related data. - App Access Token: For server-to-server calls. To get a user access token: - Go to the Facebook Graph API Explorer. - Select your app from the 'Facebook App' dropdown menu. - Click 'Generate Access Token'. - Select the necessary permissions for the data you want to access (like public_profile, pages_show_list, pages_read_engagement, pages_manage_posts, etc.). - Click 'Generate Access Token'. 3. Make API Calls Using the access token, you can make requests to the Graph API. For example, to get profile details: - GET https://graph.facebook.com/v12.0/me?fields=id,name,email&access_token=YOUR_ACCESS_TOKEN To post content: - POST https://graph.facebook.com/v12.0/me/feed Body: message=Your Message Here &access_token=YOUR_ACCESS_TOKEN 4. Handle the API Response The API will return data in JSON format, which you can process in your application. 5. Set Up a Webhook (Optional) For real-time updates, you might want to set up a webhook to listen for changes or updates to your profile or pages. 6. Implement Analytics and Statistics For analytics and statistics, you can use the insights edge to get various metrics. The exact API call will depend on what data you're trying to retrieve. 7. Permissions and Review Remember that to access certain data and to allow your app to be used by others, you'll need to submit your app for Facebook's App Review process, where you need to justify why you need the data permissions you're requesting. Important Considerations: Always keep your App Secret confidential. User Access Tokens are short-lived; you may need to implement a way to refresh them or use long-lived tokens. Adhere to Facebook's Platform Policies and respect user privacy. Example with cURL: # To get profile details curl -i -X GET \ "https://graph.facebook.com/v12.0/me?fields=id,name&access_token=YOUR_ACCESS_TOKEN" # To post content curl -i -X POST \ "https://graph.facebook.com/v12.0/me/feed?message=Hello World&access_token=YOUR_ACCESS_TOKEN" This is a simplified guide, and the actual implementation may vary based on your specific requirements and the programming language you are using. Always refer to the official Facebook Graph API documentation for the most up-to-date and detailed instructions.

Instagram Integrations Guide

Step 1: Create a Facebook Developer Account Visit Facebook for Developers: Go to Facebook for Developers and sign in with your Facebook account that is associated with your Instagram Business or Creator Account. Register as a Developer: If you haven't already, register as a developer by following the prompts. Step 2: Create a Facebook App - Create an App: Click on 'Create App'. Choose 'Something Else' as the app type to access all permissions. - Set Up App: Fill in the app details such as the name and contact email. Set up the app as a public app if it will be used by users other than yourself. Step 3: Configure Instagram Basic Display - Add Product: In the app dashboard, find 'Instagram' under the 'Add a Product' section and set up 'Instagram Basic Display'. - Configure Settings: Fill in the required fields, including the 'Valid OAuth Redirect URIs', which will be the URL provided by Bubble for OAuth callbacks (e.g., https://yourappname.bubbleapps.io/api/1.1/oauth_redirect). Step 4: Add Instagram Testers - Add Test Users: In the 'Roles' section of your app settings, add Instagram accounts as testers. They must accept the invitation to test the app. Step 5: Install the API Connector Plugin in Bubble - Go to Bubble Editor: Open your Bubble app editor. - Add API Connector: Click 'Plugins' > 'Add plugins' and install the 'API Connector' plugin. Step 6: Configure the API Connector - API Connector: Go to the 'Plugins' tab and open the API Connector. - Add New API: Click 'Add another API' and configure it with the following details: API Name: Name it 'Instagram API'. Authentication: Set it to 'OAuth2 User-Agent Flow'. Client ID: Enter the 'Instagram App ID' from your Facebook app's settings. Client Secret: Enter the 'Instagram App Secret' from your Facebook app's settings. Scope: Define the permissions your app will request (e.g., user_profile, user_media). Authorization URL: Use Instagram's authorization URL, which is typically https://api.instagram.com/oauth/authorize. Access Token Endpoint: Use Instagram's token endpoint, typically https://api.instagram.com/oauth/access_token. User Profile Endpoint: This is where you'll retrieve the user's profile information, typically https://graph.instagram.com/me. Callback URL: Enter the callback URL you set in your Instagram app settings. Step 7: Initialize the API Initialize the API: Click the 'Initialize' button in the API Connector to authenticate with Instagram. Log in and authorize your app when prompted. Save the Initialized API: Once authenticated, save the API settings in the API Connector. Step 8: Use the Instagram API in Your Bubble App Create Workflows: Incorporate the Instagram API calls into your app's workflows, such as displaying user media or profile information. Display Data: Use Bubble's dynamic elements to show Instagram data in your app. Step 9: Deploy Your App Test Features: Make sure all Instagram features work properly in your app. Deploy: Deploy your app to go live when you are ready. Step 10: Monitor and Maintain Monitor API Usage: Keep track of your app's usage of the Instagram API to stay within rate limits. Update as Needed: Adjust your app if there are updates to the Instagram API. Please note that Instagram's API has specific requirements, such as needing a Business or Creator Account, and not all features may be available to personal accounts. Additionally, the Instagram Graph API has a review process that must be passed before the app can go live to all users. If you run into any issues or have questions, EazyCode ready to help.

X (Twitter) Integrations Guide

Step 1: Apply for Twitter Developer Access - Visit the Twitter Developer Portal: Go to Twitter Developers and sign in with your Twitter account. - Apply for Access: You'll need to apply for a developer account if you don't already have one. Fill in the required details about how you plan to use the Twitter API. Step 2: Create a Twitter App - Create an App: Once you have developer access, go to the Twitter Developer Portal, click on "Projects & Apps" and then "Overview" to create a new app. - App Details: Enter information about your Bubble app, such as the name, description, and website URL. - Keys and Tokens: After creating your app, you'll be given an API Key, API Secret Key, Access Token, and Access Token Secret. Note these down securely, as you'll need them for API calls. Step 3: Set Permissions - Adjust Permissions: Depending on what you want to do with the Twitter API (read tweets, post content, etc.), you may need to adjust your app's permissions in the Twitter Developer Portal. Step 4: Install the API Connector Plugin in Bubble - Go to the Bubble Editor: Navigate to your Bubble app's editor. - Add the API Connector: Click on 'Plugins' from the left menu, then 'Add plugins', and search for the 'API Connector'. Install it. Step 5: Configure the API Connector - Open API Connector: In the 'Plugins' tab, find the API Connector. - Add New API: Click 'Add another API' and configure it with the following details: API Name: Name it 'Twitter API'. Authentication: Set it to 'OAuth2 User-Agent Flow'. Client ID: Enter your API Key from Twitter. Client Secret: Enter your API Secret Key from Twitter. Scope: Define the permissions your app will request from Twitter (e.g., tweet.read, tweet.write, users.read). Authorization URL: Use the URL provided by Twitter for OAuth, typically https://api.twitter.com/oauth/authorize. Access Token Endpoint: Use Twitter's token endpoint, typically https://api.twitter.com/oauth/access_token. Callback URL: Enter the callback URL you set in your Twitter app settings. Step 6: Initialize the API - Initialize the API: Click the 'Initialize' button in the API Connector to start the authentication process. You'll be redirected to Twitter to authorize your app. - Save the Initialized API: Once you've successfully authenticated, save the API settings in the API Connector. Step 7: Use the Twitter API in Your Bubble App - Create Workflows: Use the Twitter API calls you've set up in the API Connector within your app's workflows. For example, you can create a workflow to post a tweet when a user clicks a button. - Display Data: If you're retrieving data from Twitter, use Bubble's dynamic data features to display the data in your app. Step 8: Deploy Your App - Test Thoroughly: Before going live, test all features of your app to ensure the Twitter integration works as expected. - Deploy: When you're ready, deploy your app to make it live to users. Step 9: Monitor and Maintain - Monitor API Usage: Keep an eye on your app's usage of the Twitter API to ensure it adheres to Twitter's rate limits and terms of service. - Stay Updated: Be aware of any changes to the Twitter API that might affect your app, and update your integration as needed. Remember, this is a simplified guide for non-technical users. If you run into any issues or have questions, EazyCode will be glad to help you troubleshoot. Twitter also has comprehensive documentation for its API that can be helpful.

LinkedIn Integrations Guide

Step 1: Create a LinkedIn Application - Visit LinkedIn Developer Portal: Go to the LinkedIn Developers site and sign in with your LinkedIn credentials. - Create a New App: Click on 'Create App' and fill in the required information such as the app's name, description, privacy policy URL, and upload a logo. - Get Your App Credentials: Once the app is created, note down the Client ID and Client Secret. These are important for authenticating API requests. Step 2: Configure OAuth Settings - Set Redirect URLs: In your LinkedIn app settings, add a redirect URL which will be used after the authentication process. This should match the URL provided by Bubble for OAuth callbacks, typically in the format https://yourappname.bubbleapps.io/api/1.1/oauth_redirect. - Set Permissions: Choose the permissions your app requires based on the LinkedIn API features you want to use. Common permissions include r_liteprofile, r_emailaddress, and w_member_social for basic profile data and posting capabilities. Step 3: Install the API Connector Plugin in Bubble - Go to the Bubble Editor: Navigate to your Bubble app's editor. - Add the API Connector: Click on 'Plugins' from the left menu, then 'Add plugins', and search for the 'API Connector'. Install it. Step 4: Configure the API Connector - Open the API Connector: Go to the 'Plugins' tab and locate the API Connector. - Add a New API: Click 'Add another API', and set it up with the following details: API Name: Give a name, like 'LinkedIn API'. Authentication: Choose 'OAuth2' as the authentication method. Client ID and Secret: Enter the Client ID and Client Secret from your LinkedIn app. Scope: Enter the permissions you've set in your LinkedIn app, separated by spaces (e.g., openid profile email). Token Endpoint: Use LinkedIn's token endpoint URL, which is typically https://www.linkedin.com/oauth/v2/accessToken. Authorization Endpoint: Use LinkedIn's authorization endpoint URL, which is typically https://www.linkedin.com/oauth/v2/authorization. User profile: Use this link to collect profile information https://api.linkedin.com/v2/userinfo Id path = sub, email path = email Step 5: Initialize and Test the API - Initialize the API: In the API Connector, click the 'Initialize' button to authenticate with LinkedIn. You'll be prompted to log in to LinkedIn and grant permissions to your app. - Test the API: Once initialized, make test calls within the API Connector to ensure everything is working correctly. Step 6: Use the LinkedIn API in Your Bubble App - Create Workflows: Use the LinkedIn API calls you've set up in the API Connector within your app's workflows. For example, you can create a workflow to post content to LinkedIn when a user submits a form. - Display Data: If you're retrieving data from LinkedIn, use Bubble's dynamic data features to display the data in your app. Step 7: Deploy Your App - Test Thoroughly: Before going live, test all features of your app to ensure the LinkedIn integration works as expected. - Deploy: When you're ready, deploy your app to make it live to users. Step 8: Monitor and Maintain - Keep an Eye on Usage: Monitor your app's usage of the LinkedIn API to ensure it adheres to LinkedIn's rate limits and terms of service. - Stay Updated: Be aware of any changes to the LinkedIn API that might affect your app, and update your integration as needed. For non-technical users, the key is to follow each step carefully and refer to the documentation provided by both LinkedIn and Bubble. If you encounter any issues, EazyCode ready to help you!

Pinterest Integrations Guide

Step 1: Register for a Pinterest Developer Account - Go to the Pinterest Developers website. - Click on 'Sign up' to create a new developer account, or log in if you already have one. - Once logged in, navigate to the 'Apps' section and click on 'Create app'. Step 2: Create a Pinterest App - Fill out the application form with your app's details. This will include the name of your app, a description, and the website URL (you can use the URL of your Bubble app). - Agree to the Pinterest Developer Terms of Service and submit the form. - After creating the app, you will receive an App ID and App Secret. Keep these credentials safe as you will need them to connect to the API. Step 3: Configure OAuth Settings - In your app settings on Pinterest, set up the OAuth redirect URI. This is the URL where users will be sent after they authorize your app. Bubble provides a specific endpoint for OAuth callbacks, which usually looks like this: https://yourappname.bubbleapps.io/api/1.1/oauth_redirect. - Save the changes. Step 4: Obtain Access Tokens - Pinterest uses OAuth 2.0 for authentication. You will need to set up an authentication flow to get an access token that allows you to make API calls on behalf of the user. - To simplify this process, Bubble's API Connector can manage the authentication flow for you. Step 5: Set Up the API Connector in Bubble - Go to your Bubble editor and click on 'Plugins' in the left-hand menu. - Add the 'API Connector' plugin to your app if it's not already there. - Open the API Connector and create a new API connection. - Name your API and set the authentication to 'OAuth2'. - Fill in the fields: Client ID: Use the App ID from Pinterest. Client Secret: Use the App Secret from Pinterest. Authentication URL: Set to the URL provided by Pinterest for OAuth (you can find this in your Pinterest app's settings). Access Token Endpoint: Also provided by Pinterest. Scope: Define the permissions your app needs (e.g., read_public, write_public, read_relationships, write_relationships). - Set up the redirect URI as mentioned in the OAuth settings on Pinterest. - Initialize the call to get your access token. Step 6: Make API Calls - Once the API Connector is set up and authenticated, you can configure the API calls you need. For each call, set the type (GET, POST, etc.), the API endpoint URL, and any required headers or parameters. - Use the access token you obtained to authenticate your API calls. Step 7: Test the Connection - Before using the API in your app, test the connection and calls in the API Connector to ensure everything is working correctly. - Check for any errors and make sure you're getting the expected responses. Step 8: Use the API in Your App - With the API calls configured, you can now integrate them into your Bubble workflows. - For example, you can add a workflow that triggers an API call when a user performs an action, like clicking a button. Step 9: Deploy Your App - After thoroughly testing your app and ensuring that the Pinterest API is integrated correctly, you can deploy your app to go live. Step 10: Monitor and Maintain - Keep an eye on your app's usage of the Pinterest API to ensure it stays within rate limits and complies with Pinterest's API policies. - Update your app as needed to respond to any changes in the Pinterest API or your app's functionality. Remember, the exact steps and URLs for OAuth and API endpoints will be provided by Pinterest in your developer account's app settings. Always refer to the official Pinterest API documentation for the most accurate and up-to-date information. If you encounter any issues or have specific questions about the Bubble implementation, the EazyCode team is ready to help!

TikTok Integrations Guide

Integrating the TikTok API into your Bubble app requires a series of steps, including API authentication, setting up API calls, and handling data. Access the TikTok for Developers website to learn about the APIs and tools they offer. Here's a step-by-step guide to help you integrate TikTok API: 1. Get Access to TikTok API: - Visit the TikTok for Developers page and sign up for a developer account. - Create an app on the TikTok Developer Portal to obtain your unique API Key and API Secret. 2. Set Up Authentication: - TikTok API uses OAuth 2.0 for authentication. You will need to implement this in your Bubble app to allow users to authorize your application to access their TikTok data. - In Bubble, use the API Connector plugin to configure the authentication. Set the appropriate authorization and token URLs provided by TikTok. 3. Configure API Calls: - In your Bubble app, go to the API Connector plugin and start setting up your API calls. - You will have to configure each API call by providing the URL, setting the parameters, and specifying the data you want to receive. - For example, to fetch user information, you would use the endpoint provided in TikTok's API documentation. 4. Handle Data: - Once you've set up your API calls, you can use the data returned from TikTok in your Bubble app. - Create workflows and dynamic data elements in your app to display or manipulate the data you receive from the TikTok API. 5. Test Your Integration: - Test each API call in the API Connector plugin to make sure you're receiving the correct data and that the authentication process works smoothly. - Make sure to handle any errors that may occur during API calls. 6. Deploy and Monitor: - After thoroughly testing the integration, you can deploy your app. - Monitor the API usage to ensure it adheres to TikTok's rate limits and terms of service. Remember that third-party services and their APIs often update, so it's important to stay informed about any changes that might affect your Bubble app's integration with TikTok.

Workflow

Highlighting the workflow with color is a great way to separate actions in essence and significance. Below is the EazyCode standard for the use of colors with a detailed explanation.

The standards below are for informational purposes only. Any discrepancy is not related to the functionality of the application.

Blue - The actions taking place on our screen do not utilize the application's resources. For instance, when an element is clicked and a popup is opened or closed.

Green - These actions involve creating or modifying entries in the database. For example, "Create a new Thing," "Make changes to a thing or a list of things," as well as "Copy a list of things," and so on.

Red - This action involves deleting or resetting values. For instance, "Delete a thing or a list of things," as well as "Reset a group" and "Reset inputs."

Orange - Actions related to your navigation. For example, "Navigate to a page," or "Do when a condition is true" – when you use specific values for checking, such as "When the current user is logged in," and so on.

Cyan - Actions utilizing Custom Events – lengthy tasks that involve the creation, modification, deletion, and plugins within a single comprehensive workflow as steps.

Brown - Custom workflow, API workflow, and similar tasks.

Purple - The significance of this color is determined by the developer themselves, as it is done due to the fact that everyone has their own approach to development.

Grey - All other actions.

Data Types

Chart

This data type contains information only for demonstration purposes.

This data type is used to store chart proprieties.

Chat

This data type is used to store chat proprieties.

Chat Messages

This data type is used to store message proprieties.

Followers

This data type contains information only for demonstration purposes.

This data type is used to store current user's follower proprieties.

Post

This data type contains information only for demonstration purposes.

This data type is used to store post-proprieties.

This data type is used to store user social profile proprieties.

User

This data type is used to store user proprieties.

Option sets

Facebook
Instagram
Twitter
LinkedIn
Pinterest
TikTok

The template is sold as is, although additional modifications can be discussed. Feel free to contact us for any inquiries and we’ll be happy to find a solution for your ideas – http://eazycode.com/

Hire us: