Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

Custom Component -Configure Social Media Sharing

Avatar

Level 2

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.

Subashree_2-1704457995881.png

Subashree_3-1704458002563.png

 

 

1 Accepted Solution

Avatar

Correct answer by
Level 2

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

 

View solution in original post

11 Replies

Avatar

Community Advisor

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

Avatar

Level 2

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">
Subashree_0-1704462014636.png

Kindly guide me on how to proceed.

Avatar

Community Advisor

@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

 

 

Avatar

Level 2

Hi @Shashi_Mulugu ,

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

Subashree_0-1704720431150.png

 

Subashree_1-1704720581571.png

 

Avatar

Community Advisor

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

Avatar

Community Advisor

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

 


Aanchal Sikka

Avatar

Community Advisor

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

Avatar

Administrator

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



Kautuk Sahni

Avatar

Correct answer by
Level 2

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

 

Avatar

Level 3

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.