Twitter分享按钮 - 来自变量的内容

时间:2015-10-03 14:46:10

标签: javascript html twitter

我将这些引号通过变量随机传递给段落,当一个新的引用"按钮被堵住了。

我希望用户能够在Twitter上分享当前加载的报价。 我尝试设置"数据文本"属性的值等于当前变量,但它似乎不起作用。 我的代码到目前为止: http://codepen.io/RycerzPegaza/pen/YypZza

// HTML //     

      

    <ul id="tweet"><a href="https://twitter.com/share" class="twitter-share-button" data-size="large" data-text="">share the quote</a></ul>

  <ul class="pager">
    <li onclick="randomquote()"><button type="button" class="btn btn-default"> a new qoute</button></li></ul></nav></div></div></body>

// JAVASCRIPT //

// Twitter script
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
//

// RANDOM BACKGROUND

randomcover = function(){
var covers = [];
covers[0] = " #222 url('http://i147.photobucket.com/albums/r293/VIEWLINER/REED/RFGF02.jpg~original') no-repeat center center fixed";
covers[1] = " #222 url('https://farm6.staticflickr.com/5255/5419581943_5826526eb4_o.jpg') no-repeat center center fixed";
covers[2] = " #222 url('http://www.splitshire.com/wp-content/uploads/2015/09/SplitShire-6272.jpg') no-repeat center center fixed"
 // FADE IN EFFECT 
  $("li").click(function() {
   var aCover = covers[Math.floor(Math.random()*covers.length)];
  $currImg = $("body").css({background:aCover})
  });
};
// QUOTE MACHINE
randomquote = function() {
  var quotesArray = [];
quotesArray[0] = "One day I will find the right words, and they will be simple. <br> ― Jack Kerouac, The Dharma Bums";
quotesArray[1] = "Live, travel, adventure, bless, and don't be sorry. <br> ― Jack Kerouac";
quotesArray[2] = "My fault, my failure, is not in the passions I have, but in my lack of control of them. <br> ― Jack Kerouac";
quotesArray[3] = "the only people for me are the mad ones, the ones who are mad to live, mad to talk, mad to be saved, desirous of everything at the same time, the ones who never yawn or say a commonplace thing, but burn, burn, burn like fabulous yellow roman candles exploding like spiders across the stars. <br> ― Jack Kerouac";
quotesArray[4] = "The only truth is music. <br> ― Jack Kerouac";
quotesArray[5] = "The best teacher is experience and not through someone's distorted point of view. <br> ― Jack Kerouac";
quotesArray[6] = "Great things are not accomplished by those who yield to trends and fads and popular opinion. <br> ― Jack Kerouac"; 
quotesArray[7] = "Don't use the phone. People are never ready to answer it. Use poetry. <br> ― Jack Kerouac";
quotesArray[8] = "Will you love me in December as you do in May?<br> ― Jack Kerouac";
quotesArray[9] = "My witness is the empty sky. <br> ― Jack Kerouac";
quotesArray[10] = "Maybe that's what life is... a wink of the eye and winking stars. <br> - Jack Kerouac";
quotesArray[11] = "All human beings are also dream beings. Dreaming ties all mankind together. <br> -- Jack Kerouac";
quotesArray[12] = "Forgive everyone for your own sins and be sure to tell them you love them which you do. <br> - Jack Kerouac";
  quotesArray[13] = "Because in the end, you won’t remember the time you spent working in the office or moving your lawn. Climb that goddamn mountain. <br> - Jack Kerouac";
  quotesArray[14] = "So therefore I dedicate myself, to my art, my sleep, my dreams, my labours, my suffrances, my loneliness, my unique madness, my endless absorption and hunger because I cannot dedicate myself to any fellow being. <br> - Jack Kerouac";
  quotesArray[15] = "Never Say a Commonplace Thing. <br> - Jack Kerouac";

 var newquote = quotesArray[Math.floor((Math.random()*15))];
      document.getElementById('content').innerHTML = newquote;
      document.querySelector(".twitter-share-button")[0].setAttribute("data-text", newquote);
    };

2 个答案:

答案 0 :(得分:0)

我从来没有使用过Twitter API,但是如果你在加载页面并运行twitter js之后动态更新它,那么我认为each方法无法正常工作。我会尝试使用Web Intents方法(参见页面底部),这意味着您可以在twitter共享网址中添加data-text的查询参数。一定要对文本进行url编码。每当报价发生变化时,您都需要更新text代码的href。

答案 1 :(得分:0)

网络意图代码不起作用。

使用整个代码链接到codepen:http://codepen.io/RycerzPegaza/pen/NGpEGp

<a href="https://twitter.com/share?
      url=https%3A%2F%2Fdev.twitter.com%2Fweb%2Ftweet-button&
      via=twitterdev&
      related=twitterapi%2Ctwitter&
      hashtags=example%2Cdemo&
      text=custom%20share%20text">
    Tweet
    </a>

我尝试通过动态更改iframe src并将引号编码到url(为空格添加%20)来使用iframe,但它也不起作用:

// HTML //

    <iframe
 src="https://platform.twitter.com/widgets/tweet_button.html?size=l&text=custom%20share"
  width="140"
  height="100"
  title="Twitter Tweet Button"
  style="border: 0; overflow: hidden;">
</iframe>

// JS //

    // QUOTE MACHINE
randomquote = function() {
  var quotesArray = [];
quotesArray[0] = "One day I will find the right words, and they will be simple. <br> ― Jack Kerouac, The Dharma Bums";
quotesArray[1] = "Live, travel, adventure, bless, and don't be sorry. <br> ― Jack Kerouac";
quotesArray[2] = "My fault, my failure, is not in the passions I have, but in my lack of control of them. <br> ― Jack Kerouac";
quotesArray[3] = "the only people for me are the mad ones, the ones who are mad to live, mad to talk, mad to be saved, desirous of everything at the same time, the ones who never yawn or say a commonplace thing, but burn, burn, burn like fabulous yellow roman candles exploding like spiders across the stars. <br> ― Jack Kerouac";
quotesArray[4] = "The only truth is music. <br> ― Jack Kerouac";
quotesArray[5] = "The best teacher is experience and not through someone's distorted point of view. <br> ― Jack Kerouac";
quotesArray[6] = "Great things are not accomplished by those who yield to trends and fads and popular opinion. <br> ― Jack Kerouac"; 
quotesArray[7] = "Don't use the phone. People are never ready to answer it. Use poetry. <br> ― Jack Kerouac";
quotesArray[8] = "Will you love me in December as you do in May?<br> ― Jack Kerouac";
quotesArray[9] = "My witness is the empty sky. <br> ― Jack Kerouac";
quotesArray[10] = "Maybe that's what life is... a wink of the eye and winking stars. <br> - Jack Kerouac";
quotesArray[11] = "All human beings are also dream beings. Dreaming ties all mankind together. <br> -- Jack Kerouac";
quotesArray[12] = "Forgive everyone for your own sins and be sure to tell them you love them which you do. <br> - Jack Kerouac";
  quotesArray[13] = "Because in the end, you won’t remember the time you spent working in the office or moving your lawn. Climb that goddamn mountain. <br> - Jack Kerouac";
  quotesArray[14] = "So therefore I dedicate myself, to my art, my sleep, my dreams, my labours, my suffrances, my loneliness, my unique madness, my endless absorption and hunger because I cannot dedicate myself to any fellow being. <br> - Jack Kerouac";
  quotesArray[15] = "Never Say a Commonplace Thing. <br> - Jack Kerouac";
  var newquote = quotesArray[Math.floor((Math.random()*15))];
  document.getElementById('content').innerHTML = newquote;

  var newquote = str.split("%20");
  document.getElementsByTagName("iframe")[0].setAttribute("src", "https://platform.twitter.com/widgets/tweet_button.html?size=l&text=" + newquote);

};