在 Meteor 应用中插入 addthis 分享按钮？

Question

在 Meteor 应用中插入 addthis 分享按钮？

7

我该如何在Meteor应用中插入addthis分享按钮？通常，您可以直接将提供的代码复制到HTML文件中：

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_pinterest_pinit"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=silencing"></script>
<!-- AddThis Button END -->

但是在Meteor中，按钮不会显示。链接似乎从DOM中消失了。这是完整的Meteor应用程序（.js和.css文件为空）：

<head>
   <title>test-addthis</title>
</head>

<body>
    <!-- AddThis Button BEGIN -->
    <div class="addthis_toolbox addthis_default_style ">
    <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
    <a class="addthis_button_tweet"></a>
    <a class="addthis_button_pinterest_pinit"></a>
    <a class="addthis_counter addthis_pill_style"></a>
    </div>
    <script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
    <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=silencing"></script>
    <!-- AddThis Button END -->
</body>

以下是一个实时版本，展示了问题: http://testaddthismeteor.meteor.com/

（该链接为英文网站，可能需要使用翻译工具进行浏览）

- JWS

4

下次的提示：如果您想展示一个托管的Meteor应用程序进行调试，请使用调试标志部署它，以便脚本不会被压缩和合并：meteor deploy --debug <app_name>。 - Rahul

4个回答

2

进一步回答上面的问题，您还需要保护外部代码所依赖的DOM的任何部分，否则Meteor可能会重写它。您可以通过使用

将其包围来实现。

{{#constant}}
    <!-- protected DOM -->     
{{/constant}}

这里详细说明了所有内容还有这里

- Paul Young

{{#constant}}已被弃用：https://github.com/meteor/meteor/wiki/Using-Blaze#no-more-constant-isolate-or-preserve - agentofuser

1

在Rahul的优秀答案基础上，如果你的应用程序正在使用Meteor.router包，和/或者如果你正在显示应用程序中的不同页面，则每次切换到新页面时都必须刷新共享按钮。

为此，请将addthis作为javascript api添加到渲染按钮和工具箱（http://support.addthis.com/customer/portal/articles/381263-addthis-client-api#rendering-js）

在页面的主模板（当你切换页面时会更改的那个模板）上实现已呈现的帮助器，该帮助器在模板呈现时被调用：

Template.mypage.rendered = function() {
    // in this case we render a toolbox
    addthis.toolbox(".addthis_toolbox");
}

- jptsetung

0

在使用Iron:Router包路由的Meteor应用程序中，这里没有任何答案可以让我成功使用AddThis。

幸运的是，AddThis文档把我带到了正确的方向。

我按照其他答案的建议将AddThis脚本放在<head>标签中。

<head>
    <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=XX-XXXXXX"></script>
</head>

然后我将工具箱元素放在自己的模板中（在我的网站的各个页面上使用{{> blockAddThis}}调用该模板）。

<template name="blockAddThis">
    <div class="addThis">
        <div class="addthis_inline_share_toolbox"></div>
    </div>
</template>

然后我在该模板的onRendered函数中调用了addthis.layers.refresh()。

Template.blockAddThis.onRendered(function() {
    addthis.layers.refresh();
});

现在当我浏览我的网站时，它可以在所有页面上正常工作。

- Dom Ramirez

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rahul · Accepted Answer

在Meteor模板中的body标签并不是真正的HTML body标签，它只是你的应用程序的"body"。

因此，在Meteor加载您的应用程序时，它将生成HTML元素以在浏览器中呈现页面，然后呈现任何适用的模板。在您的情况下，您有一个包含脚本标记的模板，并且您的假设是，与标准HTML文档一样，浏览器将继续执行相关的Javascript。然而，这不是它的工作方式。Javascript没有被执行，DOM节点只是被附加到DOM结构中。

您可以通过尝试记录addthis_config的值来测试此功能-它将为未定义。您尝试包括的addthis脚本也没有被浏览器捕获，因为Web Inspector中的资源选项卡会指示。

为了解决这个问题，您需要告诉Meteor获取外部脚本，然后设置变量。在您的模板的<head>元素中，添加脚本：

  <script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=silencing"></script>

然后在你的Javascript中声明变量:

  if (Meteor.isClient) {
    var addthis_config = {"data_track_addressbar": true};
  }