Để sử dụng các plugin của facebook bắt buộc ta phải tích hợp facebook sdk js, thực ra dùng từ chuẩn có vẻ hơi phóng đại một chút vì ta chỉ cần dán đoạn mã facebook cung cấp vào trong template của mình là xong. Nhưng khi đứng trên góc độ nhà thiết kế template ta lại có cái nhìn nhận khác, đó là làm sao cho người khác khi mua template của ta, họ có thể dễ dàng config các cài đặt càng tốt, càng hạn chế sửa code trong mã nguồn ( hướng người dùng chỉnh sửa code trong giao diện bố cục ) càng tốt,...
Trong bài viết này tôi sẽ chia sẻ cho các bạn cách tôi tích hợp facebook sdk js theo tôi nhận thấy đó là tối ưu
Code facebook cung cấp cho bạn có dạng
<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 = 'https://connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v3.0&appId=235684560514250&autoLogAppEvents=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Như vậy ta có thể thay đổi 3 giá trị
+ Ngôn ngữ hiển thị: nếu đặt cố định như trên thì rất bất tiện khi bán template cho người nước ngoài, hoặc khi bạn thay đổi ngôn ngữ trên blog sẽ lại mất công đổi lại mã ngôn ngữ, vì thế ta sẽ dùng thẻ gọi dữ liệu data:blog.locale để lấy mã ngôn ngữ blog đang dùng áp cho sdk - rất ok đúng không
+ Version SDK và APPID là 2 giá trị phải thay đổi thủ công, ta sẽ đặt chúng vào "widget-content"
Truy cập vào bố cục để lấy section cuối cùng trong template, ví dụ của tôi là social footer
Chuyển sang giao diện chỉnh sửa HTML và tìm tới nó
Tạo thêm 1 section chứa sdk js bằng cách dán thêm code sau vào sau nó
- Widget v2
<!-- FB SDK UI Config by Hung1001 -->
<style type='text/css'>.fb-sdk{display:none}</style>
<b:section class='fb-sdk' id='fb-sdk' maxwidgets='1' name='Facebook SDK JS' showaddelement='no'>
<b:widget id='HTML696' locked='true' title='Facebook SDK JS' type='HTML' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='content'>3.0/621491214865040</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:content'>
<div class='widget-content'>
<data:content/>
</div>
<script type='text/javascript'>
var BlogLocale = "<data:blog.locale/>";
//<![CDATA[
$(window).on('load', function() {
$(".fb-sdk .widget-content").each(function() {
var _ = $(this).text().trim().split("/"),
e = _[0],
t = _[1];
! function(_, n, s) {
var r, a = _.getElementsByTagName(n)[0];
if (!_.getElementById(s)) {
(r = _.createElement(n)).id = s;
r.src = "//connect.facebook.net/" + {
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"
} [BlogLocale] + "/sdk.js#xfbml=1&version=v" + e + "&appId=" + t + "&autoLogAppEvents=1", a.parentNode.insertBefore(r, a)
}
}(document, "script", "facebook-jssdk")
});
});
//]]></script>
</b:if>
</b:includable>
</b:widget>
</b:section>
- Widget v1
<!-- FB SDK UI Config by Hung1001 -->
<style type='text/css'>.fb-sdk{display:none}</style>
<b:section class='fb-sdk' id='fb-sdk' maxwidgets='1' name='Facebook SDK JS' showaddelement='no'>
<b:widget id='HTML696' locked='true' title='Facebook SDK JS' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'>3.0/621491214865040</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:content'>
<div class='widget-content'>
<data:content/>
</div>
<script type='text/javascript'>
var BlogLocale = "<data:blog.locale/>";
//<![CDATA[
$(window).on('load', function() {
$(".fb-sdk .widget-content").each(function() {
var _ = $(this).text().trim().split("/"),
e = _[0],
t = _[1];
! function(_, n, s) {
var r, a = _.getElementsByTagName(n)[0];
if (!_.getElementById(s)) {
(r = _.createElement(n)).id = s;
r.src = "//connect.facebook.net/" + {
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"
} [BlogLocale] + "/sdk.js#xfbml=1&version=v" + e + "&appId=" + t + "&autoLogAppEvents=1", a.parentNode.insertBefore(r, a)
}
}(document, "script", "facebook-jssdk")
});
});
//]]></script>
</b:if>
</b:includable>
</b:widget>
</b:section>
* Phân tích code
<b:widget-setting name='content'>3.0/621491214865040</b:widget-setting>
Thẻ này khi xem trong giao diện bố cục
Kí tự dùng để phân tách version (e = _[0]) và appID(t = _[1]) tôi dùng là dấu / tương đương với dòng var _ = $(this).text().trim().split("/"). Bạn có thể đặt kí tự gì tùy thích
Điều kiện <b:if cond='data:content'> tức khi người dùng chưa nhập nội dung vào widget coi như widget không hoạt động
Sự kiện $(window).on('load', function() rất phù hợp cho sdk js facebook vì nó sẽ tải sdk js sau khi đã tải xong trang, điều này giảm được đáng kể tốc độ tải trang
Sau khi lấy được ngôn ngữ var BlogLocale = "<data:blog.locale/>"; đối chiếu với list ngôn ngữ facebook cung cấp (các ngôn ngữ không support sẽ mặc định là tiếng anh), version và appID sẽ tiến hành tạo link và insert js
Như vậy kể cả người không biết gì về code cũng hoàn toàn có thể tích hợp facebook sdk js dễ dàng qua giao diện UI
Đến đây thì bạn thấy đã "chuẩn" chưa nhỉ :))
Ngoài ra một thiếu xót khá lớn với blogger mới vào nghề đó là giới hạn vùng hoạt động của sdk. Ví dụ tôi chỉ muốn sdk hoạt động ở trang bài viết và trang tĩnh sẽ thêm điều kiện cond='data:view.isSingleItem' vào thẻ section
<b:section cond='data:view.isSingleItem' class='fb-sdk' id='fb-sdk' maxwidgets='1' name='Facebook SDK JS' showaddelement='no'>nó sẽ tối ưu tốc độ tải trang đáng kể với những trang không cần dùng tới sdk js
KẾT LUẬN: tưởng chừng việc tích hợp facebook sdk js không có gì bận tâm ta lại khiến nó trở nên rất màu mè, tuy nhiên cái màu mè đó sẽ giúp ta tiện lợi hơn trong quá trình nâng cấp verson, thay đổi id mà không cần chọc ngoáy nhiều vào mã nguồn
Để lại bình luận nếu bạn gặp khó khăn và chúc thành công
1. Không vi phạm luật pháp nước CHXHCN Việt Nam
2. Không vi phạm thuần phong mỹ tục Việt Nam
3. Không bàn luận vấn đề liên quan đến tôn giáo, chính trị
4. Không đả kích, chửi bới hay đưa ra những lời nói không phù hợp với mục tiêu của website
5. Không bình luận với mục đích quảng cáo, trao đổi, mua bán
6. Khuyến khích sử dụng Tiếng Việt có dấu, hạn chế sử dụng tiếng lóng, viết tắt
7. Khi cần sự trợ giúp, vui lòng miêu tả chi tiết lỗi và để lại link đính kèm, tránh nói chung chung gây mất thời gian cho đôi bên