14

http://ethercreative.net/studio_social/ 非常にシンプルなワードプレスのテーマですが、無限スクロールプラグインとソーシャルの競合により複雑さが生じています。アイコン。

各投稿は、G +、FB、Twitterのソーシャルアイコンが入ったブロックを最後に表示することを目的としています。開始時に約4件の投稿を表示し、スクロールすると次のセットをロードすることを目的としています。

これらはそれぞれ機能しますが、一緒には機能しません。

無限スクロールが次の投稿ブロックをロードすると、Facebookのようなボタンのみが表示され、他の2つのソーシャルアイコンは表示されません。

奇妙なことに、コードのブロックが残ります。

<span class="icons">
                    <g:plusone size="medium" href="http://ethercreative.net/studio_social/?p=1"></g:plusone>                <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fethercreative.net%2Fstudio_social%2F%3Fp%3D1&amp;locale=&amp;layout=button_count&amp;action=like&amp;width=92&amp;height=20&amp;colorscheme=light" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:92px; height:20px;" allowtransparency="true"></iframe>&nbsp;&nbsp;&nbsp;
                    <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://ethercreative.net/studio_social/?p=1" data-count="horizontal" data-text="Hello world!" data-via="twitter_username"></a></span>
</div>

私は問題が何であるか、そしてなぜそれが起こっているのかを知っていますが、私はjavascriptがあまり得意ではなく、それを修正するためにどの呼び出しを使用するべきかわかりません。

私はWordpress3.3.1を使用しており、無限スクロールプラグイン（http://wordpress.org/extend/plugins/infinite-scroll/）とソーシャルアイコンのdigg digg（http://wordpress.org/extend/plugins）を使用しています/ digg-digg /）

無限スクロールプラグインには、新しい投稿のセットを取得した後に実行するonLoadイベントを追加する機能があります。では、ここに何を追加する必要がありますか？

事前にすべての助けをありがとう！良い１日を。

更新：さらに調査した後、Twitterも修正しました。今、それはただグーグルプラスが修正するために残されています。Twitterに必要なコードは次のとおりです。

!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");

再度更新：Google Plusコードも見つかりました：

（function（）{var po = document.createElement（'script'）; po.type ='text / javascript'; po.async = true; po.src ='https://apis.google.com/js/ plusone.js'; var s = document.getElementsByTagName（' script'）[0]; s.parentNode.insertBefore（po、s）;}）（）;

私は何を学びましたか？Stack Overflowで質問する前に、さらにグーグルを実行してください。少なくとも、将来この問題を抱えている人々への答えはここにあります。

4

3 に答える 3

7

あなたが提示した解決策は、基本的にスクリプトをリロードすることです。これは、ソーシャルボタンの最初のセットのページロード時にスクリプトをロードした可能性があるため、かなり非効率的です。3つのサービスすべてに、ドキュメントの一部または全体を解析して、新しいソーシャルウィジェットをレンダリングする方法があります。必要なコードは次のようになります。

var el = document.body; 

//Google Plus   
if (typeof gapi !== "undefined") { gapi.plusone.go(el); }

//Facebook
if (typeof FB !== "undefined") { FB.XFBML.parse(el); }

//Twitter
if (typeof twttr !== "undefined") { twttr.widgets.load(); }

上記の場合、elはウィジェットを保持するコンテナであるか、おそらくdocument.body（すべてのウィジェットを再レンダリングします）にすることができます。現在Twitterでコンテキストを絞り込むことができるかどうかはわかりませんが、追加する予定です。それ。

于 2012-05-05T02:03:57.617 に答える
0

LocalPCGuyが示唆しているように、これを達成するために必要以上に多くの作業を行っています。理想的には、非同期ロードコールバックの一部に、これらのボタンを必要とする要素だけに埋め込む作業を行わせる必要があります。または、さらに良いことに、クライアントがページを準備するために作業を行う必要がないように、サーバー側でそれらを追加します（可能な場合）。少なくともソリューションでは、スクリプトファイルがキャッシュされるため、読み込み時間が短縮されます。問題は、ページを必要以上に機能させていることです。ページが無限にスクロールしてどんどん大きくなるにつれて、この余分な作業はますます重要になります。

理想的なフローは次のようになります。

  1. 最初のページを読み込む
  2. 必要なJSを実行します。このステップでは、ソーシャルウィジェットを特定のDOMノードに埋め込む関数があることを確認してください。
  3. ページを無限にスクロールさせ、トリガーし、非同期リクエストを実行します
  4. 非同期ロードでは、非同期ロードコールバックに応答を解析させてから、作成するDOMを反復処理して、各エントリをウィジェット作成関数に渡します。

そうすれば、必要な効果を得るために必要最小限の作業を行うことができます。

于 2012-05-07T15:42:40.253 に答える
0

JSファイルにコードを追加します。

addthis.toolbox('.addthis_toolbox');
addthis.counter('.addthis_counter');

それは完璧に動作します。

于 2014-02-21T12:17:48.647 に答える