Expand my Community achievements bar.

SOLVED

Customising OOB core embed component to render Instagram feed using embeddables

Avatar

Level 2

Hi Team,

 

Need some points on how to customise the OOB core embed component to render Instagram feed in AEM page.

 

Or any other way to render?

 

Any point would be appreciated.

@kautuk_sahni 

@arunpatidar 

 

@

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @ravikumarra 

There is no OOTB component available to read the entire Feed. Only way as per my understanding available to acheieve this is you need to write a custom component and extract the feed from instagram grap api .You need to register your company account(Mostly they already have.Get the access token from the Enterprise) and make use of the graph api to extract the feed and display this results in your custom component.

https://developers.facebook.com/docs/instagram-api/reference/ig-user/media#get-media

 

Regards,

Rajashankar Ramalingam

https://rajashankardigital.blogspot.com/

https://medium.com/@rajashankar-blog

 

View solution in original post

8 Replies

Avatar

Community Advisor

@ravikumarra 

Embed component OOTB supports Instagram in three ways you can do it

1) Embed via URL of Instagram as shown below

Rajashankar_3-1639763367387.png

Rajashankar_4-1639763406062.png

2) Embed via HTML

Rajashankar_5-1639763491058.png

 

Rajashankar_6-1639763528539.png

3) By using Embeddable by selecting drop down.For this you need to enable the design dialog by selecting policy of Embed component by editing  template as shown below.By default Youtube is enabled. If you want to add Instagram then you need to customize the component under below path similar to youtube /apps/core/wcm/components/embed/v1/embed/embeddable/youtube.This drop down value in design dialog is driven by datasource "core/wcm/components/embed/v2/datasources/embeddables" which is a servlet registered refer :

https://github.com/adobe/aem-core-wcm-components/blob/master/bundles/core/src/main/java/com/adobe/cq...

 

Rajashankar_9-1639763700524.png

 

Rajashankar_8-1639763619850.png

 

 

 

Hope this helps.

 

Regards,

Rajashankar Ramalingam

https://rajashankardigital.blogspot.com/

https://medium.com/@rajashankar-blog

 

 

 

 

 

 

Avatar

Level 2

Thank you @RajaShankar for the solution. The mentioned solution works for a particular Instagram post but the requirement is to render the entire feed of Instagram profile.

 

Is that achievable?

Avatar

Correct answer by
Community Advisor

Hi @ravikumarra 

There is no OOTB component available to read the entire Feed. Only way as per my understanding available to acheieve this is you need to write a custom component and extract the feed from instagram grap api .You need to register your company account(Mostly they already have.Get the access token from the Enterprise) and make use of the graph api to extract the feed and display this results in your custom component.

https://developers.facebook.com/docs/instagram-api/reference/ig-user/media#get-media

 

Regards,

Rajashankar Ramalingam

https://rajashankardigital.blogspot.com/

https://medium.com/@rajashankar-blog

 

Avatar

Community Advisor

Hi,

You can create a new embaddable and there you can write your logic to display feed.

/apps/myApps/components/core/embed/embeddable/twitterfeed

 

twitterfeed will be a component with dialog, sighlty etc.

 

Developer guid at https://github.com/adobe/aem-core-wcm-components/tree/master/content/src/content/jcr_root/apps/core/...



Arun Patidar

Avatar

Level 2

Hi @arunpatidar , 
Thank you for the solution point. Any reference on the displaying feed one?

Avatar

Community Advisor

HI@ravikumarra 

I did not uderstand your question. Which one feed d you want to show and where?



Arun Patidar

Avatar

Level 2

Hi @arunpatidar ,

I was asking , any doc or reference available for Instagram feed integration with AEM using graph api or other apis?

Avatar

Community Advisor

Hi,

In AEM , Nothing is avaible OOTB.

You have to write a custom logic to get instagram feed

 

documents are avaoble at https://developers.facebook.com/docs/instagram/oembed/

 



Arun Patidar