Code floating button chia sẻ các mạng xã hội trên website

Chào các bạn ở bài này netweb.vn sẽ hướng dẫn các bạn tạo nút chia sẻ mạng xã hội.

Và sau đây là đoạn code của chúng tôi đã áp dụng cho các khách hàng của chúng tôi.

Đoạn code html chia sẻ mạng xã hội, cái này mình kết hợp cả giỏ hàng, facebook, zalo, youtube, pinterest,  Xem demo: http://kientruc.techcorp.vn/

Nếu chưa biết tạo chia sẻ zalo xem bài này: https://netweb.vn/huong-dan-them-nut-chia-se-zalo-cho-website.html

Đoạn code cho html.

<?php
    $actual_link = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
?>
<div class="sticky-container">
    <ul class="sticky">

		<li> 
            <p><a href="<?php echo WC()->cart->get_cart_url(); ?>" title="<?php _e( 'Giỏ Hàng ' ); ?>"> <img class="img-mxh" src="https://kientruc.techcorp.vn/icon/cart-circle.png" width="32" height="32"> <span class = "cart-1" > <?php echo sprintf (_n( 'Cart (%d)', 'Cart (%d)', WC()->cart->cart_contents_count ), WC()->cart->cart_contents_count ); ?></span> </a></p>
        </li>
		
        <li> 
            <p><a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $actual_link; ?>" target="_blank"> <img class="img-mxh" src="https://kientruc.techcorp.vn/icon/facebook-circle.png" width="32" height="32"> Chia sẻ<br>Facebook</a></p>
        </li>
        <li>
			 
           <p><a class="zalo-share-button" data-href="<?php echo $actual_link; ?>" data-oaid="1894205297991645701" data-layout="2" data-color="blue" data-customize=true><img class="img-mxh" src="https://kientruc.techcorp.vn/icon/zalo-circle.png" width="32" height="32"> Chia sẻ<br>Lên Zalo</a></p>
        </li>
       
        <li>
            
            <p><a href="#" target="_blank"><img class="img-mxh" src="https://kientruc.techcorp.vn/icon/youtube-circle.png" width="32" height="32"> Đăng ký<br>YouYube</a></p>
        </li>
        <li> 
            <p><a href="https://www.pinterest.com/pin/create/link/?url=<?php echo $actual_link; ?>&media=<?php echo the_post_thumbnail_url('large'); ?>&description=<?php echo get_the_title(get_the_ID()); ?>" target="_blank"><img class="img-mxh" src="https://kientruc.techcorp.vn/icon/pin-circle.png" width="32" height="32"> Chia sẻ<br>Pinterest</a></p>
        </li>
    </ul>
</div>

Đoạn code file css

.sticky-container {
    padding: 0px;
    margin: 0px;
    position: fixed;
    right: -148px;
    top: 150px;
    width: 210px;
    z-index: 1100;
}

img.img-mxh {
    margin-top: 2px !important;
}

.sticky li {
    list-style-type: none;
    background-color: #fff;
    color: #efefef;
    border-radius: 5px;
    opacity: 0.7;
    height: 43px;
    padding: 0px;
    margin: 3px 0px 1px 0px;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
    cursor: pointer;
}
.sticky li:hover{
    margin-left:-70px;
}
.sticky li img{
    float:left;
    margin:5px 4px;
    margin-right:5px;
}
.sticky li p{
    padding-top:5px;
    margin:0px;
    line-height:16px;
    font-size:11px;
}
.sticky li p a{
    text-decoration:none;
    color:#2C3539;
}
.sticky li p a:hover{
    text-decoration:underline;
}

.sticky {
    border: none !important;
}

code hàng ngang

<style>
	ul.mangxahoihi li {
    float: left;
    display: inline;
}
.mxh-container {
    width: 100%;
    float: left;
    margin-top: 11px;
}
ul.mangxahoihi li {
    padding-right: 15px;
}
ul.mangxahoihi img {
    width: 26%;
}
a.zalo-share-button {
    cursor: pointer;
}	
</style>

<script src="https://sp.zalo.me/plugins/sdk.js"></script>	

<?php
    $actual_link = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
?>
<div class="mxh-container">
    <ul class="mangxahoihi">
		<li>
			<div class="fb-like" data-href="<?php the_permalink(); ?>" data-width="" data-layout="button_count" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>
		</li>
		
        <li> 
            <p><a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $actual_link; ?>" target="_blank"> <img class="img-mxh" src="https://netweb.vn/icon/facebook-circle.png" width="32" height="32"> Chia sẻ</a></p>
        </li>
        <li>
			 
           <p><a class="zalo-share-button" data-href="<?php echo $actual_link; ?>" data-oaid="1601119718423308618" data-layout="2" data-color="blue" data-customize=true><img class="img-mxh" src="https://netweb.vn/icon/zalo-circle.png" width="32" height="32"> Chia sẻ</a></p>
        </li>
       
        <li>
            
            <p><a href="#" target="_blank"><img class="img-mxh" src="https://netweb.vn/icon/youtube-circle.png" width="32" height="32"> Đăng ký</a></p>
        </li>
        <li> 
            <p><a href="https://www.pinterest.com/pin/create/link/?url=<?php echo $actual_link; ?>&media=<?php echo the_post_thumbnail_url('large'); ?>&description=<?php echo get_the_title(get_the_ID()); ?>" target="_blank"><img class="img-mxh" src="https://netweb.vn/icon/pin-circle.png" width="32" height="32"> Chia sẻ</a>
			</p>
        </li>
    </ul>
</div>

 

Bài viết mới cập nhập

• 

  Hướng dẫn quản lý web bán hàng 2 ngôn ngữ

  1 năm trước, 341 Lượt xem

  Xin chào các bạn! hôm nay netweb sẽ hướng dẫn các bạn quản lý web bán hàng 2 ngôn ngữ! Hướng dẫn tạo user thành…

• 

  Hướng dẫn tạo user thành viên và quản lý đơn hàng

  1 năm trước, 334 Lượt xem

  Trong bài viết này, netweb sẽ hướng dẫn các bạn tạo user thành viên và đặt hàng quản lý đơn hàng trong WooCommerce Thêm mới…

• 

  Hướng dẫn Plugin floating contact

  1 năm trước, 440 Lượt xem

  Netweb xin hướng dẫn cách quản lý Plugin floating contact các bạn nhớ làm theo kỹ tường bước để plugin hoạt động Tính năng: Hiển…

• 

  ánh xạ OneDrive for Business dưới dạng Ổ đĩa mạng

  1 năm trước, 448 Lượt xem

  Hôm nay netweb sẽ hướng dẫn các bạn ánh xạ ổ đĩa mạng để làm việc online dùng như ổ cứng bình thường qua OneDrive…

• 

  Backup Yandex Mail

  2 năm trước, 286 Lượt xem

  Khác với dịch vụ email theo tên của microsoft và google với chi phí đắt đỏ tầm 1tr/năm/1user, vì thế nên netweb khuyên dùng dịch…