Custom Component -Configure Social Media Sharing | Community
Skip to main content
Level 2
January 5, 2024
Solved

Custom Component -Configure Social Media Sharing

  • January 5, 2024
  • 6 replies
  • 2187 views

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.

 

 

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 Hemendra

Hi @subashree-1 , 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"/>

 

6 replies

Shashi_Mulugu
Community Advisor
Community Advisor
January 5, 2024

@subashree-1 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-media-sharing-technical-video-use.md


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?

Level 2
January 5, 2024

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
Community Advisor
Community Advisor
January 5, 2024

@subashree-1 @ 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

 

 

aanchal-sikka
Community Advisor
Community Advisor
January 5, 2024

@subashree-1 

 

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-processing

 

Aanchal Sikka
TarunKumar
Community Advisor
Community Advisor
January 5, 2024

Hi @subashree-1 ,

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
Community Manager
Community Manager
January 8, 2024

@subashree-1  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
Hemendra
HemendraAccepted solution
Level 2
January 9, 2024

Hi @subashree-1 , 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
Level 2
January 9, 2024

Hi @hemendra ,

 

Thanks for the solution. Its working as expected now.

Santhosh_Talepalle
Level 2
January 9, 2024

Hello @subashree-1,

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.