Blogspot Popular post - Thêm google+ vào từng link

Thông tin về nút google + được đăng tải trên đây: developers.google.com
Trước tiên điều kiền cần không chỉ riêng blogspot mà tất cả các lọa mã nguồn template có code:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

Hoặc:

<!-- Đặt thẻ này sau thẻ Nút +1 cuối cùng, vi là ngôn ngữ Việt  -->
<script type="text/javascript">
  window.___gcfg = {lang: 'vi'};
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

Bây giờ bạn sẽ đặt nút + vào vị trí bạn muốn

<!-- Đặt thẻ này vào nơi bạn muốn Nút +1 kết xuất. -->
<div class="g-plusone" data-size="small"></div>

Tuy nhiên tôi muốn sau mỗi link bài đăng phổ biến sẽ có một nút + tương ứng.

Đây là code PopularPosts1 Nguyên mẫu nó như thế này:

<b:widget id='PopularPosts1' locked='false' title='Bài đăng phổ biến' type='PopularPosts'>
    <b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
  </b:widget>

Hoặc code trong template của bạn có thể khác, nhưng điều chúng ta quan tâm là link cho từng bài đăng:
<a expr:href='data:post.href'><data:post.title/></a>
Chúng ta sẽ thêm <g:plusone expr:href='data:post.href' size='small'/> sau mỗi link này.
Cuối cùng tôi sẽ có

<b:widget id='PopularPosts1' locked='false' title='Bài đăng phổ biến' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a> <g:plusone expr:href='data:post.href' size='small'/>
                                   <b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'>
<a expr:href='data:post.href'><data:post.title/></a> <g:plusone expr:href='data:post.href' size='small'/>
</div>
<div class='item-snippet'>
<data:post.snippet/>
</div>
</b:if><b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize' />
</a>
</div>
</b:if>
<div class='item-title'>
                                      <a expr:href='data:post.href'><data:post.title/></a> <g:plusone expr:href='data:post.href' size='small'/>
</div>
</div>
<div style='clear: both;' /><b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize' />
</a>
</div>
</b:if>
<div class='item-title'>
<a expr:href='data:post.href'><data:post.title/></a> <g:plusone expr:href='data:post.href' size='small'/>
</div>
<div class='item-snippet'>
<data:post.snippet/>
</div>
</div>
<div style='clear: both;' />
</b:if>
</b:if>
</li>
</b:loop>
</ul><b:include name='quickedit' />
</div>
</b:includable>
</b:widget>

Nút Google + còn nhiều kiểu giáng và các thuộc tính khác nhau, bạn vào đây để tự tìm hiểu vì những gì giới thiệu cũng có thể sẽ thay đổi.

thaoj