I’ve made it to the last step of this and I’m a bit stumped on how to edit the content of my tweet.
I’m using the syntax from dev.twitter for HTML: https://dev.twitter.com/web/tweet-button/parameters
And I’m trying to edit one of the attributes on HTML line 14 using the .attr() method in JS 12 So I can get the content of the quote into the tweet. I’m not sure what I’m doing wrong here.
I can’t seem to get it right using the docs you referred to. The text just won’t appear.
Try this instead:
(Off-topic) I also get this error:
TypeError: $.load is not a function
Maybe you meant something like
$('document').ready(getQuote);
Thank you for reminding me about the .ready().
I forgot to the mention that the tweet button only works when you preview the project in an external window (ex: debug view) for some reason. But after changing the href to what you suggested, it works in any view.
Regarding including the quote in the tweet, I’m still not sure what method I should take to make that happen. I’ll keep at it for a bit. I still understand the principle, at least.
First of all you have two class attributes in your Tween button and it’s messing it up. Fix that.
Secondy, you need to pass data-url="null" in order to stop twitter from grabbing the referer url.
Thirdly, if you saw the code in devtools, twitter actually creates an iframe for the tweet, you can’t just do $('#tweet').attr('text', 'new text') . You have to recreate the button and call twttr.widgets.load() for the widget to reload.
(keep in mind, all this will work with the oringal href="https://twitter.com/share")
This is so much work though that it really doesnt’t worth it. @kevcomedia’s solution is so much easier and faster to implement.
I see how having the two class attributes is making things worse now. But I’m still not sure what to do in the long run because when I put the .btn and .twitter-share-button class together, the css for .btn seems to override my #tweet even if I use !important or make the #tweet selector more specific. Is there a way for me to fix this without removing Bootstrap?
I understand your other two points now. But I guess I don’t understand @kevcomedia’s solution. Are you saying I should use href="https://twitter.com/tweet?text=newtext?" That is a lot less code, but it leaves me with the same question on how to pass in the post.content and post.author.
You have to understand how the widget works. Your button is completely hidden from the view. widget.js hides it and replaces it with an iframe instead. So you can’t style it AFAIK.
With the other solution, you don’t even need to use the widget, you just build a url like this:
$('#tweet').attr('href', 'https://twitter.com/intent/tweet?text="' + YOUR_TWEET_TEXT_HERE + '");
See? You build a URL and just pass parameteres. All the related parameters are in the link above. What is more, you can now style your button however you want 
Notice: I think you’ll need to use target="_blank" to your link in order to work properly.
1 Like
AH! Thank you so much. 