using Tweet button - link doesn't appear in tweet text at all

Question

My working code here correctly put the Tweet button on the page and allows the user to preview the tweet then commit it:

<a href="https://twitter.com/share" class="twitter-share-button" 
    data-text="Check out this URL! "
    data-url="www.OurSite.com/UX1ab7"
    data-via="OurSite" data-size="large" data-count="none">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0]; 
    if(!d.getElementById(id)) {
        js=d.createElement(s); js.id=id; 
        js.src="//platform.twitter.com/widgets.js";
        fjs.parentNode.insertBefore(js,fjs);}
    }
    (document,"script", "twitter-wjs");
</script>

If you recall (have a look at your own Tweets for example) you can paste into your tweet a functioning link - a link that one of your Twitter followers, upon reading your tweet, will notice

   'hey, I see an embedded URL here in this tweet -- I can tell it's a link 
    because it looks like a URL and its text color is a different color from 
    the other text in the tweet.  Here let me click on that url in the tweet
    and -- HEY it works, that blue-colored text IS a link, I just jumped to www.xyx.com.'

I was under the impression that in my code above the 'data-url' setting was supposed to make a visible, specially-colored link url appear right in the body of the tweet. Well it doesn't in my case.

In my code above, data-url="www.OurSite.com/UX1ab7" is not even visible in the Tweet at all. And changing the 'data-text' to

   data-text="Check out this URL! www.OurSite.com/UX1ab7"

The tweet generated by the code above is: Check out this URL! www.OurSite.com/UX1ab7

but even though the 'www.OurSite.com/UX1ab7' URL appears within the tweet -- it's not a link, just text, and has the same text color as the rest of the tweet.

The www.OurSite.com/UX1ab7 text in the tweet above does not

• look like a click-able link

• act like a click-able link

It's just text.

How do I get the Tweet button to display a click-able URL link with the Tweet button? I thought the 'data-url' would make the link visible and clickable but it does not.

Answer 1

When you're tweeting, is it from a specific page? i.e. a blog post or information article? If so, I believe you can leave the data-url option out and it should pull in the URL from the address bar.

This is the code that we use for tweets

<a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-size="large" data-count="none">Tweet</a>

Which will pull down the page title (which you can define with the data-text tag) and the URL of the page you are currently on, so will give you something like

{{Title of Page or Title defined by data-text}} 
{{http://oursite.com/url_of_page_i_am_on}}

Answer 2

It's probably because the link you're sharing is not accessible to the public. It doesn't work with local/development domains.

Edit:

Correction. It wasn't working for me because I was using a relative url ('/blog' rather than 'https://mysite.com/blog').