Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

Configure AEM Social Media sharing core component

Avatar

Level 5

Hi All,

 

Try using Social Media sharing core component available in AEM 6.5 version. While configure, details of ID attribute field is being asked. Unable to understand how to start and configure it so we can use on our site. Observed few articles where component dialog fields were different but here in this have only ID attribute while configuring dialog of component.

Any step by step process how to proceed would be really helpful.

 

Thanks

R.S.L

 

14 Replies

Avatar

Community Advisor

Hi @rsl_lucky,

ID field in the Social Media Sharing core component is for providing unique identifier to the HTML and Data layer. 

If it is left blank, it will be autogenerated. If we are authoring, we should make sure it is unique. 

 

In order to enable the Social Media Sharing on the page, 

  • Author the Social Media Sharing core component on the desired page. 
  • Head to Page properties of the page (as in step #1) -> Social Media Tab -> Enable Facebook and Pinterest -> Save and Close
  • Head to the page, you would notice Facebook and Pinterest Share icons (After Step #2) in the place where you have authored the social media sharing component.  
  • Behind the scene : 
    • After enabling per step #2, view the desired page in "View as Published" -> View Source of the page -> You will notice meta tags - og:url (for facebook) and og:image (for Pinterest)
  • Note :  

Screenshots for reference: (from local AEM 6.5.0, haven't used Facebook App Id. But could see both Sharing Icons navigate to respective domain, didn't login/proceed further to test completely though)

Vijayalakshmi_S_0-1632493349296.png

 

Vijayalakshmi_S_1-1632493425407.png

 

Vijayalakshmi_S_2-1632493478475.png

Avatar

Level 5

Hi Vijayalakshmi_S,

 

Tried above steps on our site page but couldn't see icons visible on page. Tried same on we-retail page again but with that also same issue, icons are not visible.

After authoring proxy component created of social sharing core component on page, Enabled properties on Social Media Tab of the page & 'View as published'. can see Metadata properties of og:url, og:image & og:title etc but not the icons.

 

Did anything is missing here or anything else needs to be done for it.

 

we-retail-1-social.pngwe-retails-2.jpg

Avatar

Community Advisor

Hi @rsl_lucky,

We shouldn't use the core components directly. Instead create as project specific proxy components for any core components for that matter. Related docs for reference : https://experienceleague.adobe.com/docs/experience-manager-core-components/using/get-started/using.h...

 

Now for icons not displaying, can you inspect  the page in the place where you have authored(in "view as published") and check if the component markup for sharing is evident in "Elements" section of Developers console. 

 

I am using AEM 6.5.0 and core components version : 2.12.0

 

Vijayalakshmi_S_0-1632749154185.png

 

Avatar

Level 5

Hi Vijayalakshmi_S ,

 

Have used proxy component only initially as well not the core. After inspecting the place where component is authored can see the element like in below screenshot, not sure why its not shown up on page.

 

rsl_lucky_0-1632820829474.png

 

 

Avatar

Community Advisor

Hi @rsl_lucky,

Can you confirm if the component used in we-retail site page is from we-retail componentGroup or the proxy that you have created. 

 

Behind the scene, in order for the share plugin/icons to be visible at the page, below highlighted are needed at Page component level. 

Cross check if your project page component has it. (your page component inheriting from Core V2 page component, has sharing related JS, highlighted socialmedia html included in page.html or if any of these are overridden in your page component, cross check there as well)

Vijayalakshmi_S_0-1632831011513.png

Other things that can be tried :

  • Cross check if you see any console errors. 
  • Try in Incognito mode

If you still face issues, share your AEM and core components version. 

Avatar

Level 5

Hi Vijayalakshmi_S,

 

Component used on we-retail site page is from we-retail componentGroup. Cross verified above inclusions at page component level & updated those but still the issue persists.

 

rsl_lucky_0-1632904296197.png

 

AEM 6.5 version and core components 2.3.2 version

Avatar

Community Advisor

Hi @rsl_lucky,

We retail's page component doesn't has these files overridden. It inherits the OOTB core v2 page component by means of which all those files/functionalities should be available. 

(In the below screenshot, highlighted in red doesn't has JS or those html related to social media but it will be available in we-retail page component by means of inheritance via sling:resourceSuperType to core V2 page component - highlighted in green)

Vijayalakshmi_S_0-1632936372980.png

 

I suggest to try in fresh vanilla instance (6.5.0) with latest core components (at least 2.8.0 if not latest) and use the we-retail sharing component as is in any of the we-retail site page and observe the behavior. 

Also, try in browser Incognito window. 

 

Core components version list for reference : https://experienceleague.adobe.com/docs/experience-manager-core-components/using/versions.html?lang=...

 

Avatar

Level 5

Hi @Vijayalakshmi_S 

Not sure, still have the same issue with AeM 6.5 vanilla instance default by which Core components version is 2.3.2. Installed Core components 2.9 version package & authored we-retail page but still the same issue.

Avatar

Level 5

@Vijayalakshmi_S  

Adding to above, Is it possible, to extend existing core social media share component included features of Facebook & Pinterest to further other social medias like Twitter, LinkedIn etc. by extending core component ?

Avatar

Community Advisor

@rsl_lucky,

OOTB Core component Social Media component handles only Facebook and Pinterest for now. 

SocialMediaHelper Sling Model Interface from Core for reference - 

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

 

Avatar

Level 5

Yes Vijayalakshmi_S current Social Media core component provided with Facebook & Pinterest only. But we have requirement to implement other social medias as well in component, any best approach & any steps to be implement for the same. If any sample implementation is shared would really help. 

Avatar

Level 1

Hello Vijayalakshmi_S , I need suggestions on the same topic for extending social media share components for twitter and email. Any inputs/suggestions will help. 

Thanks

Avatar

Community Advisor

@rsl_lucky and @AarthiMuthuraj 

Please check if you can raise a feature request for enabling other social media options for Sharing functionality as part of core components. 

If we are to enable on our own, then we need to write a custom solution.

  • Amends needed in both backend(Custom Interface that extends OOTB SocialMediaHelper interface) and frontend (HTL changes).
  • Ways of including share in web page differs with respect to Social media. You can introduce respective methods accordingly as part of your custom interface

Avatar

Level 1

Hi @Vijayalakshmi_S 

Actually for me that social media tab is not available how to add that tab to get in the initial page properties. Could you help me in that. Thanks.