Làm hộp chia sẻ facebook, google + trượt theo web cho WordPress

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à pass đoạn code sau :

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19

<?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à pass ngay sau đoạn code trên

01 02 03 04 05 06 07 08 09 10 11 12 13 14

<div id="social-float">     <div class="sf-twitter">         <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="designerviet" 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="https://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=”designerviet”  bạn nhớ đổi tên designerviet 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 pass đoạn css sau vào style.css trong theme của bạn.

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

/** * 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.