Custom Component -Configure Social Media Sharing | Community
Skip to main content
S
Subashree-1
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
    Shashi_MuluguCommunity 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?

      S
      Subashree-1Author
      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
        Shashi_MuluguCommunity 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
          aanchal-sikkaCommunity 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
            TarunKumarCommunity 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
              kautuk_sahniCommunity 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
                  Santhosh_Talepalle
                  Level 2
                  January 9, 2024

                  Hi @hemendra ,

                   

                  Thanks for the solution. Its working as expected now.

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

                      Terms & ConditionsAccessibility statement

                      Loading footer...