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
<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
- vi_VN: mã ngôn ngữ, tức ngôn ngữ facebook hiển thị trên website của bạn, lấy mã ngôn ngữ tại https://developers.facebook.com/docs/accountkit/languages
- 3.0: version của sdk, bạn cập nhật ver tại đây https://developers.facebook.com/docs/graph-api/changelog
- Màu xanh: chính là app id bạn vừa tạo ở trên
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'> <div class='fb-comments' data-href='<data:blog.canonicalUrl/>' data-width='100%' data-numposts='5' data-colorscheme='light'></div> </b:if>
Bảng config
| Setting | HTML5 Attribute | Description | Default Value |
|---|---|---|---|
colorscheme | data-colorscheme | The color scheme used by the comments plugin. Can be "light" or "dark". | "light" |
href | data-href | The 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. |
mobile | data-mobile | A boolean value that specifies whether to show the mobile-optimized version or not. | Auto-detected |
num_posts | data-numposts | The number of comments to show by default. The minimum value is 1. | 10 |
order_by | data-order-by | The order to use when displaying comments. Can be "social", "reverse_time", or "time". | "social" |
width | data-width | The 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'> <div class='fb-like' data-href='<data:blog.canonicalUrl/>' data-layout='standard' data-action='like' data-size='small' data-show-faces='true' data-share='true'></div> </b:if>
Bảng config
| Setting | HTML5 Attribute | Description | Default |
|---|---|---|---|
action | data-action | The verb to display on the button. Can be either like or recommend | like |
colorscheme | data-colorscheme | The color scheme used by the plugin for any text outside of the button itself. Can be light or dark. | light |
href | data-href | The absolute URL of the page that will be liked. | Current URL. |
kid_directed_site | data-kid-directed-site | If your web site or online service, or a portion of your service, is directed to children under 13 you must enable this | false |
layout | data-layout | Selects 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 |
ref | data-ref | A label for tracking referrals which must be less than 50 characters and can contain alphanumeric characters and some punctuation (currently +/=-.:_). | None |
share | data-share | Specifies whether to include a share button beside the Like button. This only works with the XFBML version. | false |
show_faces | data-show-faces | Specifies whether to display profile photos below the button (standard layout only). You must not enable this on child-directed sites. | false |
size | data-size | The button is offered in 2 sizes i.e. large and small. | small |
width | data-width | The 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 |
|---|---|
standard | Minimum width: 225 pixels. Default width: 450 pixels. Height: 35 pixels (without photos) or 80 pixels (with photos). |
box_count | Minimum width: 55 pixels. Default width: 55 pixels. Height: 65 pixels. |
button_count | Minimum width: 90 pixels. Default width: 90 pixels. Height: 20 pixels. |
button | Minimum 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'> <div class='fb-save' data-uri='<data:blog.canonicalUrl/>' data-size='large'></div> </b:if>
Bảng config
| Setting | HTML5 Attribute | Description | Default |
|---|---|---|---|
uri | data-uri | The 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'> <div class='fb-share-button' '<data:blog.canonicalUrl/>' data-layout='button_count' data-size='small' data-mobile-iframe='true'></div> </b:if>
Bảng config
| Setting | HTML5 Attribute | Description | Default |
|---|---|---|---|
href | data-href | The absolute URL of the page that will be shared. | XFBML and HTML5 versions default to the current URL. |
layout | data-layout | Selects one of the different layouts that are available for the plugin. Can be one of box_count, button_count, button. | icon_link |
mobile_iframe | data-mobile_iframe | If 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 |
size | data-size | The 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 |
|---|---|---|---|
href | data-href | The URL of the Facebook Page | None |
width | data-width | The pixel width of the plugin. Min. is 180 & Max. is 500 | 340 |
height | data-height | The pixel height of the plugin. Min. is 70 | 500 |
tabs | data-tabs | Tabs to render i.e. timeline, events, messages. Use a comma-separated list to add multiple tabs, i.e. timeline, events. | timeline |
hide_cover | data-hide-cover | Hide cover photo in the header | false |
show_facepile | data-show-facepile | Show profile photos when friends like this | true |
hide_cta | data-hide-cta | Hide the custom call to action button (if available) | false |
small_header | data-small-header | Use the small header instead | false |
adapt_container_width | data-adapt-container-width | Try to fit inside the container width | true |
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-context | Show the number of friends who are members of the group. | TRUE |
data-href | The absolute URL of the group | None |
data-show-metadata | Shows other metadata about the group, e.g., Description. | FALSE |
data-width | Set 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 !
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