Вставка кнопок общего доступа addthis в приложение Meteor?

Как вставить кнопки общего доступа addthis в приложение Meteor? Обычно вы можете просто скопировать предоставленный код прямо в html-файл:

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

Но в Метеоре кнопки не появляются. Ссылки, кажется, исчезают из DOM. Вот полное приложение Meteor (файлы .js и .css пусты):

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

А вот живая версия, показывающая проблему: http://testaddthismeteor.meteor.com/


meteor addthis
person JWS    schedule 22.12.2012    source источник
comment
Совет на следующий раз: если вы хотите показать размещенное приложение Meteor для целей отладки, разверните его с флагом отладки. чтобы скрипты не минифицировались и не объединялись: meteor deploy --debug <app_name>   -  person Rahul    schedule 22.12.2012

Ответы (4)


arrow_upward
5
arrow_downward

Тег body в шаблоне Meteor на самом деле не является HTML-тегом body. Это просто "тело" вашего приложения.

Таким образом, когда Meteor загружает ваше приложение, он генерирует элементы HTML для отображения страницы в самом браузере, а затем отображает любые применимые шаблоны. В вашем случае у вас есть шаблон, содержащий тег скрипта, и вы предполагаете, что, как и в случае со стандартным HTML-документом, браузер выполнит соответствующий Javascript. Однако это не так. Javascript не выполняется, узлы DOM просто добавляются к структуре DOM.

Вы можете проверить это, попытавшись зарегистрировать значение addthis_config — оно будет неопределенным. Сценарий addthis, который вы пытались включить, также не был обнаружен браузером, как будет указано на вкладке «Ресурсы» в веб-инспекторе.

Чтобы исправить это, вам нужно указать Meteor получить внешний скрипт, а затем установить переменную. В элементе <head> вашего шаблона добавьте скрипт:

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

А затем объявите переменную в вашем Javascript:

  if (Meteor.isClient) {
    var addthis_config = {"data_track_addressbar": true};
  }
person Rahul    schedule 22.12.2012
comment
Вы хотите сказать, что поместите скрипт библиотеки .js в тег заголовка и напишите код jquery или javascript внутри Meteor.isClient? Что, если библиотека требует отображения html-таблиц (Jtable.org), вы включаете html вместе с var javascript? Мне положить alert('hello') внутрь Meteor.isClient ? - person KJW; 21.03.2013
comment
Спасибо, что так хорошо объяснили, Рахул. - person aliirz; 10.07.2013

arrow_upward
2
arrow_downward

В дополнение к отличному ответу выше, вам также необходимо защитить любую часть DOM, на которую опирается ваш внешний код, иначе Meteor может ее переписать. Вы делаете это, окружая его

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

Все объяснено здесь и здесь

person Paul Young    schedule 24.12.2012
comment
{{#constant}} устарел: github.com /метеор/метеор/вики/ - person agentofuser; 06.09.2014

arrow_upward
1
arrow_downward

В дополнение к отличному ответу Рахула, если ваше приложение использует пакет Meteor.router и/или если вы показываете разные страницы в приложении, вам придется обновлять кнопки общего доступа каждый раз, когда вы переключаетесь на новый страница.

Для этого добавьте это как API-интерфейс javscript для визуализации кнопок и панели инструментов ( http://support.addthis.com/customer/portal/articles/381263-addthis-client-api#rendering-js )

На основном шаблоне страницы (тот, который меняется при переключении страниц) реализуем визуализированный помощник, который вызывается при рендеринге шаблона:

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

arrow_upward
0
arrow_downward

Ни один из ответов здесь не работал у меня при использовании AddThis в приложении Meteor, маршрутизируемом с помощью пакета Iron: Router.

К счастью, документация AddThis привела меня в правильном направлении.

Я поместил скрипт AddThis в тег <head>, как это было рекомендовано другими ответами.

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

Затем я помещаю элемент панели инструментов в собственный шаблон (вызывая этот шаблон на разных страницах моего сайта с помощью {{> blockAddThis}}).

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

Затем я вызвал addthis.layers.refresh() в функции onRendered для этого шаблона.

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

Теперь он работает на всех страницах, когда я просматриваю свой сайт.

person Dom Ramirez    schedule 06.09.2017