HTML href variable value

Stalkium

Update : example of code at W3school tryit editor

In my webpage i have a feed of articles like 20, and under each one a Social Media Sharing Panel, to share each article, with code like this one :

<a href="http://www.facebook.com/sharer.php?u=HTTPURLTOSHARE">
  <i class="fab fa-facebook"></i>
</a>

So basically i have like several links like this for each social media service (let say 10, FB, TW, IG, etc) and the whole bunch for each article.
My question is : is there a way to write the SHARING DIV including all the sharing service links Once and for each article when clicked the share button just assign it's URL (HTTPURLTOSHARE) to the Social media sharing buttons, ?
I know it's possible server side but i am not familiar with front backend development.

mplungjan

This was not trivial

  1. I made a template
  2. I gave the popup links a data attribute with the URL of the article
  3. I insert the template content after each link

window.addEventListener("load",function() {
  [...document.querySelectorAll("a[data-url]")]
    .forEach((lnk,i) => {
      const url = lnk.dataset.url;
      const pop = document.getElementById("sharer").content.cloneNode(true)
      pop.querySelector('.overlay').setAttribute("id",lnk.hash.slice(1)); 
      [...pop.querySelectorAll(".social-square a")].forEach(lnk => lnk.href = lnk.href.replace("SHARE",url))
     lnk.after(pop)
    })
})
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"  />
<!-- FIRST ARCITLE -->
<h1>We must stop calling Trump’s enablers ‘conservative.’ They are the radical right.</h1>
<p>You hear the word “radical” a lot these days. It’s usually aimed like a lethal weapon at Democratic office-seekers, especially those who want to unseat a Republican incumbent. Sen. Kelly Loeffler, the Georgia Republican, rarely utters her challenger’s name without branding him as “radical liberal Raphael Warnock.”</p>
<a href="#popup1" data-url="https://www.washingtonpost.com/lifestyle/media/trump-enablers-radical-right-conservative/2021/01/04/634edcda-4e97-11eb-b96e-0e54447b23a1_story.html">Share this article</a>


<!-- SECOND ARTICLE -->
<h1>An Insurgency From Inside the Oval Office</h1>
<p>President Trump’s effort to overturn the election he lost has gone beyond mere venting of grievances at the risk of damaging the very American democracy he is charged with defending.</p>
<a href="#popup2" data-url="https://www.nytimes.com/2021/01/04/us/politics/trump-biden-inauguration.html">Share this article</a>


<template id="sharer">
<!-- HERE START THE SHARING MODAL WINDOW and it will be repeated for each article, Only the article URL change so this is why i want to find a way to write this code once and assign only the URL for each article if possible -->
<div id="" class="overlay">
    <div class="popup"><a class="close" href="#"><i class="fas fa-times-circle"></i></a>
        <div class="content">
            <div class="shr-div">
                <!-- Facebook -->
                <div class="social-square fac" data-content="facebook">
                    <a href="http://www.facebook.com/sharer.php?u=SHARE" target="_blank"><i class="fab fa-facebook-f"></i></a>
                </div>
                <!-- Twitter -->
                <div class="social-square twi" data-content="twitter">
                    <a href="https://twitter.com/share?url=SHARE" target="_blank"><i class="fab fa-twitter"></i></a>
                </div>
                <!-- WhatsApp -->
                <div class="social-square wha" data-content="whatsapp">
                    <a href="whatsapp://send?text=SHARE" target="_blank"><i class="fab fa-whatsapp"></i></a>
                </div>
                <!-- Viber -->
                <div class="social-square vib" data-content="viber">
                    <a href="viber://forward?text=SHARE" target="_blank"><i class="fab fa-viber"></i></a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END OF THE SHARE MODAL WINDOW -->
</template>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to use a variable in my <links> href path in html

jQuery - find anchor by href value using a variable

PHP - How to match href value from parsed HTML code with specific start word and end number inside href attribute value?

Splitting an href and putting the html into a variable

Getting href value in HTML without resolution of URL

HTML href as Google Apps Script variable

I can't bind [href] with my variable value

PHP Variable as HTML Link with PHP Function as HREF

Use PHP variable in href inside of html inside of php?

How to use a php variable in html a href code?

php: variable in the href, anomalous value

replace href value in dom variable

To get Value of $scope variable in HTML

Concatenate javascript variable with html to create href

Meaning of 'href = ' <? = variable ?>' on a HTML/PHP web page

insert js variable into html href tag

How to pass a Javascript variable to the NAME attribute of an HTML <a href> tag?

html options value with php variable

Dynamic variable value on HTML with Django

PHP - Variable value not printing as html

GTM - get href value inside custom html tag

changing value of flask variable in html

Get the href value using HTML5 data attributes

how to pass variable inside html href in the view in mvc

put link into href using javascript variable html

A href through $ variable javascript/html

How to get a value from inside an href in the HTML structure

HTML <a> href that points to another <a> href

Insert JSON data into HTML href tag (with placeholder variable)