More than 5 years have passed since last update.

FacebookとTwitterの公式シェアボタンをSPAで表示する方法

Posted at 2018-10-28

こういうやつです。

一般的なWebページでの導入方法はこちらです。

① bodyタグの末尾にSDKのコードを挿入して → ②ボタン本体のタグを埋め込む
という流れですが、SPAの場合このやり方をするだけでは動きません。

ボタンを読み込みたい画面で、

Facebookの場合

FB.XFBML.parse();

Twitterの場合

twttr.widgets.load();

のメソッドを呼び出せばOKです。
タイミングはVueやReactを利用しているなら、コンポーネントライフサイクルを使うとよいでしょう。
（Vueならmounted(), ReactならcomponentDidMount()）