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.
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}}