[TUTs] fancyFBcmt - Xem ảnh trong Fancybox với facebook bình luận

  Bài viết hay nhất1

fancyFBcmt - Xem ảnh trong Fancybox với facebook bình luận


Lấy ý tưởng từ plugin WP Fancybox Gallery With Facebook Comment Support viết cho WordPress, mình đã viết plugin fancyFBcmt, với chức năng tương đương, và tối ưu hơn.
fancyFBcmt là một fancybox helper, viết bằng API fancybox2, nên thừa hưởng tất cả những ưu điểm của fancybox2.


Chức năng


  1. Thiết kế giao diện xem ảnh tương đồng với facebook.
  2. Căn chỉnh vị trí, kích thước fancybox thumbnail helper, thêm hiệu ứng cho khung bình luận.
  3. Tự tắt khung bình luận khi màn hình quá hẹp và khi facebook bị chặn.
  4. Lưu lại khung bình luận khi xem ảnh lặp lại (ver WP tạo bình luận mới).
  5. Giả liên kết để sử dụng nhiều ảnh trong cùng một trang, liên kết này có thể dùng để kích hoạt fancyFBcmt.


Demo

[You must be registered and logged in to see this image.]
Giao diện fancyFBcmt


Hướng dẫn


Bước 1

Kích hoạt Facebook Connect

ACP >> Modules >> Facebook Connect >> Cấu hình diễn đàn

Nếu bạn chưa tạo ứng dụng trên facebook thì truy cập: [You must be registered and logged in to see this link.]

Nếu bạn chưa đăng ký tài khoản Deverloper, nhấn vào Register as a Deverloper để đăng ký

Trường hợp tài khoản bạn chưa được kích hoạt, thì truy cập: [You must be registered and logged in to see this link.]
Làm theo hướng dẫn, sau đó quay lại trang đăng ký, thực hiện các bước tiếp theo.

Nếu bạn đã đăng ký tài khoản Deverloper, nhấn vào Create a New App và điền các thông tin cần thiết.

Khi tạo app thành công bạn sẽ có được App IDFacebook secret code để kích hoạt Facebook Connect.

[You must be registered and logged in to see this image.]

Tiếp theo bạn cần kích hoạt app bạn vừa tạo.
Tại tab Thiết lập, bạn nhấn vào Thêm nền tảng >> Trang Web và nhập URL của diễn đàn và ô Site URL.
Sau đó mới điền Domain vào App Domains (Không có [You must be registered and logged in to see this link.]).

[You must be registered and logged in to see this image.]

Đăng ký nhiều Domain:

Và kích hoạt app tại tab Trạng thái & Đánh giá.

[You must be registered and logged in to see this image.]

Thế là xong phần app Facebook.

Bước 2

Chỉnh sửa Templates

Vì mặc định forumotion chỉ dùng Facebook Connect để đăng nhập và đăng ký nên ngoài các trang đó nó không hiển thị ở các trang khác, mà mình cần sử dụng nó ở trong bài viết.
Ngoài ra, nếu bạn muốn dùng Facebook Connect ở tất cả các trang như trường hợp dùng login popup thì sẽ phải kích hoạt ở tất cả các trang.

ACP >> Display >> Templates >> QLTT >> overall_header

Tìm:
Code:
{NAMESPACE_FB_LIKE} {NAMESPACE_FB}
Thay bằng:
Code:
xmlns:fb="http://ogp.me/ns/fb#"

Tìm:
Code:
{META_FB_LIKE}
Thay bằng:
Code:
<meta property="fb:admins" content="<AdminID>"/>
<meta property="fb:app_id" content="<AppID>"/>
Để có Admin ID, bạn truy cập [You must be registered and logged in to see this link.]
Thay <username> bằng username tài khoản Facebook của bạn.
Lấy thông số id thay vào <AdminID>.
Thay <AppID> bằng code App ID tạo ở bước 1.

Tìm:
Code:
<!-- BEGIN switch_fb_login -->
<script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
<script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
<!-- END switch_fb_login -->
Thay bằng:
Code:
<script src="//connect.facebook.net/vi_VN/all.js" type="text/javascript"></script>
<script src="//illiweb.com/rs3/90/frm/ograph/fb_login.js" type="text/javascript"></script>

ACP >> Display >> Templates >> QLTT >> overall_footer_end

Tìm:
Code:
<!-- BEGIN switch_facebook_login -->
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
FB.init({
   appId: '{switch_facebook_login.FACEBOOK_APP_ID}',
    status: true,
    cookie: true,
    xfbml: true,
   oauth: true
});
//]]>
</script>
<!-- END switch_facebook_login -->

<!-- BEGIN switch_facebook_logout_TMP -->
<script type="text/javascript">
//<![CDATA[
FB.Event.subscribe('auth.logout', function(response) {
   if ($('a#logout'))
   {
      var lien_redir = $('a#logout').attr('href');

      if ($('a#logout').attr('href') && $('a#logout').attr('href') != '')
      {
         document.location.href = 'http://{switch_facebook_logout.SERVER_NAME}/' + lien_redir;
      }
   }
});

$(document).ready( function() {
   $('a#logout').click( function() {
      FB.logout();
   } );
} );
//]]>
</script>
<!-- END switch_facebook_logout_TMP -->
Thay bằng:
Code:
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
if(location.pathname != "/login" && location.pathname != "/register" && GetParam("page_profil") != "facebook" && window.FB){
        FB.init({
                appId: '<App ID>',
                status: true,
                cookie: true,
                xfbml: true,
                oauth: true
        });
}
if(window.FB){
        function FacebookInviteFriends() {
            FB.ui({
                method: 'apprequests',
                message: '{SITENAME_TITLE}{PAGE_TITLE}'
            });
        }
        $("#cont_fb_invit").replaceWith('<a class="FacebookInviteFriends" href="javascript:;" onclick="FacebookInviteFriends();">Mời bạn bè tham gia diễn đàn</a>');
}
//]]>
</script>

<!-- BEGIN switch_facebook_logout_TMP -->
<script type="text/javascript">
//<![CDATA[
if(window.FB){
        FB.Event.subscribe('auth.logout', function(response) {
                if ($('a#logout'))
                {
                        var lien_redir = $('a#logout').attr('href');
        
                        if ($('a#logout').attr('href') && $('a#logout').attr('href') != '')
                        {
                                document.location.href = 'http://{switch_facebook_logout.SERVER_NAME}/' + lien_redir;
                        }
                }
        });
        
        $(function() {
                $('a#logout').click(function() {
                        FB.logout();
                });
        });
}
//]]>
</script>
<!-- END switch_facebook_logout_TMP -->

Thay <App ID> bằng code App ID tạo ở bước 1.

Bước 3

Thêm CSS

ACP >> Display >> Pictures and Colors >> Colors >> CSS Stylesheet

Code:
/* fancyFB v0.1 by Zzbaivong */
.fancybox-overlay,.fancybox-comments-block,#fancybox-thumbs,.fancybox-overlay *,.fancybox-comments-block *,#fancybox-thumbs *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.fancybox-wrap,.fancybox-skin,.fancybox-outer,.fancybox-inner,.fancybox-image,.fancybox-wrap iframe,.fancybox-wrap object,.fancybox-nav,.fancybox-nav span,.fancybox-tmp{border:0;outline:none;vertical-align:top;margin:0;padding:0}
.fancybox-wrap{position:fixed;top:0;left:0;z-index:802}
.fancybox-skin{position:relative;background:url(http://i56.servimg.com/u/f56/18/59/49/93/fancyb10.gif) center center no-repeat #111}
.fancybox-opened{z-index:803}
.fancybox-outer,.fancybox-inner{position:relative}
.fancybox-inner{overflow:hidden}
.fancybox-type-iframe .fancybox-inner{-webkit-overflow-scrolling:touch}
.fancybox-error{color:#444;font:14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;white-space:nowrap;margin:0;padding:15px}
.fancybox-image,.fancybox-iframe{display:block;width:100%;height:100%}
.fancybox-image{max-width:100%;max-height:100%}
.fancybox-close,.fancybox-prev span,.fancybox-next span{background-image:url(http://i56.servimg.com/u/f56/18/59/49/93/fancyb20.png);opacity:0.8;z-index:900}
#fancybox-loading{}
#fancybox-loading div{}
.fancybox-close{background-position:0 -114px;position:fixed;top:0;left:0;width:45px;height:45px;cursor:pointer;z-index:804}
.fancybox-nav{position:fixed;top:0;width:20%;height:100%;cursor:pointer;text-decoration:none;background:transparent url(http://i56.servimg.com/u/f56/18/59/49/93/blank10.gif);-webkit-tap-highlight-color:rgba(0,0,0,0)}
.fancybox-prev{left:0}
.fancybox-next{right:0}
.fancybox-nav span{position:fixed;top:50%;width:45px;height:57px;margin-top:-75px;cursor:pointer;visibility:hidden}
.fancybox-prev span{left:0;background-position:0 0}
.fancybox-next span{right:0;background-position:0 -57px}
.fancybox-tmp{position:absolute;top:-99999px;left:-99999px;visibility:hidden;max-width:99999px;max-height:99999px;overflow:visible!important}
.fancybox-lock{overflow:hidden!important;width:auto}
.fancybox-lock body{overflow:hidden!important}
.fancybox-lock-test{overflow-y:hidden!important}
.fancybox-overlay{position:absolute;top:0;left:0;overflow:hidden;display:none;z-index:801;background:url(http://i56.servimg.com/u/f56/18/59/49/93/overla11.png)}
.fancybox-overlay-fixed{position:fixed;bottom:0;right:0}
.fancybox-lock .fancybox-overlay{overflow:hidden}
.fancybox-title{visibility:hidden;font:normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;position:relative;text-shadow:none;z-index:805}
.fancybox-title-float-wrap{position:absolute;bottom:0;right:50%;margin-bottom:-35px;z-index:805;text-align:center}
.fancybox-title-float-wrap .child{display:inline-block;margin-right:-100%;background:rgba(0,0,0,0.8);text-shadow:0 1px 2px #222;color:#fff;font-weight:700;line-height:24px;white-space:nowrap;padding:2px 20px}
.fancybox-title-outside-wrap{position:relative;margin-top:10px;color:#fff}
.fancybox-title-inside-wrap{padding-top:10px}
.fancybox-title-over-wrap{position:absolute;bottom:0;left:0;color:#fff;background:rgba(0,0,0,.8);padding:10px}
#fancybox-thumbs{position:fixed;left:0;width:100%;overflow:hidden;z-index:805}
#fancybox-thumbs.bottom{bottom:2px}
#fancybox-thumbs.top{top:2px}
#fancybox-thumbs ul{position:relative;list-style:none;margin:0;padding:0}
#fancybox-thumbs ul li{float:left;opacity:0.5;padding:1px}
#fancybox-thumbs ul li.active{opacity:0.75;border:1px solid #fff;padding:0}
#fancybox-thumbs ul li:hover{opacity:1}
#fancybox-thumbs ul li a{display:block;position:relative;overflow:hidden;border:1px solid #222;background:#111;outline:none}
#fancybox-thumbs ul li img{display:block;position:relative;border:0;max-width:none;padding:0}
.fancybox-comments-block{position:fixed;z-index:999;top:0;right:0;background:#f2f2f2;height:100%;display:block;overflow:auto;overflow-x:hidden;width:430px;margin-right:0!important;padding:0 5px}
.fancybox-nav:hover span,.fancybox-opened .fancybox-title{visibility:visible}
.zzbv_FBcmt{position:absolute;top:0;right:0;z-index:0;background:inherit;height:100%;width:100%;padding:0 5px}

Bước 4

Tạo file javascript

ACP >> Modules >> HTML & JAVASCRIPT >> Javascript codes management

Title * : Fancybox min v2.1.5 + mousewheel + fancythumbs + fancyFBcmt
Placement : In the topics
Javascript Code * :
[You must be registered and logged in to see this link.]


Tùy biến với tham số


THAM SỐ PHÂN LOẠIMẶC ĐỊNH GHI CHÚ
numberPostsnumber7Số bình luận tối đa sẽ hiển thị.
commentsWidthnumber420Chiều rộng phần bình luận.
colorSchemestring"light" Dùng "dark" cho giao diện bình luận tối.


Nguồn

Plugin Fancybox2 (fancyapps.com)
Zzbaivong (devs.forumvi.com)
  Bài viết hay nhất2
cho em hỏi cái này bình luận cho từng ảnh, hay cả bài viết
  Bài viết hay nhất3
Cho từng ảnh nhé, thử ngay trong topic này cũng được.
  Bài viết hay nhất4
Không thấy gửi tin về huynh ơi ' '~
  Bài viết hay nhất5
[You must be registered and logged in to see this link.]
KirigayaKazuto wrote:Không thấy gửi tin về huynh ơi ' '~
Người quản lý cmt đầu tiên nó ko hiện, phải chuyển qua tab Moderator View rồi quay lại Public Comments mới hiện. Vấn đề này là do facebook nhé.
  Bài viết hay nhất6
đù đù víp víp
  Bài viết hay nhất7
giờ muốn bỏ cmt fb, chỉ để lại trình xem ảnh thôi thì bỏ thế nào huynh
  Bài viết hay nhất8
Bước 4: Tạo javascript

ACP >> Modules >> HTML & JAVASCRIPT >> Javascript codes management

Title * : Fancybox min v2.1.5
Placement : In the topics
Javascript Code * : [You must be registered and logged in to see this link.]
link Javascript Code mà các bạn k vào đc thì vào lin này [You must be registered and logged in to see this link.] (nghĩa là bỏ ?v=2.1.5 đi ấy, tại mình vào bằng link ad đưa k đc nên ghi chú :D)
  Bài viết hay nhất9
sao ko có dòng like ảnh nhỉ :D
  Bài viết hay nhất10
làm rồi mà k chạy potay
  Bài viết hay nhất11
[You must be registered and logged in to see this link.]
phutu01 wrote:làm rồi mà k chạy potay
Chi tiết hơn? demo?
  Bài viết hay nhất12
k hiểu hqua làm rồi nó k chạy , để tối add 1 demo send cho ông xem

[You must be registered and logged in to see this link.]
  Bài viết hay nhất13
Cập nhật hướng dẫn Đăng ký nhiều Domains

Điền URL Domain chính vào Site URL.
Sau đó mới điền các Domains vào App Domains (Không có [You must be registered and logged in to see this link.]).
[You must be registered and logged in to see this image.]
  Bài viết hay nhất14
ACP >> Modules >> HTML & JAVASCRIPT >> Javascript codes management

Title * : Fancybox min v2.1.5
Placement : In the topics
Javascript Code * : [You must be registered and logged in to see this link.]

chèn link vô js lun à , hay vô copy code . Mà link bỏ ?v=2.1.5 thì hiện ra code
  Bài viết hay nhất15
Tạo file js mới, copy code bỏ vô :v
  Bài viết hay nhất16
Copy Code vô
  Bài viết hay nhất17
K hiểu sai chỗ nào mà nó k chạy

[You must be registered and logged in to see this link.]
[You must be registered and logged in to see this image.]
  Bài viết hay nhất18
Lỗi 1 - Goeditor hàm replace khoảng trắng.
Lỗi 2 - Helpers nằm trước plugin fancybox.
  Bài viết hay nhất19
Dùng js mới của ông cũng vậy :(
  Bài viết hay nhất20
À đc rồi do 2 cái js trước bị lỗi :D tks

Nó hiện rồi mà thiếu cmt fb
  Bài viết hay nhất21
Thiếu cmt fb là do cài đặt app fb bị lỗi, xem lại bước 1 có sai sót chỗ nào không?
  Bài viết hay nhất22
Đâu thiếu chỗ nào đâu

[You must be registered and logged in to see this image.]
  Bài viết hay nhất23
Hình như 4rum cậu bị xung đột js, tức là có một js khác cũng tác động vào chỉnh sửa ảnh.
Bước 2, cẩn thận nhầm lẫn Admin IDApp ID.
  Bài viết hay nhất24
forum mặc định , tôi dùng nick fb của tôi làm id Admin
  Bài viết hay nhất25
Xong rồi đấy :v
  Bài viết hay nhất26
You cannot reply to topics in this forum