Inserting addthis sharing buttons in a Meteor app?

Asked 22/12, 2012 at 6:17 Answered 6/9, 2017 at 18:39

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/

Bimetallism answered 22/12, 2012 at 6:17 Comment(1)

A tip for next time: if you want to show a hosted Meteor app for debugging purposes, deploy it with the debug flag so that scripts are not minified and concatenated: meteor deploy --debug <app_name> – Ferree 22/12, 2012 at 12:52

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

Ferree answered 22/12, 2012 at 12:51 Comment(1)

Do you mean to say put the .js library script in header tag and write the jquery, or javascript code inside Meteor.isClient? What if the library requires html tables to display (Jtable.org), do you include the html along with the javascript var? Do I put alert('hello') inside Meteor.isClient ? – Artema 21/3, 2013 at 17:8

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

Flapjack answered 24/12, 2012 at 10:56 Comment(1)

{{#constant}} has been deprecated: github.com/meteor/meteor/wiki/… – Impassive 5/9, 2014 at 23:6

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

Ingredient answered 30/5, 2013 at 18:33 Comment(0)

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.

Manoeuvre answered 6/9, 2017 at 18:39 Comment(0)

Recommended topics

Hot tags