2013-05-30 23 views
5

まず、私がここに投稿したのは初めてのので、私の投稿の質を前もって謝罪するかもしれません。私は過去にこのサイトで本当に有用な答えを見つけたので、戻ってくるポジションに自分自身を見つけたので、私はそれに行きたいと思った。UpdatePanelのAddThisコントロール - 非同期ポストバック後に正しくレンダリングされるようにする

私の頭を壁にぶつけて、しばらくの間、堅実な情報を見つけた後、私は最終的に私のために働いたこの問題の答えを見つけ、いくつかの質問に答えました。一意 指定されたURLとタイトル属性を持つAddThisのツールボックスをレンダリングする

  • ネットユーザーコントロール:

    シナリオ

  • Toolboxユーザーコントロールのインスタンスを含む複数の行を表示するリピーターを含むUpdatePanel。
  • UpdatePanelをリフレッシュする「結果をもっと表示」ボタンは、結果が増えるたびに表示されます。

問題

ページが最初にすべてがうまくある表示された場合。すべてのツールボックスが正しく表示され、正常に動作します。 ボタンを押してUpdatePanelをリフレッシュすると、ツールボックスは消えます。

ソリューション

まず、私はすぐに私は非同期ポストバック要求を処理し、私のツールボックスをレンダリングするためにいくつかのJavaScriptをトリガーするPageRequestManagerを使用して、私のページへのEndRequestHandlerを追加する必要がある他の人の質問と回答から確認。

次は、このjavascriptの内容を理解する必要がありました。

ほとんどの場合、window.addthis = nullを使用してjquery getScript()を使用してaddthis javascriptを再実行することで、この問題の解決策がオンラインで多数見つかりました。私はaddtis.toolbox()を使用してツールボックスをjavascriptでレンダリングする必要があると述べたAddThisサイトのドキュメントに戻ってきました。

私は電球の瞬間がありました。 addthis.toolbox()関数は、addthis:私がツールボックスのdivに設定していたURL属性とaddthis:title属性を無視していたようで、これらの属性をaddthis.toolbox()に渡す必要があることを認識しましたconfigオブジェクトです。 それから物事ははるかに簡単になった。

最終溶液は3部である。 URLとAddThisの::

最初にユニークなIDを持っており、AddThisのが含まれているユーザーコントロールに定義されてtollboxのDIVあるタイトル属性:

<div id="toolBoxWrapper" class="toolBoxWrapper" runat="server"> 
    <div id='<%="toolBox_" + ControlId%>' class="addthis_toolbox" addthis:url='<%=AssociatedUrl%>' addthis:title='<%=AssociatedName%>' > 
     <a class="addthis_button_email"></a> 
     <a class="addthis_button_facebook"></a> 
     <a class="addthis_button_twitter"></a> 
     <a class="addthis_button_print"></a> 
     <a class="addthis_button_compact"></a> 
     <a class="addthis_counter addthis_bubble_style"></a> 
    </div> 
</div> 

次は私が作成するコントロールのPreRenderイベントハンドラを作成しましたjavascriptには、コントロール固有のaddthis共有設定オブジェクトの定義が含まれています。これは動作しないので、ascxページには含まれません。これは、サーバーコードでRegisterStartupScriptを使用して作成する必要があります。

protected void Page_PreRender(object sender, EventArgs e) 
    { 
     // This code creates a control specific addthis_share config object so that 
     // the toolbox can be re-created after an ajax async postback using addthis.toolbox() 
     // which requires the url and title parameters to be included in the share config. 
     StringBuilder sb = new StringBuilder(); 

     sb.AppendLine("var addthis_shareconfig_toolBox_" + ControlId + " = {"); 
     sb.AppendLine("url:\"" + AssociatedUrl + "\","); 
     sb.AppendLine("title:\"" + AssociatedName + "\","); 
     sb.AppendLine("passthrough: {"); 
     sb.AppendLine(" twitter: {"); 
     sb.AppendLine("  via: 'mydomain'"); 
     sb.AppendLine(" }"); 
     sb.AppendLine("}"); 
     sb.AppendLine("}"); 
     sb.AppendLine("if (toolBoxShareConfigs == null) var toolBoxShareConfigs = {};"); 
     sb.AppendLine("toolBoxShareConfigs['toolBox_" + ControlId + "'] = addthis_shareconfig_toolBox_" + ControlId + ";"); 

     ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "shareToolBox_" + ControlId, sb.ToString(), true); 
    } 

は、最後に私は、UpdatePanelのをリフレッシュしたらトリガされるSys.WebForms.PageRequestManagerを使って自分のページにEndRequestHandlerを作成しました。これは、すべてのツールボックスのdivを経て、(見つからない場合は、デフォルトに戻す)関連株のconfigオブジェクトを検索し、その後、株式configオブジェクトにaddthis.toolbox()通過を呼び出します。

<script type="text/javascript" language="javascript"> 
       Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); 
       function EndRequestHandler(sender, args) { 
        addthis_config.pubid = 'mypubid'; 
        $(".addthis_toolbox").each(function() { 
         try 
         { 
          var shareConfig = toolBoxShareConfigs[this.id]; 
         } 
         catch(err) 
         { 
          var shareConfig = { 
           passthrough: { 
            twitter: { 
             via: "mydomain" 
            } 
           } 
          }; 
         } 
         addthis.toolbox(this, addthis_config, shareConfig); 
        }); 
       } 
      </script> 

そして、それはそれです。今、私のUpdatePanelは完全に動作し、私の追加共有ツールボックスは正しく動作し、正しいURLとタイトルを持っています。

非同期ポストバックの後にカウンタが正しく表示されないように見えるという顕著な問題が1つありますが、モバイルデバイス用のUpdatePanelのみを使用しているため問題はありませんカウンターを表示していません。しかし、誰かがこの問題に関するアイデアを持っていれば、私はあなたから聞きたいと思っています。

答えて

2

私は、AddThis Toolボックスの最も安定したコードを見つけるのにも苦労しています。私は次のコードを最も簡単なものとして見つけました。これは完全に機能し、すべてのカウンタが正しく機能し、ツールボックスはパネルの更新時に消えません。

AddThis All Counters Available

JsFiddle:http://jsfiddle.net/hyip/oq3d6cpv/ここ

が利用できるすべてのカウンタを持つHTMLコードです:

<div class="addthis_toolbox addthis_default_style addthis_16x16_style" style="display:table; margin:0 auto;">  
    <a class="addthis_counter_facebook"></a>  
    <a class="addthis_counter_twitter"></a>  
    <a class="addthis_button_google_plusone"></a>  
    <a class="addthis_counter_linkedin"></a>  
    <a class="addthis_counter_pinterest_share"></a>  
    <a class="addthis_button_stumbleupon_badge"></a>  
    <a class="addthis_counter_delicious"></a>  
    <a class="addthis_counter_reddit"></a>  
    <a class="addthis_counter_vk"></a>  
    <a class="addthis_counter_odnoklassniki_ru"></a>  
    <a class="addthis_button_expanded at300m"></a>  
    <a class="addthis_counter addthis_bubble_style"></a>  
</div> 

そして、ここでのスクリプトです。ここ

は、スクリーンショットでありますjsファイル:

(function(id, as, src) { 
    if (document.getElementById(id)) return; 
    var hjs = document.getElementsByTagName('head')[0], js = document.createElement('script'); 
    js.id = id; js.type = 'text/javascript'; js.async = as; js.src = src; hjs.appendChild(js); 
}('aaddthis-wjs', 1, 'http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-your-addthis-id')); 

ツールボックスが正しいURL、画像、タイトル、および説明で機能するには、オープン・グラフ著者名をHTMLの頭に設定する必要があります。これはあなたのソリューションへの共有貢献になります

<!-- Open Graph --> 
<meta property="fb:admins" content="your-facebook-admin-id" /> 
<meta property="og:url" content="your-url-to-share" /> 
<meta property="og:image" content="path-to-your-default-image-to-share" /> 
<meta property="og:title" content="your-title-to-share" /> 
<meta property="og:description" content="your-description-to-share" /> 

<!-- Authorship --> 
<link rel="canonical" href="your-canonical-url" /> 
<link rel="image_src" href="your-default-image-to-share"/> 
<link rel="icon" type="image/x-icon" href="/favicon.ico" /> 
<link rel="publisher" href="url-to-your-google-plus-with-page-id" /> 
<link rel="author" href="url-to-your-google-plus-with-profile-id" /> 

希望:

は、ここでHTMLの頭に置かれるべき最低限のコードです。

UPDATE

あなただけオリジナルの共有ボタン(FB、Twと、Lnは、G +、ピン、蘇)を表示する必要がある場合は、AddThisのは自由のためのカウンターで、今私たちに与えています。

手順1:あなたのウェブサイトに次のコードを追加します。

<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-55dc7c7d2cb90e21" async="async"></script> 

ステップ2:あなたは、このツールを表示したい方のページにこのコードを貼り付けます。

<div class="addthis_native_toolbox"></div> 

http://www.addthis.com/dashboardにアクセスしてツールをカスタマイズしてください。

style="position: fixed; left: 50%; transform: translate(-50%);"
センターの使用にそれを置くために、あなたは、ライブアクションのコードを見てhereをチェックすることができます。

関連する問題