Question

如何在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/

Answer 1

Meteor模板中的body标签实际上不是HTML正文标记。它只是＆＃34;身体＆＃34;你的申请。

因此，当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};
  }

Answer 2

除了上面的答案之外，您还需要保护外部代码所依赖的DOM的任何部分，否则Meteor可能会重写它。你可以用

包围它

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

All explained here and here

Answer 3

添加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");
}

Answer 4

使用AddThis在Meteor应用程序中使用Iron：Router程序包路由时，这些答案都不适用于我。

幸运的是AddThis' documentation引导我朝着正确的方向前进。

我按照其他答案的建议将AddThis脚本放在Row1 -> Group, Position, Frequency Row2 -> 192, 1, 0.2 Row3 -> 192, 2, 0.3 Row4 -> 192, 3, 0.1 Row5 -> 193, 4, 0.5 Row6 -> 193, 5, 0.6 Row7 -> 193, NA, NA Row8 -> 194, 6, 0.2 Row9 -> 194, 7, 0.4 Row10-> 194, NA, NA Row11 -> 195, 8, 0.9 Row12 -> 195, NA, NA Row13 -> 195, NA, NA Row14 -> 196, 9, 0.8 Row15 -> 196, NA, NA Row16 -> 196, NA, NA标记中。

<head>

然后我将工具箱元素放在自己的模板中（使用<head> <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=XX-XXXXXX"></script> </head>在我的网站的各个页面上调用该模板。）

{{> blockAddThis}}

然后我在该模板的onRendered函数中调用<template name="blockAddThis"> <div class="addThis"> <div class="addthis_inline_share_toolbox"></div> </div> </template>。

addthis.layers.refresh()

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

在Meteor应用程序中插入addthis共享按钮？

4 个答案: