Friday, March 7, 2014

Chèn thêm các nút like, +1, Twitter vào blog đẹp mắt và dễ dàng cho website, blog, bài viết

Viết bình luận
Từ khi mạng xã hội phát triển và chiếm số lượng lớn người sử dụng internet trên toàn cầu, thì việc quảng bá các thông tin và website trên các phương tiện mạng xã hội là một việc làm không thể thiếu cho mỗi người sở hữu website. Từ đó các webmaster chúng ta cũng không bao giờ quên một việc rất quan trọng đó là tích hợp các nút chia sẻ bài viết, like, +1, tweet lên blog sao cho đẹp mắt và nằm ở vị trí dễ nhìn thấy nhất để người khác có thể nhấp vào, từ đó bạn sẽ được cơ hội quảng bá miễn phí nếu như nội dung của bạn đáng để chia sẻ.
Mỗi mạng xã hội hiện nay đều có một thư viện API và các nút chia sẻ bằng Javascript để các webmaster có thể tận dụng nó, cách chèn thì cũng không có gì là khó với chỉ 2 thao tác “copy & paste”. Thế nhưng nếu chúng ta muốn nó hiển thị đẹp mắt, gọn gàng như các nút mạng xã hội trong blog mình thì cũng không mấy dễ dàng gì, đặc biệt là những ai chưa có kinh nghiệm sử dụng CSS và Javascript. Nhưng trong WordPress thì ngược lại, những người có thể sử dụng một plugin hỗ trợ và nó có thể tự động chèn các nút của các mạng xã hội nổi tiếng như Facebook, Google Plus, Twitter, Digg..v.v…vào blog với đủ kiểu cọ rất hoành tráng.

Mặc dù butthons Facebook Like, Twitter Tweet và Google+1. Các nút chia sẻ này có thể được dễ dàng thêm vào bài viết Blogger bằng cách làm theo hướng dẫn của mình, sắp xếp chúng một cách hoàn hảosao cho hợp với bố cục của mỗi blog.
Để không mất công ngồi giải thích cách sắp xép các nút like hiện tại của bạn, namkna nghĩ rằng nó dễ dàng hơn thông qua việc cung cấp cho các bạn một Code sẵn có để các bạn sử dụng. Đơn giản chỉ cần loại bỏ các nút like hiện tại của bạn và thêm mã mới.

1- Đăng nhập vào Blogspot
2- Chọn Mẫu (Template)
3- Chọn Chỉnh sửa HTML (Edit HTML)
4- Tìm đoạn Code sau.
<data:post.body/>
- Lưu ý: Tùy người thiết kế mà một blog có từ 1 đến 3 đoạn như trên bạn phải chèn đúng vị trí nó mới hiển thị nha.
5- Thêm vào trước nó đoạn code bên dưới:
<!-- Scripts Start -->
<b:if cond='data:post.isFirstPost'>
<!-- Facebook -->
<div id='fb-root'/>
<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 = &quot;http://connect.facebook.net/en_US/all.js#xfbml=1&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
</script>
<!-- Google +1 -->
<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>
<!-- Twitter -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
</b:if>
<!-- Scripts End -->
<!-- Horizontal social buttons Start -->
<div class='horizontal-social-buttons' style='padding:10px 0 10px;'>
<!-- Twitter -->
<div style='float:left;'>
<a class='twitter-share-button' data-count='horizontal' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</div>
<!-- Google +1 -->
<div style='float:left;'>
<g:plusone annotation='bubble' expr:href='data:post.url' size='medium'/>
</div>
<!-- Facebook Like+Send -->
<div style='float:left;'>
<fb:like colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='true' show_faces='false'/>
</div>
<!-- Pinterest Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='pin-wrapper' style='display: inline;'>
<a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-93px; width:43px; height:20px; display:inline-block;'/>
</div>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'></script>
<script type='text/javascript'>
function run_pinmarklet() {
    var e=document.createElement(&#39;script&#39;);
    e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
    e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
    e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
    document.body.appendChild(e);
}
</script>
</b:if>
<!-- Pinterest End -->
</div>
<div style='clear: both;'/>
<!-- Horizontal social buttons End -->
6- Lưu mẫu lại và kiếm tra kết quả nha.

Một số cách và mẫu khác
Cách 1: Mình tự ngâm cứu tự động hiển thị like co tùng bài viết
<script src='http://connect.facebook.net/vi_VN/all.js#xfbml=1'></script><fb:like layout='button_count' show_faces='false'></fb:like>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="medium"></g:plusone>
Cách 2: Sử dụng công cụ của facebook
Một trong những công cụ mà Facebook cung cấp là “Like Box”. Like Box như một trang Facebook thu nhỏ. Trong đó thể hiện Fans Page và những bài đăng trên trang Facebook riêng của bạn. Khi chèn Like Box vào Blog, bạn bè của bạn có thể xem nhanh nội dung trang Facebook của bạn và họ có thể kết nối để chia sẻ với bạn thông qua nút “Like” (thích) ngay phía trên hộp thoại.

Để tạo nút Like Box cho Blog, trước tiên bạn cần có một tài khoản trên Facebook và bạn cần tạo trang Facebook riêng .

Sau khi đã có tài khoản và trang Facebook riêng, bạn vào trang http://developers.facebook.com/docs/reference/plugins/like-box để bắt đầu.
Bạn chọn vào Like Box trong danh sách Plugin


Sau khi chọn xong, nhấn nút Generate Code và lấy code dán vào vị trí nào trên blog mà bạn yêu thích. Cách này có thể sử dụng cho cả WordPress và blogger.


Cách 3: Sử dụng bên thứ 3
Chèn đoạn javascrip vào website và blog của mình.
Ví dụ ở đây mình  sử dụng http://www.addthis.com/
Sau khi bạn lựa chọn xong dạng hiển thị trang web sẻ cho phép bạn copy dạng code như sau để chèn vào website và blog của bạn.
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-530c226b7c5f520a"></script>
<!-- AddThis Button END -->

Ngoài ra các bạn có thể sử dụng code của các bên khác

Chúc thành công!

→ Click vào Ads dưới đây

0 nhận xét:

Post a Comment