blogger

[blogger] 페이스북 JS SDK 스크립트 위젯을 삽입하는 방법

1월 24, 2025

JS SDK 스크립트를 사용하면 자바스크립트용 페이스북 위젯을 블로그에 삽입할 수 있습니다.

페이스북의 HTML5 플러그인이 블로그에서 작동하려면 테마의 XML 코드에 SDK 스크립트를 설치해야 합니다. 페이스북 개발자가 배포한 공식 스크립트는 모든 HTML 편집기에 삽입되도록 설계되었으며 그대로 Blogger XML 편집기에 추가할 수 없습니다.

<div id="fb-root"></div>
<script>
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ko_KR/all.js#xfbml=1&appId=ID_APPLICATION";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

실제로 코드를 있는 그대로 삽입하면 편집기에서 다음과 같은 에러 메시지가 출력됩니다.

Erreur d'analyse XML, ligne XXX, colonne XXX : The reference to entity "foo" must end with the ';' delimiter..

이 오류는 페이스북 코드를 HTML 편집기에 그대로 삽입했기 때문에 발생합니다. XML 편집기에서 일부 기호를 이스케이프해야 하며 앰퍼샌드(&)의 경우도 마찬가지입니다. &는 &amp;의 형식으로 이스케이프해야 합니다.

Blogger XML 편집기에서 공식 스크립트를 허용하려면 특수 문자를 이스케이프 처리하거나 아래처럼 CDATA 를 사용해야 합니다.

<div id='fb-root'/>
<script>
// <![CDATA[
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ko_KR/all.js#xfbml=1&appId=ID_APPLICATION";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// ]]>
</script>

블로그 블로그의 언어 코드를 모르는 경우 이 스크립트를 사용할 수 있습니다.

<div id='fb-root'/>
<script>
  var BlogLocale = "<data:blog.locale/>";
  // <![CDATA[
    (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      var localeList = { 'af': 'af_ZA', 'de': 'de_DE', 'en': 'en_US', 'en_GB': 'en_GB', 'ar': 'ar_AE', 'eu': 'eu_ES', 'bn': 'bn_IN', 'bg': 'bg_BG', 'ca': 'ca_ES', 'zh_HK': 'zh_HK', 'zh_CN': 'zh_CN', 'zh_TW': 'zh_TW', 'ko': 'ko_KR', 'hr': 'hr_HR', 'da': 'da_DK', 'es_419': 'es_LA', 'es': 'es_ES', 'et': 'et_EE', 'fil': 'tl_PH', 'fi': 'fi_FI', 'fr': 'fr_FR', 'fr_CA': 'fr_CA', 'gl': 'gl_ES', 'el': 'el_GR', 'iw': 'he_IL', 'hi': 'hi_IN', 'hu': 'hu_HU', 'id': 'id_ID', 'is': 'is_IS', 'it': 'it_IT', 'ja': 'ja_JP', 'lv': 'lv_LV', 'ms': 'ms_MY', 'ml': 'ml_IN', 'nl': 'nl_NL', 'no': 'nn_NO', 'fa': 'fa_IR', 'pl': 'pl_PL', 'pt_BR': 'pt_BR', 'pt_PT': 'pt_PT', 'ro': 'ro_RO', 'ru': 'ru_RU', 'sr': 'sr_RS', 'sk': 'sk_SK', 'sl': 'sl_SI', 'sv': 'sv_SE', 'sw': 'sw_KE', 'ta': 'ta_IN', 'cs': 'cs_CZ', 'te': 'te_IN', 'th': 'th_TH', 'tr': 'tr_TR', 'uk': 'uk_UA', 'vi': 'vi_VN', 'am': 'en_US', 'gu': 'en_US', 'kn': 'en_US', 'mr': 'en_US', 'or': 'en_US', 'ur': 'en_US', 'zu': 'en_US' };
      js.src = "//connect.facebook.net/"+localeList[BlogLocale]+"/all.js#xfbml=1&appId=ID_APPLICATION";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, "script", "facebook-jssdk"));
  // ]]>
</script>


Blogger에 스크립트 추가

페이스북에서는 </body> 태그 위에 스크립트를 추가하는 것이 가장 좋습니다.

여기서 ID_APPLICATION 을 모르는 경우 아래 코드를 사용할 수 있습니다.

<div id="fb-root"></div>
<p><script async="async" defer="defer" crossorigin="anonymous" src="https://connect.facebook.net/ko_KR/sdk.js#xfbml=1&version=v14.0" nonce="JHPO11WA" ></script></p>
<div class="fb-page" data-href="My_FaceBook_URL" data-tabs="timeline" data-width="300" data-height="130" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
<blockquote cite="My_FaceBook_URL" class="fb-xfbml-parse-ignore">
<p><a href="My_FaceBook_URL">나의 페이스북</a></p>
</blockquote>
</div>

My_FaceBook_URL 에는 여러분의 페이스북 전체 URL을 삽입하세요.

Tag:

0 Comments

0 댓글