Geek Answers Handbook

Insert additional sharing buttons in the Meteor app?

How to add additional sharing buttons to the Meteor app? Usually you can simply 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 the "Meteor" buttons are not displayed. Links seem to disappear from the DOM. Here's the full Meteor app (.js and .css files are empty):

 <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 is the live version showing the problem: http://testaddthismeteor.meteor.com/

+7
source share
4 answers

The body tag in a Meteor template is not an HTML tag tag. This is just the "body" of your application.

Thus, when Meteor loads your application, it will generate HTML elements to display the page in the browser itself, and then display any applicable templates. In your case, you have a template containing a script tag, and your assumption is that, as in a standard HTML document, the browser will work and execute the appropriate Javascript. However, this is not how it works. Javascript is not executed, DOM nodes are simply added to the DOM structure.

You can verify this by trying to write the addthis_config value - it will be undefined. The Addthis script that you tried to include was also not displayed by the browser, as it is indicated on the "Resources" tab in the web inspector.

To fix this, you need to tell Meteor to get an external script, and then set the variable. In the <head> template element add a 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}; }
+5
source

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

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

Everything is explained here and here.

+2
source

Adding to Rahul's excellent answer, if your application uses the Meteor.router package and / or if you display different pages in the application, you will have to update the sharing buttons each time you switch to a new page.

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

In the main page template (the one that changes when switching pages) implements a 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"); }
+1
source

None of the answers here worked for me when using AddThis in a Meteor application routed with Iron: Router.

Fortunately, the AddThis documentation is leading me in the right direction.

I put the AddThis script in the <head> , 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 placed the toolbar item in my own template (calling this template on different pages of my site using {{> 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 this template.

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

Now it works on all pages when I browse my site.

0
source

More articles: