React で facebook のシェアボタンが表示されない時 FB.XFBML.parse を実行して回避する #React

React で SPA を開発している時に、 facebook シェアボタンを設置しようと試みたが、なんどチュートリアル通りにやっても表示されずに困ったので、備忘録に。

確認事項

1. https://developers.facebook.com/apps で facebook appID を取得していること
2. https://developers.facebook.com/docs/plugins/share-button/?locale=ja_JP ページで「コードを取得」して、 <body> 直下に sdk を読み込むスクリプトを埋め込んでいること
3. <div class="fb-share-button"> というクラスのついたボタンのコードを実装していること
4. ローカルファイルの index.html などを直接ブラウザで開くのではなく、 web サーバーで起動させていること

上記でも動かなかった場合、以下で解決できるかも。

解決策

componentDidMount 時に FB.XFBML.parse() を読み込む

componentDidMount() {
  FB.XFBML.parse();
}

FB.XFBML.parse(); を任意のタイミングで読み込むことで、 facebook のシェアボタンなどのソーシャルプラグインを再レンダリングできる。

ボタン全体のコード

import React, { Component } from 'react';

class FacebookShareButton extends Component {

    constructor(props) {
        super(props);
        this.url = null;
    }

    componentWillMount() {
        this.url = location.href;
    }

    componentDidMount() {
        if(typeof(FB) != "undefined") {
            // @see https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/
            FB.XFBML.parse();
        }
    }

    render() {
        return (
            <div
                className="fb-share-button"
                data-href={this.url}
                data-size="small"
                data-layout="button"
                data-mobile-iframe="true"
            />
        );
    }
}

export { FacebookShareButton };

参考

そもそも、React が原因なのではなく、 SPA 構成で動的に追加した SNS ボタンは表示されないという仕組みだった模様。