Quote Machine Project - Changing the value of the Twitter text with Jquery

JavaScript
1

Hi everyone,
In the Quote Machine project I’m trying to change the content of the text field of the tweet after clicking the “next quote” button, but I fail to do so. The text field of the tweet is controlled with the data-text attribute. I found a few functions to change the attribute value, but failed to succeed until now. Can you find my mistake? Any suggestions?
Thanks in advance.
Ben

1 Like
2

It seems like it’s actually working, but not the way you expect it to. The button has been created with the text you set in the HTML

Screenshot 2017-01-10 08.31.39.png1176×220 74 KB

I think you have to create a new button with every quote. The docs describe a factory function. Try using something like this in your button’s click handler:

twttr.widgets.createShareButton(
  "https:\/\/dev.twitter.com\/web\/tweet-button",
  document.getElementById("tweet-container"), // <-- set this to your twitter button's id
  {
    size: "large",
    text: "custom share text", // <-- this should be your quote
    hashtags: "example,demo",
    via: "twitterdev",
    related: "twitterapi,twitter"
  }
);
3

Thanks!
I’m a beginner, and I don’t completely understand the screenshot you presented. I opened the page in developers mode, and found the code in the screenshot. I recognize the <blockquote> and <button id="nextQuote...> elements. But then there is the <iframe ...>. I understand this element was created from the HTML :
<a href="https://twitter.com/share" class="twitter-share-button pull-right" data-show-count="false" data-text='"The purpose of our lives is to be happy."'>Tweet</a><script async src="//platform.twitter.com/widgets.js" charset="utf-8">

and JS
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"));

I don’t understand how the Twitter code works. I copied it from their documentation, and I especially don’t understand this part:
window.twttr = (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {};...
What kind of structure is this `window.twttr=(function(parameters){…})?

Thanks in advance!
Ben

4

It’s just object assignment.

var user = { name: "PortableStick", status: "Quite handsome"}

//... later
user.status = "Just woke up. Grumpasaur!"; //changing object property values
user.level = 10; //add new object property

window is the global object in the browser environment. Don’'t worry too much about the particulars of why or what because that code doesn’t really matter much. If you’re lost with the code you have so far, I recommend deleting everything Twitter related and go with their web intent API instead. This is much simpler than what you’re trying to do Example:

<a href="https://twitter.com/intent/tweet?text=the%20revolution%20will%20be%20tweeted">Tweet this quote</a>

What you’ll want to do is change that href attribute every time someone gets a new quote. You’ll need one more tool to do this: encodeUIRComponent().

5

Thanks!

  1. However I understand object assignment, and the examples you gave. What I don’t understand is this:
    something = (.......)
    What we assign to windows.twttr is all in parentheses.
  2. The second issue is that the clicking the “next quote” does not seem to change the value of the text in the tweet. However, the tweet button works fine, so I see no reason to change to Web intent, especially since it uses the same complicated Javascript code. Anyway the real challenge is how to change the content of the tweet when someone clicks the “Next Quote” button. The reason this might fail is that the tweet element is not a regular element, but is altered by the twitter Javascript widget function. Therefor, we probably have to find a way to work with that function in order to alter the content of the tweet.
    Feedback on this quite complicated issue?
    Thanks in advance!
    Ben Carp
6

It’s an imediately invoked function expression, or iife (pronounced “iffy”). I recently gave an example of its use here.

No, it doesn’t, which is why I recommended “deleting everything Twitter related” and going with web intent. The anchor tag example I gave is fully functional.

Yes. I told you exactly how to do this in the last sentence of my last post. If you are dead set on using the widget, the factory function code I showed you should be all you need.

7

Hi Portable Stick,
Needless to say - Thanks! I really appreciate your answers!

From my experiement if the anchor element is used by itself it is simply a link and does not work. So it needs the twitter Widget JS [quote=“carpben, post:3, topic:74927”]
JS
window.twttr = (function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
[/quote]
…
Am I missing anything?

8

I copypasted my example from above into a new pen. The only thing I added was the target attribute.

1 Like
9

I understand. Should I simply put it in the click handler, or should I put it in the anchor element selector?

1 Like
10

It needs to go in your quote button’s handler. Also keep in mind that by using the factory function (not the best solution), you’ll need to delete the previous button in the same click handler.

11

THANKS !!!
I used the web intent anchor u suggested and completed the task. http://codepen.io/bencarp/pen/ygYZro,

2 Likes
12

Thank you for you brilliant idea i was using react to build the random app you solved easy way…wow thanks

 const str=this.state.qutesAndAuther[this.state.num].Quotes
  const str1="https://twitter.com/intent/tweet?text=";
     window.open(str1+str)