Web Intents Tweet Button - Link Only, no button?

[JustForTwitter]

I am trying to create a “tweet” button that looks like a proper button (not just the word “tweet” as a hyperlink) that will share the currently displayed text from the page, hashtags, etc. I thought this would be straightforward, but I have read the documentation at least 20 times and I am as confused as ever.

I go to dev.twitter.com, and down the menu on the left, choose “Twitter for Websites”, then “Tweet Button.” According to those instructions, all I have to do is add the “twitter-share-button” class, the href attribute, data-size=“large”, etc., and done.

But if I stop there, I only have the text link, no button. I did include the <script> link to https://platform.twitter.com/widgets.js at the top, right after my bootstrap css and javascript source links. It renders the same in Firefox and Chrome, and I have have never installed ad blocking in Chrome.

I did find, on publish.twitter.com, a markup generator, that looked very promising, and shows you what looks like a template with a proper button and says “here you go, just copy this code and paste it right into your html” but no, it’s the same exact thing as before, and it just gives you the text with hyperlink. Disappointing.

So, then I’m led into the circular labyrinth of “For best performance and reliability, include the widgets.js script in your template.” I’m learning JavaScript, not a professional. I cannot, to save my life, figure out how to use this. Am I supposed to be able to copy and paste this widget code and use it straight out of the box? (I tried, it seems to do nothing.) Do I need to include all the snippets on all of the widgets pages (Setup, Loading and Initialization, Factory Functions, Events)? Is this why the button won’t render? The whole “performance and reliability” part made me think, at first, that it was optional, but maybe it’s not?

At this point, I would be happy to just find an image of a button and use an <img src="twitter.com/tweet.png"> I mean wouldn’t that be so much simpler than all this scripting, since I don’t need any other options right now.

Thanks in advance

[benward]

Hi!

Can you link us to a page where you’re trying to make this work? If you just include the <script> tag — the code you copy and paste from publish.twitter.com — it should do all the magic for you, but sometimes some content management systems strip out that script. If we can see a page where you’re struggling to make it work, we can help you figure it out.

Thanks,

Ben

[JustForTwitter]

Hi,

I cannot give you a link, because it’s not published anywhere. I’m just building the site on my laptop, and it won’t even work locally on my own system. I can give you the github link however: https://github.com/I-keep-trying/fccRandomQuote. As you may find out, I did end up just using a link to an image of the twitter bird, which I actually kind of like, it’s a bit minimalistic although it’s rather large, but it’s better than the stupid text link. But I really want to know how the web intents is supposed to work properly. I know a lot of other students doing this same project have had / are having the same trouble.

Do you know of any web sites doing this successfully? Just a “tweet” button that grabs a bit of text from the site and includes it in the text? Maybe I could snoop around in their code and see how they do it.

[andypiper]

Sorry you got so frustrated by this!

I just sent you a pull request with an updated version of your page.

To do this, I:

• used publish.twitter.com to create and customise the button to my liking (that also gave me the relevant data-* attributes I needed to append the final text into for the anchor tag)
• uncommented the code where you’d been (correctly) pulling the script in, so that it was ready for your function to use it
• added a line which handles calling twttr.widgets.load() scoped to the correct div on your page which contained the new button, causing it to be drawn properly.

I hope that is helpful - apologies if you were confused by how our widgets work.

One more thing - I’ve edited your last response, as we strive for civil and appropriate discussion here on our developer forums. I can totally recognise your frustration, but it is not helpful to post that sort of thing here. Thank you for your understanding.

[JustForTwitter]

OK, so sorry if I offended, that was not my intention!

Thank you so much for your speedy responses and help. I honestly am blown away by how quickly you guys have responded and provided actual real answers to my questions! I’m going to share this with my fellow learners.

Truly appreciated.

[system]

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.