Làm hộp chia sẻ facebook, google +,twitter 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.

Hình minh họa

Có rất nhiều plugins và thủ thuật khác nhau để làm điều này , tuy nhiên mình không ưu tiên việc sử dụng plugin cho lắm. Bạn 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="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 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.

Tags:

Thủ Thuật Wordpress

Blog Designer

Hãy cho đi rồi sẽ nhận lại nhiều hơn thế

Đã có nhiều lúc tôi không biết mình sẽ làm được gì ??? Nhưng hãy cứ tin vào chính bản thân mình, tin vào mọi người và đừng để con tim bạn lạc lối. Bạn và tôi sẽ tìm ra được đâu là đích đến để mình biết đường đi.Nếu bạn cần một người bạn, đừng ngại kết bạn với tôi.

Thư Viện Đồ Họa: www.izdesigner.com

Kết nối với tôi:
Rss
Facebook
Twitter
Google+