Twitter Share Button not showing up in Website

Viewed 324

I've been following Twitter's official instructions here on how to embed a Tweet button in my website - but it's not working. Their button is just not showing up.

I do not have any sort of ad blocker installed in my browser so I know that's not the problem.

Here's my code:

<div id="congratsDIV">
    
    <h2 style="color: blue;">Congratulations!</h2>
    <br/>
    <br/>
    Tell the World!
    <br/>

    <a class="twitter-share-button" href="https://twitter.com/intent/tweet?text=This%20is%20awesome" data-size="large">Tweet this!</a>

    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

    <br/>
</div>

Note that I initially placed the <script async src= ... > code in the <head> section of the HTML file - but that didn't work either.

Next, I manually downloaded one of their Tweet buttons and tried to forcibly hard-code it into the document right after the <a href=" ..." tag - as follows:

    <a href="https://twitter.com/intent/tweet?text=Very%20Cool%20Indeed&ref_src=twsrc%5Etfw"  class="twitter-mention-button" data-show-count="false">
      <img src="/images/TweetButton-93x30.png" width="93" height="30" />
      Tweet about this moment!
    </a>

...but even that didn't work. The button is just not showing up no matter what I do.

What's going on here? Any ideas on how to fix this?

2 Answers

Try this

<script type="text/javascript" async src="//platform.twitter.com/widgets.js"></script>

I was able to get a Tweet button using this code:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<a class="twitter-share-button" href="https://twitter.com/intent/tweet?text=Hello%20world" data-size="large">Tweet</a>


<script>window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);

  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };

  return t;
}(document, "script", "twitter-wjs"));
</script>

</body>
</html>

Creating a button by simply making it a link wasn't enough, so I was able to take their javascript from here.

Related