CODEWITHSUNDEEP
javascripthtmlcss
Eilert Rørslett Løvenskiold
Eilert Rørslett Løvenskiold

Reputation: 3

I can`t figure out why my social media share links don`t work

I am making a simple wbsite that generates random quotes/facts when the user clicks a button. recently I tried to add links that will copy said quotes/facts into Facebook or Twitter, so that the user can share them. The thing is that the links do not seem to work and I have tried my best to figure out why, but am out if ideas. I would gladly apperciate some help

function clicked() {
    //Her er banken med sitatene
    let quotes = ["Test 1", "Test 2", "Test 3", ];
    // Denne velger ut et tilfeldig sitat
    let quotes_random = quotes[Math.floor(Math.random() * quotes.length)]; //let = quotes[Math.floor(Math.random() * quotes.length)];
    // Denne omgjør det tilfeldige sitatet til HTML
    document.getElementById("output").innerHTML = quotes_random; //document.getElementByID("output").innerHTML = quotes_random;
  }

  // Social media:

  setShareLinks();

function socialWindow(url) {
  var left = (screen.width - 570) / 2;
  var top = (screen.height - 570) / 2;
  var params = "menubar=no,toolbar=no,status=no,width=570,height=570,top=" + top + ",left=" + left;
  window.open(url,"NewWindow",params);
}

function setShareLinks() {
  var pageUrl = encodeURIComponent(document.URL);
  var tweet = encodeURIComponent($("meta[property='og:description']").attr("content"));

  $(".social-share.facebook").on("click", function() {
    url = "https://www.facebook.com/sharer.php?u=" + pageUrl;
    socialWindow(url);
  });

  $(".social-share.twitter").on("click", function() {
    url = "https://twitter.com/intent/tweet?url=" + pageUrl + "&text=" + tweet;
    socialWindow(url);
 
  })
}
body {
    background-image: url(media/90s_bakgrunn_til_nettside.jpg);
    background-position: center;
    
}


#container {
    height: 275px;
    width: 750px;
    margin: 0 auto;
    border: 5px solid #673B90;
    text-align: center;
    background-color:#F5A01F;
    position: relative;
    top: 300px;
    align-self: center;




}


#btn {
    background-color: #fdfb76;
    border: none;
    outline: none;
    margin: 50px auto;
    height: 50px;
    width: 250px;
    font-size: 22px;
    position: relative;
    top: 250px;
    align-self: center;
}

#btn:hover {
    cursor: pointer;
    cursor: hand;
    background-color: #e10086;
}



#output {
    margin: 25px auto;
    font-size: 26px;
    color: white;
    text-align: center;
    position: relative;
    bottom: -120px;
    align-self: center;

}

/* Social media*/

body {
    width: 95%;
    max-width: 700px;
    font-family: tahoma, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    padding: 0 10px 20px 10px;
    margin: 0 auto 0 auto;
  }
  
  h1 {
    font-size: 24px;
    text-align: center;
  }
  
  h1 span {
    display: block;
    font-size: 18px;
    font-weight: normal;
  }
  
  
  .links li {
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    cursor: hand;
    color: yellow;
  }
  
  .links li:hover {
    text-decoration: underline;
  }
  
<!DOCTYPE html>
<html>
<head>
    <title></title>

<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initialscale=1">

<div class="links">
    <ul>
      <li class="social-share facebook">Facebook</li>
      <li class="social-share twitter">Twitter</li>
    </ul>
  </div>
  


</head>
<body>

        
    <div id="container">
        <button onclick="clicked()" id="btn">Trykk her for et visdomord</button>
      </div>
      
      
      <p id="output">Generer et visdomsord ved å trykke på knappen</p>

     <script src="main.js"></script>

Upvotes: 0

Views: 87

Answers (1)

Iman
Iman

Reputation: 581

just add jquery by:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

just in snippet not working. here the link of jsfiddle

function clicked() {
    //Her er banken med sitatene
    let quotes = ["Test 1", "Test 2", "Test 3", ];
    // Denne velger ut et tilfeldig sitat
    let quotes_random = quotes[Math.floor(Math.random() * quotes.length)]; //let = quotes[Math.floor(Math.random() * quotes.length)];
    // Denne omgjør det tilfeldige sitatet til HTML
    document.getElementById("output").innerHTML = quotes_random; //document.getElementByID("output").innerHTML = quotes_random;
  }

  // Social media:

  setShareLinks();

function socialWindow(url) {
  var left = (screen.width - 570) / 2;
  var top = (screen.height - 570) / 2;
  var params = "menubar=no,toolbar=no,status=no,width=570,height=570,top=" + top + ",left=" + left;
  window.open(url,"NewWindow",params);
}

function setShareLinks() {
  var pageUrl = encodeURIComponent(document.URL);
  var tweet = encodeURIComponent($("meta[property='og:description']").attr("content"));

  $(".facebook").on("click", function() {
    url = "https://www.facebook.com/sharer.php?u=" + pageUrl;
    socialWindow(url);
  });

  $(".twitter").on("click", function() {
    url = "https://twitter.com/intent/tweet?url=" + pageUrl + "&text=" + tweet;
    socialWindow(url);
 
  })
}
body {
    background-image: url(media/90s_bakgrunn_til_nettside.jpg);
    background-position: center;
    
}


#container {
    height: 275px;
    width: 750px;
    margin: 0 auto;
    border: 5px solid #673B90;
    text-align: center;
    background-color:#F5A01F;
    position: relative;
    top: 300px;
    align-self: center;




}


#btn {
    background-color: #fdfb76;
    border: none;
    outline: none;
    margin: 50px auto;
    height: 50px;
    width: 250px;
    font-size: 22px;
    position: relative;
    top: 250px;
    align-self: center;
}

#btn:hover {
    cursor: pointer;
    cursor: hand;
    background-color: #e10086;
}



#output {
    margin: 25px auto;
    font-size: 26px;
    color: white;
    text-align: center;
    position: relative;
    bottom: -120px;
    align-self: center;

}

/* Social media*/

body {
    width: 95%;
    max-width: 700px;
    font-family: tahoma, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    padding: 0 10px 20px 10px;
    margin: 0 auto 0 auto;
  }
  
  h1 {
    font-size: 24px;
    text-align: center;
  }
  
  h1 span {
    display: block;
    font-size: 18px;
    font-weight: normal;
  }
  
  
  .links li {
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    cursor: hand;
    color: yellow;
  }
  
  .links li:hover {
    text-decoration: underline;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title></title>

<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initialscale=1">

<div class="links">
    <ul>
      <li class="social-share facebook">Facebook</li>
      <li class="social-share twitter">Twitter</li>
    </ul>
  </div>
  


</head>
<body>

        
    <div id="container">
        <button onclick="clicked()" id="btn">Trykk her for et visdomord</button>
      </div>
      
      
      <p id="output">Generer et visdomsord ved å trykke på knappen</p>

     <script src="main.js"></script>

Upvotes: 1

Related Questions