Thư viện

Trải nghiệm

Thứ Sáu, tháng 9 21, 2012

Facebook popup likebox dạng trượt với JQuery cho blogger

Trước đây namkna đã giới thiệu đến các bạn tiện facebook likebox dạng popup tự động hiển thị fanpage facebook ra trước blog (xem lại Tại đây), tuy nhiên nó không chuyên nghiệp và rất bất tiện khi khách thăm blog bạn không muốn "click". Chính vì vậy, sử dụng hộp tiện ích với hiệu ứng trượt sẽ giúp blog/web bạn nhìn chuyên nghiệp và mượt hơn.

Chia sẻ:
Facebook Popup likebox generator jQuery for blogger
Trước đây namkna đã giới thiệu đến các bạn  tiện facebook likebox dạng popup tự động hiển thị fanpage facebook ra trước blog (xem lại Tại đây), tuy nhiên nó không chuyên nghiệp và rất bất tiện khi khách thăm blog bạn không muốn "click". Chính vì vậy, sử dụng hộp tiện ích với hiệu ứng trượt sẽ giúp blog/web bạn nhìn chuyên nghiệp và mượt hơn.
Các bạn có thể xem Demo. Demo View
Ảnh minh họa:
Facebook Popup likebox generator jQuery for blogger

☼ Cách thêm tiện ích Facebook fanpage likebox dạng trượt bên sidebar từ JQuery cho blogger

1- Đăng nhập vào Blog
2- Vào Mẫu => Chọn Chỉnh sử HTML (Edit HTML)
3- Thêm đoạn code dưới đây sau thẻ </head>  trong template của bạn rồi "lưu lại":
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
-Nếu template của bạn có file Jquery này rồi thì cso thể bỏ qua bước này.
4-Lưu mẫu lại và tiến hành bước tiếp theo nha.

5- Chọn Phần Tử Trang => Thêm Tiện Ích => HTML/Javascript.
6- Copy và dán toàn bộ code bên dưới vào phần nội dung của tiện ích vừa tạo:
<!-- Facebook Widget Start -->
<script type="text/javascript">
/*<![CDATA[*/jQuery(document).ready(function() {jQuery(".noopslikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});/*]]>*/
</script>
<style type="text/css">
.noopslikebox{background: url("http://2.bp.blogspot.com/-pfpusNFPgws/UMlZGVwrSwI/AAAAAAAAEZY/AYECEaZOeWE/s1600/button-facebook-namkna-1.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 42px;width: 245px;z-index: 9999999;position:fixed;right:-250px;top:20%;}
.noopslikebox div{border:none;position:relative;display:block;}
.noopslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 7px;text-align: right;z-index: 999;}
.noopslikebox span a{color: gray;text-decoration:none;}
.noopslikebox span a:hover{text-decoration:underline;}</style>
<div class="noopslikebox"><div><iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/namkna.blogspot&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe>
</div>
<a href='http://4.bp.blogspot.com/-f3d06wGWHgo/UMlZJFFCyYI/AAAAAAAAEZg/lEYMXsItN20/s1600/1-namkna-blogspot.png'/></a></div>
<!-- http://namkna.blogspot.com/ -->
<!-- Facebook Widget End -->
» Tùy chỉnh code:
  • Thay http://www.facebook.com/namkna.blogspot thành URL trang fanpage trên facebook của bạn.
  • Thay link ảnh mầu đỏ thành link ảnh khác nếu bạn muốn. Thêm cho các bạn một số ảnh khác để lựa chọn. Nếu thích hình nào hãy bấm chuột vào hình đó để tải về và Uploaf lên blog để lấy link nha.
Facebook button namkna's BlogFacebook button namkna's BlogFacebook button namkna's BlogFacebook button namkna's BlogFacebook button namkna's Blog
7- Lưu lại và xem thành quả.
Chúc các bạn thành công !!!

22 nhận xét:

  1. Hi a,

    A cho e hỏi code này có chạy dc trên local ko ạ.Mà sao e test thử trên local lại có mỗi cái image. Thanks a

    Trả lờiXóa
    Trả lời
    1. Áp dụng với tất cả các web trên nền tảng blogspot em ak.

      Xóa
  2. nó chỉ có mỗi cái hình Fb thôi @Nam Tạ!!!

    Trả lờiXóa
    Trả lời
    1. Mình đã vào blog nguoiduyxuyen của bạn. Bạn hãy áp dụng để được hỗ trợ nha.

      Xóa
  3. Nam ơi, mình làm y chang mà nó lại chỉ hiển thị mỗi cái hình, chẳng có động đậy gì cả là sao ta :((
    http://yeutienganh123.blogspot.com/

    Trả lờiXóa
    Trả lời
    1. Mình chú ý bạn áp dụng nhiều thủ thuật không được nhưng khi kiểm tra thì bạn không hề áp dụng. Phải chắng bạn đang spam link.

      Xóa
  4. Trả lời
    1. Blog của bạn đã có file jquery rồi nên bỏ qua bước 4 nha.

      Xóa
  5. xin cảm ơn những hướng dẫn của bạn, chúc sức khỏe

    Trả lờiXóa
    Trả lời
    1. Rất vui vì những hướng dẫn đó có ích vơi bạn,

      Xóa
  6. Thanks ! Bác Namka em chèn đoạn : script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/
    trước thẻ
    và đoạn code trên trong widget html .Nhưng nó ko ổn lắm. bác ngó qua hộ đúng không
    http://huenq.abtland.com/

    Trả lờiXóa
    Trả lời
    1. mình vào thấy nó hoạt động rất oke mà bạn. ý bạn là nó không ổn ở diểm nào thế hả bạn.

      Xóa
  7. chắc xung đột java .trang chủ ấn chuột vào nó không đẩy ra.vào các tin bài cụ thể thì rất ok

    Trả lờiXóa
    Trả lời
    1. Bạn chỉ cần để lại một file duy nhất http://............/jquery/1.8.2/jquery.min.js trước thẻ < /head > thôi bạn ak.

      Xóa
  8. thank ông anh.
    Soi mãi cũng chỉ có 1 file
    :D
    để em soi kỷ hơn xem sao.Bác ngó qua cái site của em ổn không.đóng góp cho em chút ý kiến nhé

    Trả lờiXóa
  9. Một số trình duyệt không hiển thị fanpage đâu bạn à. Liệt kê: Opera. Firefox, Maxthon, Safari

    Trả lờiXóa
    Trả lời
    1. Bạn làm chưa đúng thôi bạn ak. Bạn có thể kiểm tran bằng cách vào link demo của mình trên các trình duyệt dó tất cả đều chạy oke.

      Xóa
  10. mình tạo 1 tiện ích html tên: FACEBOOK với code như chỉ dẫn của bạn, đã hiện ra như demo nhưng bị một lỗi nhỏ là lại hiện luôn cái thanh bar bên cạnh với cái tên FACEBOOK làm mất cả đẹp. có cách nào xóa cái widget Facebook đi không cho nó hiện nữa không cậu ? cậu vào xem hộ mình nhé http://baodailoan.com . cám ơn Nam.

    Trả lờiXóa
  11. Cảm ơn bạn, mình đã làm được và đã click mấy quảng cáo ủng hộ :)

    Trả lờiXóa
  12. Thêm Facebook Popup Vào Bloggger Với Thời Gian Hẹn Và Số Lần Lập Lại
    http://vnminhtriet.blogspot.com/2015/03/them-facebook-popup-vao-bloggger-voi.html

    Trả lờiXóa
  13. thanks nhé mình làm được rồi
    http://meovatcs.blogspot.com/

    Trả lờiXóa
  14. sao em làm nó ko hiện lên đc nhỉ

    Trả lờiXóa