3

データベースのコンテンツを含むサムネイルで構成されるアプリでMeteor のaccounts-uiパッケージを使用しています。accounts-twitter各サムネイルにはツイート共有ボタンもあります。ユーザーがアプリにログインまたはログアウトしたときに、ツイート ボタンがレンダリングされないという特有の問題に直面しています。

ページの読み込み時にツイート ボタンは適切にレンダリングされますが、ユーザーがログインまたはログアウトをクリックすると、要素が消えるか、スタイルが消えてテキストだけが残ります。

ログインまたはログアウト時のイベント処理コードはありません。ここに要点を追加しました。

ページが更新されないことと何か関係がありますか? この動作は以前に注目されていましたか?

4

5 に答える 5

3

Twitter が読み込む js コードは、ツイート ボタンを iframe に変換します。インスペクターで生成された iframe を確認し、コードを変更して、データ属性を持つアンカー タグの代わりに、インスペクターで見つけた URL を持つ iframe タグがあるようにすることで、これを回避しました。それにもパターンがあるので、異なる URL で異なるボタンをレンダリングするテンプレートを作成できるはずです。

あなたが今やっている方法（私が最初にやった方法でもありました）の問題は、スクリプトを複数回ロードしても、ツイートボタンをiframeに変換するTwitterコードが1回しか実行されないことだと思います. そのため、Twitter コードが既に実行された後にツイート タグを作成すると、iframe に変換されず、機能しないか、ツイート ボタンのように見えません。

于 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が削除された場合にのみ動作します。

再レンダリング（ログアウト/リアクティブ変数の変更中）が、その共有ボタンのTwitterのAPIのjsによって作成された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 に答える