[Pinterest] Thêm nút “Pin it” cho từng bức ảnh trên blog của bạn

Your ads here!

pinterest-pinning-it

Có thể nói Blogger là một nền tảng được Google ưu ái nhưng lại “bị” những nhà phát triển hắt hủi. Có rất nhiều thứ đối với Joomla hay Wordpress rất dễ dàng vì mọi thử đã có sẵn, chúng ta chỉ cần click chuột. Với Blogger thì hoàn toàn khác, gần như mỗi người phải tự tìm tòi làm nó cho riêng mình. Khi mạng xã hội Pinterest ra đời, để có được một Pinterest widget gallerry cho Blogger chúng ta cũng phải tự phát triển như bài viết của tôi ở đây.

Hôm nay HHV sẽ hướng dẫn cách chèn một nút “Pin it” tự động cho từng bức ảnh trong blog của mình. Thủ thuật này thực sự có ít cho những bạn muốn làm các shop bán hàng online dựa trên nền tảng Blogger. Tất nhiên code này cũng hoạt động tốt trên các nền tảng khác như Wordpress hay Joomla hoặc các trang web tĩnh.

Mời bạn xem demo trước khi bắt tay vào việc.

[Pinterest] Thêm nút “Pin it” cho từng bức ảnh trên blog của bạn

1. Chèn Jquery cho blog của bạn.

Jquery rất phổ biến và thông dụng bạn nên cài đặt sẵn nó cho blog của mình. Tôi có viết một bài viêng hướng dẫn các cài đặt Jquery và Javasript cho Blogger ở đây.

2. Code

Bước 1: Đăng nhập vào Blogger tìm đến Template > Layout và tạo Add một HTML/Javascript widget sau đó chép toàn bộ đoạn code bên đưới vào trong widget này. Đặt tên widget là Pinterest Button

<script type='text/javascript'>
 $().ready(function() {

 $('.entry-content img').each(function(){
  var $permalink = $(location).attr('href');
  $(this).wrap('<div class="pinme" style="' + $(this).attr('style') + '" />').after('<a href="http://pinterest.com/pin/create/button/?url=' + $permalink + '&media=' + $(this).attr('src') + '&description=' + $(this).attr('alt') + '" class="pin-it-button" count-layout="horizontal">Pin It</a>');
 });

});

(function() {
    window.PinIt = window.PinIt || { loaded:false };
    if (window.PinIt.loaded) return;
    window.PinIt.loaded = true;
    function async_load(){
        var s = document.createElement("script");
        s.type = "text/javascript";
        s.async = true;
        s.src = "http://assets.pinterest.com/js/pinit.js";
        var x = document.getElementsByTagName("script")[0];
        x.parentNode.insertBefore(s, x);
    }
    if (window.attachEvent)
        window.attachEvent("onload", async_load);
    else
        window.addEventListener("load", async_load, false);
})();
</script>

Tuy nhiên hiện tại nút Pin it có tác dụng với tất cả các hình ảnh có trong blog. Để nút Pin ít chỉ có tác dụng ở các trang bài viết thôi ta cần phải thêm một ước nhỏ sau với câu lệnh điều kiện.

Bạn mở Blogger đến Template > Edit HTML, và click proceed. Sau đó mở Expand Widget Templates. Tìm đến Pinterest Button. Nó sẽ có dạng tương tự như sau có thể khác về id HTML nhưng bạn đừng lo lắng.

<b:widget id='HTML10' locked='false' title='Pinterest Button' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>

Bạn chỉ cần copy và thay thế cả đoạn code nằm giữa <b:includable id='main'></b:includable>

Cuối cùng bạn sẽ có đoạn code đại loại như sau.

<b:widget id='HTML10' locked='false' title='Pinterest Button' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:if>
</b:includable>

Nhấn Lưu template lại

Lưu ý:

Theo mặc định đoạn code này sẽ lấy nội dung thẻ alt để làm câu mô tả cho bức ảnh. Nếu bức ảnh không có thẻ alt thì nó sẽ hiển thị dòng chữ undefined (xem ảnh).

3. Tùy chỉnh nâng cao

Mặc định thì nút Pin it sẽ nằm ở góc dưới bên phải của mỗi bức ảnh (hình). Trong trường hợp muốn nút Pin it hiển thị ở giữa (trang demo) thì ta phải thêm một đoạn mã CSS mà tôi sẽ cung cấp ngay dưới dây. Trong trường hợp không biết chèn CSS ở đâu bạn nên tham khảo bài viết này.

<style type='text/css'>
.unpin iframe { display: none!important; }
.pinme iframe { display: block; margin: 0 auto; }
</style>

Một điều nữa bạn cũng cần lưu ý là có những bức ảnh trong bài viết mà chúng ta không muốn xuất hiện nút Pin it (ví dụ ảnh thứ 3 trong trang demo. Trong đoạn CSS ở trên tôi đã thêm một đoạn mã CSS cho việc này. Bạn phải làm một cách thủ công bằng cách thêm cho bức ảnh đó một class unpin. Cụ thể như sau.

<div class="unpin"> 
<img src="http://www.example.com/image.jpg" alt="example image"> 
</div>

-------------------

Thêm nút Pin it cho từng bức ảnh trong bài viết của blog là một cách nhắc nhớ rất hiệu quả. Đặc biệt là những bạn làm các trang web bán hàng trên nền tảng Blogger.

Nếu bạn có bất kỳ ý kiến thắc mắc nào. Xin để lại lời nhắn dưới bài viết này. Hồng Hòa Vi cũng có sử dụng Pinterest hãy kết nối để cùng chia sẻ nhé.

Cảm ơn Githubber đã truyền cảm hứng cho tôi viết bài này!

 
AboutSitemapServicesSupportPolicyContact
© 2012 Blog Thiết Kế. All rights reserved.
Posts RSSComments RSS
Do you like this template? Click here!
Scroll to top