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/

4

4 回答 4

5

Meteor 模板中的 body 标签并不是真正的 HTML 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};
  }
于 2012-12-22T12:51:20.150 回答
2

除了上面的好答案，您还需要保护外部代码所依赖的 DOM 的任何部分，否则 Meteor 可能会重写它。你可以通过包围它来做到这一点

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

所有解释here 和here

于 2012-12-24T10:56:48.630 回答
1

添加到 Rahul 的出色答案中，如果您的应用程序使用 Meteor.router 包，和/或如果您在应用程序中显示不同的页面，则每次切换到新页面时都必须刷​​新共享按钮页。

为此，请将其添加为 javscript 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");
}
于 2013-05-30T18:33:43.717 回答
0

在使用 Iron:Router 包路由的 Meteor 应用程序中使用 AddThis 时，这里没有一个答案对我有用。

幸运的是， AddThis 的文档引导我朝着正确的方向前进。

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

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

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

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

现在，当我浏览我的网站时，它适用于所有页面。

于 2017-09-06T18:39:37.523 回答