Custom Component -Configure Social Media Sharing

[Subashree]

Hi All,

Here I've created the Social Media Sharing Component using Sling Model.When I'm giving the Social media links, it is not redirected to the External app.

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

[Shashi_Mulugu]

@Subashree Welcome to Experience League communities and post your concern, this is a great collaboration forum to learn.

Coming to your ask, is the component a custom component or OOTB core component? If it is OOTB core component, its right now deprecated in latest versions, but below are some reference links on how to configure it.

https://video.tv.adobe.com/v/18897?quality=12&learn=on

https://github.com/AdobeDocs/experience-manager-learn.en/blob/main/help/sites/developing/social-medi...

If it is a custom component, we may need some more details like, what version of AEM you are using, component HTL script on how the links are rendered etc?

[Subashree]

Thank you @Shashi_Mulugu .

It is Custom Component. Here I've attached the screenshot of AEM Version and also HTL script is given below.

<div data-sly-use.placeholderTemplate="core/wcm/components/commons/v1/templates.html" data-sly-use.model="com.adobe.aem.guides.wknd.core.models.SocialMediaModel">

    <!--/* <a href="${model.twitterLink}" class="fa fa-twitter"></a> */-->

    <a href="${model.linkedinLink}" class="fa fa-linkedin"></a>

    <a href="${model.pinterestLink}" class="fa fa-pinterest"></a>

    <a href="${model.youtubeLink}" class="fa fa-youtube"></a>

</div>

<sly data-sly-call="${placeholderTemplate.placeholder @ isEmpty=true}"></sly>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Kindly guide me on how to proceed.

[Shashi_Mulugu]

@Subashree @ you need to use HTL context for href attribute to display link correctly.

<a href="${yourlinkedurl @ context='uri'}">Linkedin</a>

Refer to below url for more examples:

https://github.com/adobe/htl-spec/blob/master/SPECIFICATION.md#121-display-context

[Subashree]

Hi @Shashi_Mulugu ,

Here I'm giving links.It is redirecting ,but got the error attached screenshot below.

[Shashi_Mulugu]

@Subashree seems like something outside AEM scope, but one last try would be show us whats present in anchor href attribute by inspecting the hyperlink? so that we can check if it is rendering what author inputs in the dialog?

[aanchal-sikka]

@Subashree 

When you say its not redirecting, what is the behaviour that you are seeing?

Also, when dealing with Links, you can utilize com.adobe.cq.wcm.core.components.commons.link.LinkManager API. It is used by WCM core components, thus might be capable of dealing with Internal and external links.

https://techrevelhub.wordpress.com/2023/10/11/sling-model-annotations-best-practices/#link-processin...

[TarunKumar]

Hi @Subashree ,

Once you save the component, can you please inspect the link in chrome dev tool and check what is the URL being formed.
If the URL is distorted then you may need to look at your custom BE code which is forming this .


Thanks
Tarun

[kautuk_sahni]

@Subashree  Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.

[Hemendra · Accepted solution]

Hi @Subashree , If the ask is just to open these links to different browser window then i think you need to add target =

"_blank" within <a href> tag like below in your HTL code.

<a href="${model.link}" target="_blank"/>

[Santhosh_Talepalle]

Hi @Hemendra ,

Thanks for the solution. Its working as expected now.

[Santhosh_Talepalle]

Hello @Subashree,

1) Have you tried mentioning the external domain in OSGI configs - Day Cq Link Externalizer.
Ex:- www.example.com. If you still get the issue, try using "context = 'uri' ", in the HTL href.

2) Check the console, if it is a cross-origin issue or not, if yes then check for "Adobe Granite Cross-Origin Resource Sharing Policy" OSGI config.
    - Add the necessary domains to the "Allowed Origins" field, specifying the domains that are     permitted to make cross-origin requests.

Hope this helps.