Inserting addthis sharing buttons in a Meteor app?

问题

How do I insert addthis sharing buttons in a Meteor app? Usually, you can just copy the provided code directly into the html file:

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

But in Meteor, the buttons don't appear. The links seem to disappear from the DOM. Here's the full Meteor app (the .js and .css files are blank):

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

And here's a live version showing the problem: http://testaddthismeteor.meteor.com/

回答1:

The body tag in a Meteor template is not really a HTML body tag. It's just the "body" of your application.

As such, when Meteor loads your app, it will generate the HTML elements to render the page in the browser itself, then render any applicable templates. In your case, you have a template containing a script tag and your assumption is that, as with a standard HTML document, the browser will go ahead and execute the associated Javascript. However, that's not how it works. The Javascript isn't being executed, the DOM nodes are just being appended to the DOM structure.

You can test this by trying to log the value of addthis_config - it will be undefined. The addthis script you tried to include has also not been picked up by the browser as your Resources tab in the Web Inspector will indicate.

In order to fix this, you need to tell Meteor to fetch the external script and then set the variable. In your template's <head> element, add the script:

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

And then declare the variable in your Javascript:

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

回答2:

Further to the great answer above, you also need to protect any portion of the DOM that your external code relies on, otherwise Meteor may rewrite it. You do that by surrounding it with

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

All explained here and here

回答3:

Adding to the excellent answer of Rahul, if your app is using Meteor.router package, and/or if you're showing different pages in the app, you'll have to refresh the sharing buttons each time you're switching to a new page.

To do this, addthis as a javscript api to render the buttons and toolbox ( http://support.addthis.com/customer/portal/articles/381263-addthis-client-api#rendering-js )

On the main template of the page (the one that changes when you are switching pages), implement the rendered helper that is called when the template is rendered :

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

回答4:

None of the answers here worked for me while using AddThis in a Meteor app, routed with the Iron:Router package.

Fortunately AddThis' documentation lead me in the right direction.

I put the AddThis script in the <head> tag as recommended by other answers.

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

Then I put the toolbox element in its own template (invoking that template on various pages of my site with {{> blockAddThis}}).

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

Then I called addthis.layers.refresh() in the onRendered function for that template.

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

Now it works on all pages as I browse around my site.

来源：https://stackoverflow.com/questions/14000574/inserting-addthis-sharing-buttons-in-a-meteor-app

标签

meteor

addthis