Cách làm hộp chia sẻ facebook, google + trượt theo web

Hôm nay mình sẽ chia sẻ với các bạn cách tích hợp các cộng cụ của các mạng xã hội nổi tiếng hiện nay như facebook, twitter và google + vào web / blogs của bạn. Có rất nhiều plugins và thủ thuật khác nhau để làm điều này , tuy nhiên mình sẽ giới thiệu đến các bạn cái mà mình đang dùng vì với mình nó là cái tốt nhất, bạn hãy cùng thử nghiệm và làm xem sao nhá.

Bước 1 :
Vào file footer.php trong theme hiện tại đang dùng của bạn,tìm vị trí trước thẻ </body> và past đoạn code sau :

<?php

// URL to share

if( is_singular() ) {

         $url = get_permalink();

         $text = the_title('', '', false);

} else if ( is_category() || is_tag() ) {

         if(is_category() ) {

                 $cat = get_query_var('cat');

                 $url = get_category_link($cat);

         } else {

                 $tag = get_query_var('tag_id');

                 $url = get_tag_link($tag);

         }

         $text = single_cat_title('', false) . ' on ' . get_bloginfo('name');

} else {

         $url = get_bloginfo('url');

         $text = get_bloginfo('name') . ' - ' . get_bloginfo('description');

}

?>

Bước 2 : Copy đoạn code sau và past ngay sau đoạn code trên

<div id="social-float">

         <div class="sf-twitter">

                 <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="sharecode.vn" data-url="<?php echo $url; ?>" data-text="<?php echo $text; ?>">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

         </div>

         <div class="sf-facebook">

                 <iframe src="http://www.facebook.com/plugins/like.php?app_id=186708408052490&amp;href=<?php echo urlencode($url); ?>&amp;send=false&amp;layout=box_count&amp;width=50&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:62px;" allowTransparency="true"></iframe>

         </div>

         <div class="sf-plusone">

                 <!-- Place this tag in your head or just before your close body tag -->

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

                 <!-- Place this tag where you want the +1 button to render -->

                 <g:plusone size="tall" href="<?php echo $url; ?>"></g:plusone>

         </div>

</div><!-- /social-float -->

Chú ý : ở phần twitter chỗ đoạn data-via=”sharecode.vn” bạn nhớ đổi tên sharecode.vn thành user name trên twitter của bạn.

Bước 3 : Đến đây bạn chỉ cần tạo css nữa là xong, và bạn past đoạn css sau vào style.css trong theme của bạn.

/** * Floating Social Buttons */

#social-float {

         position: fixed;

         left: 10px;

         bottom: 10px;

         width: 55px;

         padding: 10px 5px;

         text-align: center;

         background-color: #fff;

         border: 5px solid rgba(180, 180, 180, .7);

         -webkit-border-radius: 8px;

         -moz-border-radius: 8px;

         border-radius: 8px;

         display: none;

}

.sf-twitter {

         height: 62px;

         margin-bottom: 10px;

}

.sf-facebook {

         height: 60px;

         margin-bottom: 10px;

}

.sf-plusone {

         height: 60px;

}

Vậy là đã hoàn tất, nếu có bạn nào làm không được chỗ nào thì để lại lời nhắn nha, mình sẽ giúp các bạn , chúc các bạn thành công.