BETA

facebookのいいね!ボタンをリロードなしで言語切り替えする

投稿日:2019-09-07
最終更新:2019-09-07

はじめに

facebookのいいね!ボタンの言語切り替えでハマったところがあったのでメモがてら書くことにしました。

facebookのいいね!ボタンの言語切り替えについて

facebook for developersのいいね!ボタンのページにて記載があります。
一番最後に言語切り替えの記載があり、SDKのローカライズバージョンを読み込むことで「いいね!」の文言を多言語対応することができます。

困ったこと

今回
Selectタグで言語切り替えて、いいね!ボタンの言語を変えたい
ということがしたかったのですが、SDKのローカライズバージョンを読み込んでもその言語に切り替わらないという事象が発生し少しハマりました。

何が起きていたか

今回以下のような実装をしました。Vue.jsでデータバインディングしています。

  1. Selectタグで任意の言語を指定
  2. changeイベントで現在読み込んでいるfacebook SDKのscriptタグを削除し、指定した言語のローカライズSDKのscriptタグを生成し直す

DevTools上では指定した言語のローカライズSDKのscriptタグが生成されていましたが、表示される言語はそのページを表示して一番最初に読み込んだ言語となってしまいました。

解決方法

SDKを読み込むと、windowオブジェクトにFBオブジェクトが生成されます。
こちらをnullでリセットしてからSDKを読み込み直すことで解決しました。

サンプル
※いいね!するURLは「facebook for developersのソーシャルプラグイン」のページとしています。

今回のソースコードは以下です。(body内の記述のみ記載)
methodsの「createBtn」にて最初にwindow.FB = null;を入れています。

<div id="app">  
    <select  
    v-model="lang"  
    @change="createBtn">  
    <option value="ja_JP">日本語</option>  
    <option value="en_US">英語</option>  
    <option value="de_DE">ドイツ語</option>  
  </select>  
  <div  
    class="fb-like"  
    data-href="https://developers.facebook.com/docs/plugins/"  
    data-width=""  
    data-layout="button"  
    data-action="like"  
    data-size="small"  
    data-show-faces="false"  
    data-share="false">  
  </div>  
</div>  
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
<script>  
  var app = new Vue({  
    el: '#app',  
    data: {  
      lang: 'ja_JP'  
    },  
    methods: {  
      createBtn: function () {  
        window.FB = null  
        const fbsdkElem = document.getElementById('fb-sdk')  
        if (fbsdkElem) fbsdkElem.parentNode.removeChild(fbsdkElem)  
        const fbrootElem = document.getElementById('fb-root')  
        if (fbrootElem) fbrootElem.parentNode.removeChild(fbrootElem)  
        let scriptElem = document.createElement('script')  
        scriptElem.id = 'fb-sdk'  
        scriptElem.crossorigin = 'anonymous'  
        scriptElem.async = true  
        scriptElem.src = 'https://connect.facebook.net/' + this.lang + '/sdk.js#xfbml=1&version=v4.0'  
        document.body.appendChild(scriptElem)  
      }  
    },  
    mounted () {  
      this.createBtn()  
    }  
  })  
</script>  
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@jskymの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!