Hướng dẫn Cách làm Popup Social cho trang web

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,638
Được Like
10,891
Cách làm Popup Social cho trang web

Khi các bạn vào một số website tin tức, blog nổi tiếng bạn sẽ thường thấy website có những nút social để người dùng có thể like hoặc share website của bạn lên mạng xã hội. Ở bài viết này mình sẽ hướng dẫn bạn tạo 1 Popup Social chứa nút like và share của Facebook và Google Plus cực cool cho website của bạn, điều này sẽ giúp ích rất nhiều trong việc SEO.

popup-social.png

Demo
Bước 1: Dán đoạn mã sau vào trong thẻ body ở trang web của bạn:
Mã:
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.8&appId=appIdFacebookcuaBan";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="popupSocial" >
<div class="fb-like" data-href="UrlTrangweb" data-layout="box_count" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>
<br/><br/>
<div style="width:60px">
<script src="https://apis.google.com/js/platform.js" async defer></script>
<g:plusone></g:plusone>
</div>
</div>

Bạn nhớ thay thế appIdFacebookcuaBan bằng ID Ứng Dụng của bạn trong trang developers.facebook.comUrlTrangweb bằng URL trang web của bạn nhé.

Bước 2: Bổ sung đoạn CSS sau vào trang web:
Mã:
.popupSocial{
z-index:999; text-align:center;
background:#2c4584; position:fixed;
top:45%; left:10px; padding:20px 10px;
border:1px solid #333; border-radius:10px;
  }
@media screen and (max-width:768px){
 .popupSocial{
display:none;
}

Ở đoạn CSS trên bạn có thể thay đổi giá trị của thuộc tính background để đổi màu nền của popup, hoặc thay thế lệnh left:10px; thành lệnh right:10px; nếu muốn popup neo về bên phải trang web thay vì bên trái .

Khi chạy website trên điện thoại sẽ xảy ra trường hợp là popup che mất trang vì vậy mình đã bổ sung đoạn lệnh @media screen ... để ẩn popup đối với các thiết bị có chiều rộng <= 768px

Chúc các bạn thành công.


Nguồn: blog.chuyenlaptrinh.net​
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS


Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom