This guide's first part details the pre-posting steps for Instagram using Sitecore Content Hub - CMP. If familiar, you can skip ahead to the second part for the posting process.
Prerequisite
The following prerequisites are required in order to post to Instagram
- Must have a Facebook developer account
- Must have an Instagram account
- Must have a location where you can place images to be uploaded
Please note that you cannot post with your regular Instagram account. You must switch to a business account.
The procedure is not so difficult. You can switch by following the steps below after logging in to the target account from the Instagram app.
- Open Settings from the menu
- Select an account
- Select Switch to Pro Account
- Select Business
Then you need to clear some activities: upload 3 photos, check other accounts, etc.
Once you have a business account, you are ready to go. You will also need to set up a Facebook page to be linked.
Creating Apps with Facebook
You must first create an app on the Facebook for Developers site.
Click Create App on the App List page. The following dialog box will then appear.
Select the second one from the top because what you want to create is using the Instagram Graph API.
Enter a name for your application. The email address will automatically be entered that is tied to the Facebook developer. For the purpose of the app, select yourself or your business, as this time you will be diverting your personal account as is. There is no business manager account this time, so do not select anything there and click Create App.
A non-robot confirmation will be displayed upon creation of the application.
Once this is cleared, you will switch to the next screen.
Since it is the Instagram Graph API function that you wish to use this time, click on the appropriate item's settings. The page will switch to the confirmation page.
Since we are only creating a sample this time, we will end the procedure here. When you actually want to make a solid linkage, you will need to proceed with setting the application's permissions and so on.
Get the required values in the Graph API Explorer
Obtaining an access token
Go to the Facebook for Developers site and open the Graph API Explorer.
When opened, you will see the following screen. Also check that the Facebook app on the right side is the one you just created (if there are multiple apps, you can select and switch between them).
We will add the permissions required for this application implementation. Select the Get User Access Token option in the Users or Pages section.
A dialog box will appear asking for permission. Here, log in as usual.
The screen switches as shown below.
This is the situation where the access token is being generated. Currently, the only permission set is public_profile, but we will need to add the necessary permissions for our implementation. Using the Add Permissions drop-down box, please add the following three items
- Events Groups Pages
- pages_show_list
- Other
- instagram_basic
- instagram_content_publish
Check your selections and click the Generate Access Token button again. The following screen will appear next to the login dialog.
The Instagram business account will be displayed, so please select the account you wish to link. This will not be displayed if you have not created a Facebook Page when you create your Instagram business account. Next, you will be taken to the following screen.
This will select the Facebook pages to be linked. So check one and move on.
Finally, a confirmation screen will appear to confirm that the permissions are correct. Pressing "Finish" will apply the settings as shown below.
You have successfully obtained an access token with the necessary permissions for use. Note that the access token created in this procedure will be invalidated after one hour and cannot be used continuously.
Obtaining an Instagram User ID
As is, we would like to retrieve Instagram user IDs using the Graph API Explorer. Please rewrite the item that throws the query as /me/accounts and send the submission. You should see results similar to the following
The ID in the red area of the above screen is your Facebook Page ID. Using this Facebook Page ID, the next step is to obtain the Instagram ID. The query should include
Plain Text
{facebook-page-id}?fields=instagram_business_account
and execute submit, you will see the following results.
The red area contains the ID of the Facebook Page and the blue area contains the ID of the Instagram business account.
Confirmation of next steps
The following two items could be prepared in this section
- Access token
- Instagram User ID
Test posting using Postman
Using the above parameters, check to see if you can post using Postman.
Checking Access Token
Create a new query and submit Get, setting the URL to https://graph.facebook.com/me. Switch to the Authorization tab, set the Type to OAuth 2.0, and enter the access token obtained in the previous step in the Enter the Access Token obtained in the previous step in the Access Token field.
Clicking on the Send button, we obtained the same results as in the Graph API Explorer as shown below.
Post a photo
The procedure for publishing photos is summarized in the following page on Facebook for Developer.
The first step is to upload the photo and then publish it. To perform the upload, switch the GET method that was used to test the access token earlier to POST. Then rewrite the URL as follows
Plain Text
https://graph.facebook.com/{Instagram-User-ID}/media?image_url=https//www.example.com/images/bronz-fonz.jpg&caption=CaptionText
The following two parameters are used.
- media_url: Specify image file URL, JPEG files only supported
- caption: Comments to post with photos
When executed, the response will be as follows
JSON
{
"id": "17889455560051444"
}
This ID will be the ID of the uploaded photo. The URL to be POSTed is the Instagram ID and the ID returned in the response, as shown below (the last ID below should be the ID returned above).
Plain Text
https://graph.facebook.com/{Instagram-User-ID}/media_publish?creation_id=17889455560051444
Press the Send button, and the photo has now been successfully uploaded.
Summary
This is a long story, so we will leave you with the first part, which is about posting photos via web services. In the second part, we will introduce the implementation of web service integration for posting to Instagram from Sitecore Content Hub CMP.