diff --git a/pages/providers/facebook.mdx b/pages/providers/facebook.mdx index e0ce345..fdae224 100644 --- a/pages/providers/facebook.mdx +++ b/pages/providers/facebook.mdx @@ -12,28 +12,28 @@ import OAuth2Redirect from "../../components/snippets/oauth2redirect.tsx"; ### Step 1 -Create a [new app in Facebook developers](https://developers.facebook.com/apps/creation/), choose the business you want to connect it to.
-Please be advised that for public applications you would need to verify you business. +Select a business portfolio, then create a [new app in Facebook developers](https://developers.facebook.com/apps/creation/).
+Please be advised that for public applications, you will need to verify your business. -![Create app](https://github.com/user-attachments/assets/e24f15a7-d9b1-48cb-8952-7a5258923b4c) +![Business Portfolio](/images/providers/facebook/Business-Portfolio.png) + +![Create app](/images/providers/facebook/Create-an-app.png) ### Step 2 Select "Other" and click next -![Other](https://github.com/user-attachments/assets/9c976b82-0b73-4d1d-b3ef-cf98e4cc0c50) +![Other app use cases](/images/providers/facebook/Other-app-use-cases.png) ### Step 3 Then select business ![Business](https://github.com/user-attachments/assets/74bde861-5441-46bb-b5b8-c5229e980237) +### Step 4 Add all your details and click Create App -### Step 4 ![CleanShot 2024-09-24 at 13 45 54](https://github.com/user-attachments/assets/f0c03825-0f9b-4467-94a4-ab8cf6ed7e1d) -Set final details - ### Step 5 ![Setup Login with Facebook](https://github.com/user-attachments/assets/08d3c1d1-d498-49d1-adac-aa6248e7c10c) diff --git a/pages/providers/instagram.mdx b/pages/providers/instagram.mdx index 0ee0742..b961473 100644 --- a/pages/providers/instagram.mdx +++ b/pages/providers/instagram.mdx @@ -11,7 +11,7 @@ import OAuth2Redirect from "../../components/snippets/oauth2redirect.tsx"; ## Connection Options -There are two ways to connect to an Instagram account: by using a Facebook Business or through a standalone flow that connects directly to an Instagram account. +There are two ways to connect to an Instagram account: by using a Facebook Business or through a standalone flow that connects directly to an Instagram account. Both methods will require a [Meta for Developpers account](https://developers.facebook.com/apps/). ## Setting up Meta Application @@ -19,27 +19,28 @@ The following steps will guide you through the setup of a Meta application that ### Step 1 -Create a [new app in Instagram developers](https://developers.instagram.com/apps/creation/), choose the business you want to connect it to.
-Please be advised that for public applications you would need to verify you business. +Select a business portfolio, then create a [new app in Meta for developers](https://developers.facebook.com/apps/creation/).
+Please be advised that for public applications, you will need to verify your business. -![Create app](https://github.com/user-attachments/assets/e24f15a7-d9b1-48cb-8952-7a5258923b4c) +![Business Portfolio](/images/providers/facebook/Business-Portfolio.png) + +![Create app](/images/providers/facebook/Create-an-app.png) ### Step 2 Select "Other" and click next -![Other](https://github.com/user-attachments/assets/9c976b82-0b73-4d1d-b3ef-cf98e4cc0c50) +![Other app use cases](/images/providers/facebook/Other-app-use-cases.png) ### Step 3 Then select business ![Business](https://github.com/user-attachments/assets/74bde861-5441-46bb-b5b8-c5229e980237) +### Step 4 Add all your details and click Create App -### Step 4 -![CleanShot 2024-09-24 at 13 45 54](https://github.com/user-attachments/assets/f0c03825-0f9b-4467-94a4-ab8cf6ed7e1d) +![Create an app details page](https://github.com/user-attachments/assets/f0c03825-0f9b-4467-94a4-ab8cf6ed7e1d) -Set final details
## Facebook Business Option @@ -94,7 +95,7 @@ If you want to connect directly to your Instagram account without having to use ### Set up Instagram -![Instagram](/images/providers/instagram-standalone/instagram-standalone-001.png) +!["Add products to your app" section of app creation](/images/providers/instagram-standalone/instagram-standalone-001.png) Set up Instagram. @@ -122,3 +123,33 @@ INSTAGRAM_APP_SECRET="app secret" Go to the Postiz web interface, and click on the "Add Channel" button. Select "Instagram (Standalone)" from the list of available channels. You should be redirected to the Instagram login screen to authorize the application. + +## Adding App Roles + +If you're having trouble connecting to your Instagram accounts, adding them as App Roles may help. + + +### Go to the App Roles page + +![Facebook App developpers dashboard](/images/providers/instagram-standalone/Facebook-App-developpers-dashboard.png) + +### Add a role + +Click on "Add People" + +![App Roles page](/images/providers/instagram-standalone/App-Roles-page.png) + +### Add an Instagram Tester + +Select the "Instagram Tester" option, and type in the handles of all the Instagram accounts you'd like to connect to. Then, click "Add". + +![Add people window](/images/providers/instagram-standalone/Add-people-window.png) + +### Accept the invitations + +Go to your Instagram account, and accept the tester invitation in the [Apps and Websites section of the profile settings](https://www.instagram.com/accounts/manage_access/). + +![Apps and Websites section of the profile settings](/images/providers/instagram-standalone/Apps-and-Websites-section-of-the-profile-settings.png) + + + diff --git a/pages/providers/pinterest.mdx b/pages/providers/pinterest.mdx index b76c1fd..11a1d33 100644 --- a/pages/providers/pinterest.mdx +++ b/pages/providers/pinterest.mdx @@ -17,12 +17,12 @@ Head to [Pinterest Developer Dashboard](https://developers.pinterest.com/apps/) ### Step 2 Copy the App ID and Secret Copy the App ID at "App id" and the Secret Key at "App secret key" -[Copy App ID and Secret](https://github.com/egelhaus/postiz-docs/blob/cfd39114ef6d44da864717b23d704f6265cefa84/public/images/providers/pinterest/pinterest-002.png) +![Copy App ID and Secret](https://github.com/egelhaus/postiz-docs/blob/cfd39114ef6d44da864717b23d704f6265cefa84/public/images/providers/pinterest/pinterest-002.png) ### Step 3 Configure Redirect URI -[Setup of Redirect URIs](https://github.com/egelhaus/postiz-docs/blob/d11ea333ad8d70c5dee7ac0ad76283ded514219b/public/images/providers/pinterest/pinterest-001.png) +![Setup of Redirect URIs](https://github.com/egelhaus/postiz-docs/blob/d11ea333ad8d70c5dee7ac0ad76283ded514219b/public/images/providers/pinterest/pinterest-001.png)
diff --git a/pages/providers/threads.mdx b/pages/providers/threads.mdx index cc519fe..9940d64 100644 --- a/pages/providers/threads.mdx +++ b/pages/providers/threads.mdx @@ -7,7 +7,7 @@ import {Steps, Callout} from "nextra/components"; import OAuth2Redirect from "../../components/snippets/oauth2redirect.tsx"; -This integration requires that you have setup a Facebook developer account already. You can start by going to the [Meta/Facebook Developer Portal](https://developers.facebook.com/apps). +This integration requires that you have setup a Meta for Developers account already. You can start by going to the [Meta/Facebook Developer Portal](https://developers.facebook.com/apps). This is a complex integration, and it may take some time to get it right. If you have any issues, please reach out to us on the Postiz Discord. This documentation is not fully complete, because at the time of writing the Threads API seems like it's having issues. This page was written to get something up to get you started. @@ -15,12 +15,7 @@ This is a complex integration, and it may take some time to get it right. If you ### Create an app -Go to the [Meta/Facebook Developer Portal](https://developers.facebook.com/apps) and click on "Create app". - -![Create app](./threads_create_app.png) - - -### Give your app a name and email +Go to Meta for Developers and [create a new app](https://developers.facebook.com/apps/creation/). Give your app a name and email. ![Create app](./threads_app_name.png) @@ -34,6 +29,8 @@ Select *Access the Threads API*. ![Add business details](./threads_business.png) +If you're unable to skip or move to the next step, and get a message saying "There are no business portfolios available to connect to this app", go to your [Meta Business Suite Settings](https://business.facebook.com/latest/settings/business_users) and make sure you've enabled Two-Factor Authentication (2FA) for your account. + ### Finish creating the app You should not have any extra requirements to publish and maintain access. @@ -58,7 +55,7 @@ Add the "threads_content_publish" and "threads_basic" (automatically selected) t ![Set threads API settings](./threads_api_settings.png) -Go back to the 'Dashboard' view of the Facebook developers portal, click "Finish customization" sure you click through the setup wizard to finish the step "Yes I'm finished" to complete the setup. The AP may not work until you've done this. Ignore "Test use cases" for now as it will not work until you have created a test user (see later). +Go back to the 'Dashboard' view of the Facebook developers portal and click "Finish customization". Make sure you clicked through the setup wizard, and select "Yes I'm finished" to complete the setup. The API may not work until you've done this. Ignore "Test use cases" for now as it will not work until you have created a test user (see later). ### Restart Postiz @@ -75,8 +72,8 @@ You should not try to add a Threads account to Postiz at this time. ### Allow the app on your threads account -* On threads.net, open your account settings; https://www.threads.net/settings/account -* Open *Website permissions*, and switch to the *Invitations* tab; +* On threads.com, open your [account settings](https://www.threads.net/settings/account); +* Open [Website permissions](https://www.threads.com/settings/website_permissions), and switch to the "Invites" tab; * If all has gone well, you should have a pending invite. Accept that invite. ![Threads invite](./threads_invite.png) diff --git a/pages/providers/youtube.mdx b/pages/providers/youtube.mdx index d1b2dd6..aee3862 100644 --- a/pages/providers/youtube.mdx +++ b/pages/providers/youtube.mdx @@ -15,22 +15,21 @@ Follow the instructions as availabe in the [Obtaining authorization credentials] -### Step 1 Go to Credentials Page -Make sure you are logged in to your Google account and visit the [Credentials - APIs & Services](https://console.cloud.google.com/projectselector2/apis/credentials) page. Make sure to read the terms and conditions and "Agree and Continue". +## General Setup -### Step 2 Create Project -Create a new project by clicking on the "Create Project" button. +### Go to Credentials Page +Make sure you are logged in to your Google account and visit the [Credentials - APIs & Services](https://console.cloud.google.com/projectselector2/apis/credentials) page. Make sure to read the terms and conditions and "Agree and Continue". -### Step 3 -Fill in the project name, and details and click "Create". +### Create Project +Create a new project by clicking on the "Create Project" button. Fill in the project name, and details and click "Create". -### Step 4 Create OAuth Credentials +### Create OAuth Credentials Create credentials by clicking on the "Create Credentials" button. Select the "OAuth client ID" option. -### Step 5 Configure Consent Screen -Make sure that your consent screen has been configured. Add yourself as a test user of the application. +### Configure Consent Screen +Make sure that your consent screen has been configured. -### Step 6 Fill in OAuth Details +### Fill in OAuth Details Create the OAuth client ID. Select "Web application" as the application type and fill in the details. @@ -39,12 +38,6 @@ Under "Authorized redirect URIs", insert your OAuth2 Redirect URI. ![YouTube](/images/providers/youtube/youtube-001.png) -### Step 7 Activate YouTubes API -Go to Activated APIs and Services. Then click on Activate APIs and Services. Search YouTube Data API v3 and activate the API by clicking it and clicking Activate. -Do the same Process with YouTube Analytics API and YouTube Reporting API. - - - After following all of the steps above you should be met with a screen that shows your client ID and client secret. Add these to your providers configuration. ```env @@ -52,22 +45,37 @@ YOUTUBE_CLIENT_ID="" YOUTUBE_CLIENT_SECRET="" ``` -ADDITIONAL STEPS FOR BRAND ACCOUNTS +### Add Test User + +Add yourself as a test user of the application + +![YouTube](/images/providers/youtube/YouTube-Add-Test-Users.png) + +### Activate YouTube's API +Go to "Enabled APIs and Services". Then click on "Enable APIs and Services". Search "YouTube Data API v3" and activate the API by selecting it and clicking "Enable". Do the same Process with "YouTube Analytics API" and "YouTube Reporting API". + +![Enabled APIs](/images/providers/youtube/YouTube-Enabled-APIs.png) + +![Enabled APIs](/images/providers/youtube/Enable-APIs-and-Services.png) + + + +## ADDITIONAL STEPS FOR BRAND ACCOUNTS Note: When using a Brand account you will need to set your APP to External and setup a test user. You do not need to publish the APP, but it does take time for the changes to propagate. You will also need to add the app to the trusted apps within your google workspace Admin. -### Step 1 Go to admin.google.com -sign in +### Go to admin.google.com +Sign in -### Step 2 go to Security --> Access and data Controls --> API Controls +### Go to Security --> Access and data Controls --> API Controls Click Manage Third Party App Access -### Step 3 Click Configure new App +### Click "Configure new App" Put your Client ID for the app you created in previous steps into the search box and select your app -### Step 4 Set scopes and Google Data Access for the app to Trusted +### Set scopes and Google Data Access for the app to Trusted Once set, click save -### Step 5 Wait at least 5 hours for the changes to propegate. +### Wait at least 5 hours for the changes to propagate. After this time you should now be able to add your Youtube channel to your Postiz account diff --git a/public/images/providers/facebook/Business-Portfolio.png b/public/images/providers/facebook/Business-Portfolio.png new file mode 100644 index 0000000..b534a89 Binary files /dev/null and b/public/images/providers/facebook/Business-Portfolio.png differ diff --git a/public/images/providers/facebook/Create-an-app.png b/public/images/providers/facebook/Create-an-app.png new file mode 100644 index 0000000..af3bd62 Binary files /dev/null and b/public/images/providers/facebook/Create-an-app.png differ diff --git a/public/images/providers/facebook/Other-app-use-cases.png b/public/images/providers/facebook/Other-app-use-cases.png new file mode 100644 index 0000000..9ac3833 Binary files /dev/null and b/public/images/providers/facebook/Other-app-use-cases.png differ diff --git a/public/images/providers/instagram-standalone/Add-people-window.png b/public/images/providers/instagram-standalone/Add-people-window.png new file mode 100644 index 0000000..159be4c Binary files /dev/null and b/public/images/providers/instagram-standalone/Add-people-window.png differ diff --git a/public/images/providers/instagram-standalone/App-Roles-page.png b/public/images/providers/instagram-standalone/App-Roles-page.png new file mode 100644 index 0000000..1acc18e Binary files /dev/null and b/public/images/providers/instagram-standalone/App-Roles-page.png differ diff --git a/public/images/providers/instagram-standalone/Apps-and-Websites-section-of-the-profile-settings.png b/public/images/providers/instagram-standalone/Apps-and-Websites-section-of-the-profile-settings.png new file mode 100644 index 0000000..932ef84 Binary files /dev/null and b/public/images/providers/instagram-standalone/Apps-and-Websites-section-of-the-profile-settings.png differ diff --git a/public/images/providers/instagram-standalone/Facebook-App-developpers-dashboard.png b/public/images/providers/instagram-standalone/Facebook-App-developpers-dashboard.png new file mode 100644 index 0000000..c422aca Binary files /dev/null and b/public/images/providers/instagram-standalone/Facebook-App-developpers-dashboard.png differ diff --git a/public/images/providers/threads/Create-a-new-app-ID.png b/public/images/providers/threads/Create-a-new-app-ID.png new file mode 100644 index 0000000..660db2a Binary files /dev/null and b/public/images/providers/threads/Create-a-new-app-ID.png differ diff --git a/public/images/providers/youtube/Enable-APIs-and-Services.png b/public/images/providers/youtube/Enable-APIs-and-Services.png new file mode 100644 index 0000000..995195f Binary files /dev/null and b/public/images/providers/youtube/Enable-APIs-and-Services.png differ diff --git a/public/images/providers/youtube/YouTube-Add-Test-Users.png b/public/images/providers/youtube/YouTube-Add-Test-Users.png new file mode 100644 index 0000000..f823138 Binary files /dev/null and b/public/images/providers/youtube/YouTube-Add-Test-Users.png differ diff --git a/public/images/providers/youtube/YouTube-Enabled-APIs.png b/public/images/providers/youtube/YouTube-Enabled-APIs.png new file mode 100644 index 0000000..255aa5b Binary files /dev/null and b/public/images/providers/youtube/YouTube-Enabled-APIs.png differ