3

我在一个应用程序上使用 Meteor 的accounts-ui包，accounts-twitter该应用程序由带有数据库内容的缩略图组成。每个缩略图还有一个推文分享按钮。我面临一个特殊的问题，即当用户登录或退出应用程序时，推文按钮不会呈现。

在页面加载时，tweet 按钮呈现良好，但是当用户单击登录或注销时，元素消失或样式消失并只留下文本。

登录或注销时没有事件处理代码。我在这里添加了要点。

是否与页面不刷新有关？以前是否注意到过这种行为？

4

5 回答 5

3

twitter 加载的 js 代码将推文按钮转换为 iframe。我通过在检查器中查看生成的 iframe 然后更改我的代码来解决这个问题，因此我在检查器中找到了一个带有 URL 的 iframe 标记，而不是具有数据属性的锚标记。它也有一个模式，所以你应该能够制作一个模板来呈现具有不同 url 的不同按钮。

我认为按照你现在的方式（我一开始也是这样做的）这样做的问题是，将推文按钮转换为 iframe 的 twitter 代码只运行一次，即使你多次加载脚本. 因此，如果您在 twitter 代码已经运行后创建一个 tweet 标签，它不会被转换为 iframe，也不会工作或看起来像一个 tweet 按钮。

于 2013-03-09T19:06:31.870 回答
2

尝试更换使用rendered

Template.twitter.rendered = function() {
  return !function(d,s,id) {
           var js,fjs = d.getElementsByTagName(s)[0];
           if(!d.getElementById(id)){
             js=d.createElement(s);
             js.id=id;
             js.src="http://platform.twitter.com/widgets.js";
             fjs.parentNode.insertBefore(js,fjs);
           }
   }(document,"script","twitter-wjs");
}

不要担心多次重新渲染添加 twitter 的 api 脚本，那里有一个检查以允许它运行多次并且只有在它的 js 被删除时才起作用。

我怀疑重新渲染（在注销/更改反应变量时）正在破坏由 js 为该共享按钮的 twitter api 创建的 css 链接。

于 2013-03-09T07:26:52.453 回答
1

根据@zorlak 的回答，这就是我所做的：

HTML：

<template name="listings">
  {{twitter "@MeteorAtSO"}}
</template>


<template name="twitter">
  <iframe allowtransparency="true" frameborder="0" scrolling="no" 
     src="http://platform.twitter.com/widgets/tweet_button.1362636220.html#_=1363023601135&amp;
       count=none&amp;id=twitter-widget-0&amp;
       lang=en&amp;original_referer=http://localhost:3000&amp;
       text=Check out {{this}}!&amp;
       url=http://localhost:3000"&amp;size=m 
     class="twitter-share-button twitter-count-none" 
     style="width: 58px; height: 20px;" 
     title="Twitter Tweet Button" 
     data-twttr-rendered="true">
  </iframe>
</template>

Javascript：

Template.twitter.rendered = function() {
  return !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");
}

结果非常好！

于 2013-03-12T09:41:28.763 回答
0

只是为了建立这里的解决方案，您可以使用以下内容进一步自定义您的可共享按钮

Template.listings.twitterDetails = function() {
    return {
        text: "What do you want to say?"
        , url: "what link do you want to share?"
        , referer: "yoursite.com"
        , id: Random.id()
    };
};

和

{{#with twitterDetails}}
    {{>twitter}}
{{/with}}

和

<template name="twitter">
  <iframe allowtransparency="true" frameborder="0" scrolling="no" 
    src="http://platform.twitter.com/widgets/tweet_button.{{id}}.html#_={{id}}&count=none&id=twitter-widget-0&lang=en&original_referer={{referer}}&text={{text}}&url={{url}}&size=l"
     class="twitter-share-button twitter-count-none" 
     style="width: 77px; height: 28px;" 
     title="Twitter Tweet Button" 
     data-twttr-rendered="true">
  </iframe>
</template>
于 2013-05-31T00:53:29.200 回答
0

我已经设法在没有“iframe”的情况下显示 twitter 按钮，方法如下：../twitter-buttons-in-meteor.html

于 2013-06-04T09:13:25.763 回答