5

首先,我可以提前为我的帖子质量道歉,因为这是我第一次在这里发帖。过去我在这个网站上找到了一些非常有用的答案,所以发现自己可以回馈社会,我想我会试一试。

在把我的头撞到墙上一段时间后,在网上找到的可靠信息很少,我终于找到了一个对我有用的问题的答案并回答了几个问题,所以我想我会分享我的发现。

场景

  • .Net 用户控件,它呈现具有唯一指定的 url 和标题属性的 addthis 工具箱。
  • 一个 UpdatePanel,它包含一个显示多行的重复器,每行都包含一个工具箱用户控件的实例。
  • 刷新更新面板的“显示更多结果”按钮,每次显示更多结果。

问题

当页面首次显示时,一切都很好。所有工具箱都正确显示并按预期工作。但是,当按下按钮并刷新 UpdatePanel 时,工具箱就会消失。

解决方案

首先,我从其他人的问题和答案中快速确定,我需要使用 PageRequestManager 将 EndRequestHandler 添加到我的页面,以处理异步回发请求并触发一些 JavaScript 来呈现我的工具箱。

接下来我需要弄清楚这个 javascript 应该是什么。

我在网上找到了许多针对此问题的建议解决方案,大多数使用 window.addthis=null 并使用 jquery getScript() 重新运行 addthis javascript,但是这些都没有解决问题。我不断回到 AddThis 站点上的文档,该文档指出您应该只使用 addthis.toolbox() 来使用 javascript 呈现您的工具箱,这似乎对我不起作用。

然后我有一个灯泡时刻。似乎 addthis.toolbox() 函数忽略了我在工具箱 div 中设置的 addthis:url 和 addthis:title 属性,我意识到我需要通过在共享中定义这些属性将它们传递到 addthis.toolbox()配置对象。从那时起,事情变得容易多了。

最终解决方案分为 3 个部分。

首先是在用户控件中定义的收费箱 DIV,它具有唯一的 ID,并包含 addthis:url 和 addthis:title 属性:

<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 处理程序,以创建包含特定于控件的 addthis 共享配置对象的定义的 javascript。这不能只包含在 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);
    }

最后,我使用 Sys.WebForms.PageRequestManager 在我的页面中创建了一个 EndRequestHandler,以便在 UpdatePanel 刷新后触发。这将遍历所有工具箱 div 并找到相关的共享配置对象(如果未找到则恢复为默认值),然后调用 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 可以正常工作,我所有的 addthis 共享工具箱都可以正常工作,并且具有正确的 url 和标题。

我正在处理的一个突出问题是在异步回发后计数器似乎无法正确显示,但这对我来说不是问题,因为我只将 UpdatePanel 用于移动设备并且没有显示柜台。但是,如果有人对这个问题有任何想法,我很乐意听取您的意见。

4

1 回答 1

2

I have been struggling also to find the most stable code for the AddThis Tool box. I found the following code as the simplest one. It works perfectly and all counters work correctly and the toolboxes is never disappear on panel refresh.

Here is the screen shot:

AddThis All Counters Available

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

Here is the Html code with all counters available:

<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>

And here is the script in the js file:

(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'));

In order that the ToolBox works with the correct URL, image, titles and description then we need to setup an Open Graph and Authorship in the Head of HTML.

Here is the minimum code to be placed in HTML Head:

<!-- 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" />

Hope this will be a sharing contribution to your solution.

UPDATE

If you need to show only Original Sharing Buttons (Fb, Tw, Ln, G+, Pin, Su) then AddThis has given us now with the counter for free.

Step 1: Add the following code to the of your website.

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

Step 2: Paste this code into whichever page you would like this tool to show up.

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

Go to http://www.addthis.com/dashboard to customize your tools.

To put it on center use style="position: fixed; left: 50%; transform: translate(-50%);"
You may check here to see the code on live action.

于 2015-01-17T14:48:03.273 回答