Adobe Experience Manager Sites & More

rsl_lucky · 9/24/21

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

Vijayalakshmi_S · 9/24/21

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 :
- If you are enabling Facebook share, provide Facebook App Id in the respective field.
- You can refer below docs for creating Facebook App Id :
  - https://help.optimizepress.com/article/136-create-a-facebook-app-id-for-social-sharing-element
  - https://developers.facebook.com/docs/sharing/

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)

rsl_lucky · 9/26/21

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.

Vijayalakshmi_S · 9/27/21

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

rsl_lucky · 9/28/21

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.

Vijayalakshmi_S · 9/28/21

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)

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.

rsl_lucky · 9/29/21

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.

AEM 6.5 version and core components 2.3.2 version

Vijayalakshmi_S · 9/29/21

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)

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

rsl_lucky · 10/1/21

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.

rsl_lucky · 10/4/21

@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 ?

Vijayalakshmi_S · 10/11/21

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

rsl_lucky · 11/18/21

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.

AarthiMuthuraj · 12/3/21

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

Vijayalakshmi_S · 12/6/21

@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