HTML href variable value

Question

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.

You know what ! for me it is not a problem to repeat the bunch of line for each sharing div which is approximately perhaps 100 lines for each article, because it will be done automatically via a desktop windows application i give him only the article link and he fetch infos then inject code for each article into the page, My problem is i end with like 5000 lines of code for 50 articles in one webpage, i think this will affect the page load ??? — Stalkium, Jan 04 '21 at 19:09

mplungjan · Accepted Answer · 2021-01-05T07:20:30.570

This was not trivial

I made a template
I gave the popup links a data attribute with the URL of the article
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>

I didn't get it right now, i posted an update for my code link on tryiteditor — Stalkium, Jan 04 '21 at 19:06
i just tried now and it works but you said i must replicate the template under each article link ??? i just used your example with one template and it works ok !!! — Stalkium, Jan 04 '21 at 20:13
Everything is fine, It just does what it supposed, thanks a lot. answer accepted — Stalkium, Jan 04 '21 at 20:15
One template - the link comes from the popup link’s data attribute — mplungjan, Jan 04 '21 at 21:11
I improved the code to take the overlay ID from the link that opens it `pop.querySelector('.overlay').setAttribute("id",lnk.hash.slice(1));` — mplungjan, Jan 05 '21 at 07:21

score 0 · Answer 2 · answered Jan 04 '21 at 18:56

0

I think you will need to make (http calls) to the socials feeds to fetch the article details (including the links) and then once you have the data you can consolidate & render the links in your page.

answered Jan 04 '21 at 18:56

Caroline D.

119
3

This is really a comment, not an answer. With a bit more rep, [you will be able to post comments](//stackoverflow.com/privileges/comment). – mplungjan Jan 04 '21 at 18:57
Yes its a comment but I can't add one, as you rightly pointed out. With your suggested approach all the social links will be rendered and then consolidated & re-rendered using js .. – Caroline D. Jan 04 '21 at 19:04
No because the articles are already fetched by a windows based application and injected to the webpage directly, with their URL , description, date and OG image, – Stalkium Jan 04 '21 at 19:05
So you already have all the data, then it's should be even more straight forward .. – Caroline D. Jan 04 '21 at 19:07
@CarolineD. i created a windows software where i select the articles give him URL only it fetch them (Title, Description, OG image, Link etc.) and create the HTML code for each article including the 100 lines code for the Share DIV element under each article, i end up with 5000 or more lines for one page, that's the problem – Stalkium Jan 04 '21 at 19:12
in that case you really shouldn't have to create html manually .. you can keep the data in json or CSV and then generate the html using javascript .. are you able to make a jsfiddle to replicate your problem .. it would be much easier to help. – Caroline D. Jan 04 '21 at 19:18
@CarolineD. https://www.w3schools.com/code/tryit.asp?filename=GMC05M4QVY8T – Stalkium Jan 04 '21 at 20:06
Have a look at this https://jsfiddle.net/z30n2qsv/7/ this will give you the idea .. might be worth using the template alongside this as mentioned by mplungjan – Caroline D. Jan 04 '21 at 20:43

HTML href variable value

2 Answers2