Tạo Button Login To Facebook cho Blogger

Trên blog của bạn thường thì sẽ có một vài plugin của Facebook để like - share - send... Nếu như người dùng không đăng nhập thì người dùng sẽ không thực hiện được các thao tác trên, mặc dùng các plugin của Facebook đều hỗ trợ giúp người dùng đăng nhập nhưng lại ít người biết tới. Vì thế mình đã nghĩ tới việc tạo một button giúp người dùng dễ dàng đăng nhập Faceook.

#DEMO

Login to Xem demo ngay trên bài viết này hoặc tại Codepen

#Style 1: Sticky

Đối với mẫu này thì button sẽ trượt theo màn hình như là nút back to top vậy.
1. Đăng nhập Blogger

2. Mẫu > Chỉnh sửa HTML

3. Tìm thẻ ]]></b:skin>

4. Dán code trước thẻ mà bạn vừa tìm

.loginfacebook{
  background:#5F77A8; 
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  text-decoration: none; font-weight:bold; font-family:arial;color:#fff; text-align:center; border-radius: 5px;-webkit-transform: translateZ(0);
  cursor: pointer;
  position: fixed;
  bottom: 30px;
  left: 30px;
  z-index: 90;}

5. Tìm thẻ </head>

6. Dán code dưới vào trước thẻ </head> (nếu template của bạn đã có rồi thì thôi, lưu ý thủ thuật này chỉ hoạt động tốt với phiên bản font Awesome 4.3.0)

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css' rel='stylesheet'/>

7. Tìm thẻ </body>

8. Dán code dưới vào trước thẻ </body>

<a href="javascript: void(0);" class="loginfacebook" onclick=" javascript:OpenPopup('https://m.facebook.com/login.php','WindowName','510','280','scrollbars=0');">Login to <i class="fa fa-facebook-official"></i></a><script type="text/javascript">function OpenPopup(Url,WindowName,width,height,extras,scrollbars) {
var wide = width;
var high = height;
var additional= extras;
var top = (screen.height-high)/2;
var leftside = (screen.width-wide)/2; newWindow=window.open(''+ Url + 
'',''+ WindowName + '','width=' + wide + ',height=' + high + ',top=' + 
top + ',left=' + leftside + ',features=' + additional + '' + 
',scrollbars=1');
newWindow.focus();
}</script>

9. Lưu mẫu lại

#Style 2: Static

Đối với mẫu này thì button sẽ nằm một chỗ như những buton demo hay download gì đó. Bạn có thể đặt nó ở phía trên khung comment Facebook... Nó gần giống với kiểu sticky thôi:

1. Đăng nhập Blogger

2. Mẫu > Chỉnh sửa HTML

3. Tìm thẻ ]]></b:skin>

4. Dán code trước thẻ mà bạn vừa tìm

.loginfacebook{
  background:#5F77A8; 
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  text-decoration: none; font-weight:bold; font-family:arial;color:#fff; text-align:center; border-radius: 5px;-webkit-transform: translateZ(0);
  }

5. Tìm thẻ </head>

6. Dán code dưới vào trước thẻ </head> (nếu template của bạn đã có rồi thì thôi, lưu ý thủ thuật này chỉ hoạt động tốt với phiên bản font Awesome 4.3.0)

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css' rel='stylesheet'/>

7. Tìm thẻ </body>

8. Dán code dưới vào trước thẻ </body>

<script type="text/javascript">function OpenPopup(Url,WindowName,width,height,extras,scrollbars) {
var wide = width;
var high = height;
var additional= extras;
var top = (screen.height-high)/2;
var leftside = (screen.width-wide)/2; newWindow=window.open(''+ Url + 
'',''+ WindowName + '','width=' + wide + ',height=' + high + ',top=' + 
top + ',left=' + leftside + ',features=' + additional + '' + 
',scrollbars=1');
newWindow.focus();
}</script>

9. Tìm vị trí bạn muốn chèn nút Login to Facebook à chèn code dưới vào

<a href="javascript: void(0);" class="loginfacebook" onclick=" javascript:OpenPopup('https://m.facebook.com/login.php','WindowName','510','280','scrollbars=0');">Login to <i class="fa fa-facebook-official"></i></a>

10. Lưu lại