Customising OOB core embed component to render Instagram feed using embeddables

[ravikumarra]

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 

@

[RajaShankar]

@ravikumarra 

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

1) Embed via URL of Instagram as shown below

2) Embed via HTML

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...

Hope this helps.

Regards,

Rajashankar Ramalingam

https://rajashankardigital.blogspot.com/

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

[ravikumarra]

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?

[RajaShankar · Accepted solution]

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

[arunpatidar]

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/...

[ravikumarra]

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

[arunpatidar]

HI@ravikumarra 

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

[ravikumarra]

Hi @arunpatidar ,

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

[arunpatidar]

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/