開発

jQueryで非同期（getScript）にfacebook sdk v8.0を読み込む方法

作成日： 2020年10月22日

WordPressでFacebookとInstagramのoEmbed機能が無効化される、ということでテーマにoEmbed機能を実装しようと試行錯誤しています。

その際、ロード時間短縮のためにjQueryを介してgetScriptでsdk.jsファイルを非同期で読み込もうとしたのですが、jQuery - ウェブSDKの通り書いてもうまくいきませんでした。

JavaScript jQueryを使ってFacebook SDK for Javascriptを組み込む

$(document).ready(function() {
  $.ajaxSetup({ cache: true });
  $.getScript('https://connect.facebook.net/en_US/sdk.js', function(){
    FB.init({
      appId: '{your-app-id}',
      version: 'v2.7' // or v2.1, v2.2, v2.3, ...
    });     
    $('#loginbutton,#feedbutton').removeAttr('disabled');
    FB.getLoginStatus(updateStatusCallback);
  });
});

そこでさらに試すうちに、最終的には、

JavaScript 改訂版

$(document).ready(function () {
	$.ajaxSetup({ cache: true });
	$.getScript('https://connect.facebook.net/ja_JP/sdk.js', function () {
		FB.init({
			appId: '{your-app-id}',
			xfbml: true,
			version: 'v8.0'
		});
	});
});