12/22/2014

Chèn like facebook google + tweet vào blogspot chuẩn HTML5

Nguyễn Nhật Thiên | 12/22/2014|

Nhatthienkt.net - Thiết kế web chuẩn HTML5 là xu thế cho của những website hiện đại, phù hợp với nhiều trình duyệt và các thiết bị đi động. Các úng dụng facebook, google +, tweet rất tốt cho 1 website do vậy để chuẩn HTML5 thì cũng phải thay đổi cấu trúc của các ứng dụng này khi chèn vào website/blog.

Hướng dẫn chèn facebook like, facebook box like, google + và tweet cho blogspot chuẩn HTML5

Bước 1: Vào Mẫu --> chỉnh sửa HTML
Tìm đoạn code sau

<body>
Chèn ngay dưới nó đoạn
<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js.src = &quot;//connect.facebook.net/vi_VN/all.js#xfbml=1&quot;;
js = d.createElement(s); js.id = id;
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
fjs.parentNode.insertBefore(js, fjs);

Bước 2: Chọn các ứng dung facebook muốn chèn vào

- Facbook box like


Chèn like facebook google + tweet vào bogspot chuẩn HTML5


Vào phần Bố cục --> Thêm tiện ích --> HTML/Javascript và chèn code sau
<div class = "fb-like-box"  data-href = "http://www.facebook.com/nhatthienktblog" data-colorscheme="dark" data-width = "250" data-show-faces = "true" data-stream = "false" data-header = "false"></div>
Note:
http://www.facebook.com/nhatthienktblog   : Thay link facebook page fanlike thành link trang page fanlike của bạn.
data-colorscheme="dark": Thay đổi màu nền cho phù hợp với trang blog của bạn: dark (màu đen), Light (màu sáng)
data-width = "250": Độ rộng của khung, bạn thay đổi sao cho phù hợp với blog nhé.

- Chèn nút Like, share

Chèn like facebook google + tweet vào bogspot chuẩn HTML5
Chèn vào bất kỳ chỗ nào bạn thích
 <div class='fb-like' data-action='like' data-layout='button_count' data-share='true' data-show-faces='false'/>

- Chèn nút Google +

Chèn like facebook google + tweet vào bogspot chuẩn HTML5
<script type='text/javascript'>
  (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
  })();
   </script>

  - Chèn nút Tweet

Chèn like facebook google + tweet vào bogspot chuẩn HTML5
<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a> <script src='http://platform.twitter.com/widgets.js' type='text/javascript'>    

Vậy là xong rồi. Để kiểm tra có chuẩn HTML5 hay không vào trang này và nhập địa chỉ trang web/blog của bạn. http://validator.w3.org/

Chúc các bạn thành công!Chèn like facebook google + tweet vào blogspot chuẩn HTML5