Labels

[Tutorial] Connect Facebook plugins with Blogger


Trong bài viết trước tôi đã giới thiệu cho bạn bộ Facebook Sharing cho blog/website, đó chỉ là một phần nhỏ trong bộ plugin mà facebook cung cấp, trong bài viết này chúng ta sẽ tiếp tục tìm hiểu về các bộ plugin và chức năng tuyệt vời chúng mang lại cho website của bạn

Trước tiên bạn cần tạo cho mình 1 app để dễ quản lý, truy cập https://developers.facebook.com/apps và tạo 1 app. Sau khi tạo thành công app bạn cần đặt nó ở chế độ công khai bằng việc xác nhận các thông tin trong phần cài đặt


Sau khi bật thành công bạn sẽ chỉnh sửa HTML trong template của mình như sau

Thêm đoạn prefix='og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#' vào thẻ <head...>. Code sẽ như sau

<head prefix='og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#'>

Tiếp tục chèn thêm thẻ meta xác nhận app (chèn ngay dưới thẻ <head...>)

<meta content='xxx' property='fb:app_id'/>

Thay xxx thành app id của ứng dụng bạn vừa tạo

Lưu ý: một số thủ thuật cũ yêu cầu bạn thêm <meta content='xxx' property='fb:admins'/> tuy nhiên trong các bản cập nhật mới đây facebook không cho phép xuất hiện đồng thời cả app id và admin id, vì vậy nếu blog của bạn có <meta content='xxxxx' property='fb:admins'/> bạn có thể xóa nó đi

Để sử dụng các sản phẩm của facebook bạn tiến hành dán code sau vào trước thẻ đóng </body>

<script type='text/javascript'>//<![CDATA[
$(window).on('load', function() {
    (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=XXX&autoLogAppEvents=1';
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
});
//]]></script>

Ở đây tôi có dùng sự kiện onload để tăng tốc tải trang cho bạn. Trong đó bạn cần thay các giá trị như sau

I. Facebook Comment


Chèn khung nhận xét của facebook vào nơi bạn muốn hiển thị, sử dụng thẻ điều kiện giới hạn khung nhận xét chỉ hiển thị ở trang bài viết và trang tĩnh

<b:if cond='data:view.isSingleItem'>
    &lt;div class=&#39;fb-comments&#39; data-href=&#39;<data:blog.canonicalUrl/>&#39; data-width=&#39;100%&#39; data-numposts=&#39;5&#39; data-colorscheme=&#39;light&#39;&gt;&lt;/div&gt;
</b:if>

Bảng config

Setting HTML5 Attribute Description Default Value
colorschemedata-colorschemeThe color scheme used by the comments plugin. Can be "light" or "dark"."light"
hrefdata-hrefThe absolute URL that comments posted in the plugin will be permanently associated with. All stories shared on Facebook about comments posted using the comments plugin will link to this URL.Current URL.
mobiledata-mobileA boolean value that specifies whether to show the mobile-optimized version or not.Auto-detected
num_postsdata-numpostsThe number of comments to show by default. The minimum value is 1.10
order_bydata-order-byThe order to use when displaying comments. Can be "social", "reverse_time", or "time"."social"
widthdata-widthThe width of the comments plugin on the webpage. This can be either a pixel value or a percentage (such as 100%) for fluid width. The mobile version of the comments plugin ignores the width parameter and instead has a fluid width of 100%. The minimum width supported by the comments plugin is 320px.550

Đến đây người dùng đã có thể bình luận được rồi, tuy nhiên bạn sẽ chẳng nhận được thông báo nào cả. Bạn cần cấu hình nhận thông báo như sau

Truy cập https://developers.facebook.com/tools/comments/app_id_của_bạn/ và làm theo chỉ dẫn sau



Bạn có thể chỉ định nhiều người kiểm duyệt, thông báo sẽ được gửi tới họ khi người dùng bình luận

II. Nút Like


Nút like cũng được áp dụng cho từng bài viết bằng code sau

<b:if cond='data:view.isSingleItem'>
 &lt;div class=&#39;fb-like&#39; data-href=&#39;<data:blog.canonicalUrl/>&#39; data-layout=&#39;standard&#39; data-action=&#39;like&#39; data-size=&#39;small&#39; data-show-faces=&#39;true&#39; data-share=&#39;true&#39;&gt;&lt;/div&gt;
</b:if>

Bảng config

Setting HTML5 Attribute Description Default
actiondata-actionThe verb to display on the button. Can be either like or recommendlike
colorschemedata-colorschemeThe color scheme used by the plugin for any text outside of the button itself. Can be light or dark.light
hrefdata-hrefThe absolute URL of the page that will be liked.Current URL.
kid_directed_sitedata-kid-directed-siteIf your web site or online service, or a portion of your service, is directed to children under 13 you must enable thisfalse
layoutdata-layoutSelects one of the different layouts that are available for the plugin. Can be one of standard, button_count, button or box_count. See the FAQ for more details.standard
refdata-refA label for tracking referrals which must be less than 50 characters and can contain alphanumeric characters and some punctuation (currently +/=-.:_).None
sharedata-shareSpecifies whether to include a share button beside the Like button. This only works with the XFBML version.false
show_facesdata-show-facesSpecifies whether to display profile photos below the button (standard layout only). You must not enable this on child-directed sites.false
sizedata-sizeThe button is offered in 2 sizes i.e. large and small.small
widthdata-widthThe width of the plugin (standard layout only), which is subject to the minimum and default width. Please see Layout Settings below for more details.See standard in Layout Settings

Cài đặt bố cục

Layout Default Sizes
standardMinimum width: 225 pixels.
Default width: 450 pixels.
Height: 35 pixels (without photos) or 80 pixels (with photos).
box_countMinimum width: 55 pixels.
Default width: 55 pixels.
Height: 65 pixels.
button_countMinimum width: 90 pixels.
Default width: 90 pixels.
Height: 20 pixels.
buttonMinimum width: 47 pixels.
Default width: 47 pixels.
Height: 20 pixels.

III. Nút lưu bài viết


<b:if cond='data:view.isSingleItem'>
   &lt;div class=&#39;fb-save&#39; data-uri=&#39;<data:blog.canonicalUrl/>&#39; data-size=&#39;large&#39;&gt;&lt;/div&gt;
</b:if>

Bảng config

Setting HTML5 Attribute Description Default
uridata-uriThe absolute link of the page that will be saved.Current Link/Address

IV. Nút chia sẻ bài viết


<b:if cond='data:view.isSingleItem'>
   &lt;div class=&#39;fb-share-button&#39; &#39;<data:blog.canonicalUrl/>&#39; data-layout=&#39;button_count&#39; data-size=&#39;small&#39; data-mobile-iframe=&#39;true&#39;&gt;&lt;/div&gt;
</b:if>

Bảng config

Setting HTML5 Attribute Description Default
hrefdata-hrefThe absolute URL of the page that will be shared.XFBML and HTML5 versions default to the current URL.
layoutdata-layoutSelects one of the different layouts that are available for the plugin. Can be one of box_count, button_count, button.icon_link
mobile_iframedata-mobile_iframeIf set to true, the share button will open the share dialog in an iframe (instead of a popup) on top of your website on mobile. This option is only available for mobile, not desktop. For more information see Mobile Web Share Dialog.false
sizedata-sizeThe button is offered in 2 sizes i.e. large and small.small

V. Tiện ích trang 



Tiện ích trang nhúng vào website giúp tăng tương tác với người dùng, facebook cung cấp rất nhiều tùy chọn cho tiện ích này

 Bảng config

Setting HTML5 Attribute Description Default
hrefdata-hrefThe URL of the Facebook PageNone
widthdata-widthThe pixel width of the plugin. Min. is 180 & Max. is 500340
heightdata-heightThe pixel height of the plugin. Min. is 70500
tabsdata-tabsTabs to render i.e. timeline, events, messages. Use a comma-separated list to add multiple tabs, i.e. timeline, events.timeline
hide_coverdata-hide-coverHide cover photo in the headerfalse
show_facepiledata-show-facepileShow profile photos when friends like thistrue
hide_ctadata-hide-ctaHide the custom call to action button (if available)false
small_headerdata-small-headerUse the small header insteadfalse
adapt_container_widthdata-adapt-container-widthTry to fit inside the container widthtrue

Ví dụ đơn giản

<div class="fb-page"
  data-href="https://www.facebook.com/hoanghung96cs" 
  data-width="340"
  data-hide-cover="false"
  data-show-facepile="true">
</div>

Thay id fanpage thành của bạn. Tùy chỉnh kích thước, các thuộc tính như bảng config để phù hợp với bố cục trang web của bạn

VI. Live chat


Live chat cho phép bạn chat trực tuyến với người dùng, hiện tại thì facebook đã cho phép bạn tích hợp live chat dễ dàng hơn, điều kiện là bạn cần có 1 fanpage. bạn theo chỉ dẫn sau


Lăn chuột xuống và chọn thiết lập


Tại đây bạn có thể chọn ngôn ngữ hiển thị và lời chào


Tiếp tục cấu hình màu sắc và thời gian phản hồi


Để live chat hoạt động bạn cần thêm tên miền trang web vào


Cuối dùng nhận mã và dán vào trang web

LƯU Ý: bạn chỉ cần lấy đoạn "Your customer chat code" thôi nhé, vì ta đã tích hợp sdk trước đó rồi

VII. Group Plugin


Đây là 1 plugin mới của facebook, cho phép gắn nhóm của bạn lên trang, điều này sẽ giúp nhiều người biết đến nhóm của bạn hơn

<div class="fb-group" data-href="https://www.facebook.com/groups/xxx/" data-width="280" data-show-social-context="true" data-show-metadata="false"></div>

Thay màu đỏ thành id (số hoặc chữ) group của bạn

Bảng config

Attribute Description Default
data-show-social-contextShow the number of friends who are members of the group.TRUE
data-hrefThe absolute URL of the groupNone
data-show-metadataShows other metadata about the group, e.g., Description.FALSE
data-widthSet the plugin width in pixels. The minimum width is 180 and the maximu width is 500 pixels.280

Trên đây tôi đã giới thiệu cho các bạn các bộ plugin facebook thường dùng cho website, ngoài ra nếu bạn muốn tìm hiểu thêm có thể truy cập https://developers.facebook.com/docs/plugins. Có thể trong tương lai sẽ có thêm các plugin mới

Tận dụng tối đa lợi ích mạng xã hội này mang lại sẽ giúp website của bạn được biết đến rộng rãi hơn

Hãy để lại nhận xét nếu bạn gặp khó khăn trong quá trình tích hợp

Chúc bạn thành công !