Как подключить share-кнопки соцсетей в React?

Question

[Максим Никулин]

Всем привет. Имеется изоморфное SPA. Необходимо на некоторые страницы подключить share-кнопки соцсетей. Каким образом это сделать? Было бы здорово с примером. Заранее спасибо

Comments

[Mikhail Osher]

Гуглом учитесь пользоваться.

Answer 1

[evilandfox]

Фишка в том, что для таких иницилизируемых javascript'ом компонентов надо делать инициализацию в componentDidMont через доступ с помощью ref:
codepen.io/evilandfox/pen/jAxJxv

<script type="text/javascript" src="http://vk.com/js/api/share.js?93" charset="windows-1251"></script>
<script>window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);
 
  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };
  return t;
}(document, "script", "twitter-wjs"));</script>
<div id="main"></div>

var Component = React.createClass({
  componentDidMount: function(){
    this.refs.vk.innerHTML = VK.Share.button(false, {type: "round", text: "Сохранить"});
    twttr.widgets.createShareButton(
      'https://dev.twitter.com/',
      this.refs.tw,
      {
        text: 'Hello World'
      });
  },
  render: function(){
    return (
      <div>
        <h4>Поделиться:</h4>
        <div ref="vk"></div>
        <div ref="tw"></div>
      </div>
    );
  }
});

ReactDOM.render(<Component/>, document.getElementById("main"));

Answer 2

[merss]

Как у вас это получается? У меня выдает ошибку "error 'VK' is not defined"

Comments

[Максим Никулин]

Привет.
Я использовал https://tech.yandex.ru/share/
1. Подключить в HTML

<script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script>
<script src="//yastatic.net/share2/share.js"></script>

2. Создаем блок

<div className="ya-share2" data-counter='' ref='yaShare' data- services="vkontakte,facebook,odnoklassniki,twitter"></div>

3. Добавляем следующее (es6)

componentDidMount(){
var yaShare = this.refs.yaShare
        var share = Ya.share2(yaShare, {
            content: {
                url: `http://magnificentsite.com`,
                title: 'That's great site',
                description: `That's great discription`,
                image: 'http://magnificentsite.com/image.png'
            },
            theme: {
                counter: true,
                size: 'm'
            }
        });
}