Menu
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/
291
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};
}
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
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
