{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 女痞 的问题《Inserting addthis sharing buttons in a Meteor app?》','https://www.manongdao.com/q-326430.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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/
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.Then I put the toolbox element in its own template (invoking that template on various pages of my site with
{{> blockAddThis}}).Then I called
addthis.layers.refresh()in the onRendered function for that template.Now it works on all pages as I browse around my site.
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
All explained here and here
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:And then declare the variable in your Javascript:
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 :