Customising OOB core embed component to render Instagram feed using embeddables | Community
Skip to main content
R
ravikumarra
Level 2
December 17, 2021
Solved

Customising OOB core embed component to render Instagram feed using embeddables

  • December 17, 2021
  • 2 replies
  • 3200 views

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 

 

@

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by RajaShankar

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

 

2 replies

RajaShankar
Community Advisor
RajaShankarCommunity Advisor
Community Advisor
December 17, 2021

@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/wcm/core/components/internal/servlets/embed/EmbeddablesDataSourceServlet.java

 

 

 

 

 

Hope this helps.

 

Regards,

Rajashankar Ramalingam

https://rajashankardigital.blogspot.com/

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

 

 

 

 

 

 

    R
    ravikumarraAuthor
    Level 2
    December 17, 2021

    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
      Community Advisor
      RajaShankarCommunity AdvisorAccepted solution
      Community Advisor
      December 17, 2021

      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
        Community Advisor
        arunpatidarCommunity Advisor
        Community Advisor
        December 18, 2021

        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/wcm/components/embed/v1/embed#extending-the-embed-component

        Arun Patidar
          R
          ravikumarraAuthor
          Level 2
          December 19, 2021

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

            arunpatidar
            Community Advisor
            arunpatidarCommunity Advisor
            Community Advisor
            December 19, 2021

            HI@ravikumarra 

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

            Arun Patidar
              Terms & ConditionsAccessibility statement

              Loading footer...