4

Twitter ウィジェットに自動スクロール効果を追加しようとしています。

Twitter から提供されたコードを HTML ページに追加し、この操作を処理するためにJquery プラグイン コード ( Caroufredselと呼ばれる) を追加しました。

関数の開始を Document.ready から次のように変更することで、関数呼び出しの後にコードが読み込まれる問題を解決しました。

<script>    
$(window).bind("load", function() {    
$(".h-feed").carouFredSel({
        items: 2,
        direction: "up",
        scroll : {
        items: 1,
        easing: "elastic",
        duration: 1000,             
        pauseOnHover: true
        }               
    }); 
});       
</script>

上記のコードでわかるように、クラス「h-feed」を持つリスト要素を見つけようとしています。これは、Twitter ウィジェットによって自動的に生成された (ol) 要素です。私が直面している問題は、GetElementByClass()関数が呼び出されると、要素が見つからなかったことを示す HTMLcontainer で null を返すことです!

誰かがこの問題を解決するのを手伝ってくれますか? 参考までに私の完全なコードを以下に示します (形式が悪くて申し訳ありませんが、最初の部分は Twitter が提供するウィジェット コードです)。

<a class="twitter-timeline" href="https://twitter.com/NomadMadi" data-widget-id="384617889120010240">Tweets by @NomadMadi</a>
<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");</script>


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="jquery.carouFredSel.js"></script>
4

2 に答える 2

1

最善の選択肢は、独自のバージョンの Twitter ウィジェットを作成することです。それをより細かく制御できるようになり、他の人が言及した iframe の問題が発生したり、Twitter コードがいつ到着して実行されたかを把握するのに苦労したりする必要がなくなります。

もう 1 つのオプションは、サーバー側で Twitter フィードを取得し、そこにテンプレートを作成することです。そうすれば、カルーセル コードをすっきりと整理できます。クライアント側での作業が少なくなれば、パフォーマンスが向上します。

いずれにせよ、必要な API 呼び出しは https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name= NomadMadi&count=10です。

ドキュメントはこちらhttps://dev.twitter.com/docs/api/1.1/get/statuses/user_timeline

余談ですが、Twitter の機能は大きく変化しており、クライアントが自分のサイトに埋め込み要素として Twitter フィードを表示するように要求するとき、私は通常かなり否定的です。私の意見では、Twitter は、カードや会話の拡張などの新機能に対応できるネイティブ アプリで体験するのが最適です。Twitter はプラットフォームであり、160 文字の文字列の集まりではありません。Twitter の独自の表現を構築しようとする瞬間は、それと戦い始める瞬間です。

技術的な課題はさておき、デザインの観点からは、フィードのカスタムをまったく試さず、関連するタイムラインの Twitter ページにリンクするだけで、ユーザーが好みの Twitter クライアントを使用してフォローできるようにすることをお勧めします。もちろん、私はあなたのデザインに実際の文脈を持っていないので、このアドバイスは的外れかもしれません.

于 2013-10-27T19:17:04.060 に答える