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

[PVS]

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.

Demo
​

Bước 1: Dán đoạn mã sau vào trong thẻ body ở trang web của bạn:

<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.com và UrlTrangweb bằng URL trang web của bạn nhé.

Bước 2: Bổ sung đoạn CSS sau vào trang web:

.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​