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

  Bài viết hay nhất1
First topic message reminder :

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ất26
góp ý khi lấy thông số id để thay vào Admin ID chỉ cần click vào avatar ở trang cá nhân rồi lấy hàng số cuối link có dạng: 10000xxxxxxxxxx là ra đỡ phải mất công làm như trên (với các ảnh khác của bạn cũng làm như vậy)
  Bài viết hay nhất27
Muốn hiện ra ngay luôn chứ k trượt trượt thay số chỗ nào . chỗ khung cmt cách mép margin 10 thay chỗ thẻ nào
  Bài viết hay nhất28
hix bị lỗi với trình duyệt firefox ở net 3.6.13
  Bài viết hay nhất29
phutu01 wrote:Muốn hiện ra ngay luôn chứ k trượt trượt thay số chỗ nào
Dòng 200206, thay animate bằng css

phutu01 wrote:Chỗ khung cmt cách mép margin 10 thay chỗ thẻ nào
Tìm trong CSS:
Code:
.fancybox-comments-block
Sửa thuộc tính margin-right

... Lỗi trình duyệt cũ thì tui bó tay.
  Bài viết hay nhất30
khi tắt chỉ có khung cmt mất còn nhiêu vẫn hiện dơ dơ

da số net họ dùng 3.6 ko à
  Bài viết hay nhất31
Cái ảnh bmp bị ẩn đi hả bác
  Bài viết hay nhất32
phutu01 wrote:khi tắt chỉ có khung cmt mất còn nhiêu vẫn hiện dơ dơ

da số net họ dùng 3.6 ko à
Mình không chắc mấy vấn đề lỗi đó, vả lại mình cũng không test nhiều trình duyệt được.
Trường hợp bị lỗi đó là chỉ riêng 4rum của cậu hay ở devs cũng gặp.
Nếu có thể, cậu gửi demo lỗi, ảnh chụp màn hình và thông tin trình duyệt, khi nào có cơ hội mình sẽ kiểm tra lại.
Nếu không ổn thì cậu xem thử bài này: [You must be registered and logged in to see this link.]
  Bài viết hay nhất33
Cái ảnh bmp bị ẩn đi hả bác
Toi lam may chu? xong hay ra may ngoai` de test lai xem thu co chay khong
cai up anh cua bac fire fox nay cung k hien len tai anh?

[You must be registered and logged in to see this image.]
  Bài viết hay nhất34
cmt làm như kênh14 hay fb đẹp hơn đó ông
  Bài viết hay nhất35
[You must be registered and logged in to see this link.] mình làm theo mấy bước trên có thấy gì đâu?
  Bài viết hay nhất36
Acc test?
Hướng dẫn thay Admin ID bạn làm sai, và khi thay là thay luôn <> chứ không để lại nhé.
  Bài viết hay nhất37
có thêm cái này nữa ngon luôn đó ông , cmt ảnh nào hiện trên fb ảnh đại diện đó <meta property="og:image" content="link ảnh" />

Có vấn đề nhỏ hỏi ông cmt fb forrum tôi cỡ 3cmt là đóng cái khung cmt lại , click để cmt . Còn bên haivl nó luôn mở
  Bài viết hay nhất38
[You must be registered and logged in to see this link.]
phutu01 wrote:có thêm cái này nữa ngon luôn đó ông , cmt ảnh nào hiện trên fb ảnh đại diện đó <meta property="og:image" content="link ảnh" />

Có vấn đề nhỏ hỏi ông cmt fb forrum tôi cỡ 3cmt là đóng cái khung cmt lại , click để cmt . Còn bên haivl nó luôn mở
Thẻ meta đó không làm được, chỉ có thể đợi chờ fm update.

[You must be registered and logged in to see this link.]
Chỉnh tham số Number of Posts10 hoặc hơn.
  Bài viết hay nhất39
Khung cmt bị ẩn đấy , k phải cái số cmt ẩn
  Bài viết hay nhất40
[You must be registered and logged in to see this link.]
Zzbaivong wrote:Acc test?
Hướng dẫn thay Admin ID bạn làm sai, và khi thay là thay luôn <> chứ không để lại nhé.

Cái bước này [You must be registered and logged in to see this link.] là lấy tên đăng nhập facebook của mình điền vào phải không ạ? vậy nick mình là nhokpronho thì nó sẽ có dạng là [You must be registered and logged in to see this link.] phải không? vậy số Admin ID là số nào ạ?
  Bài viết hay nhất41
[You must be registered and logged in to see this link.]
nhokpronho49 wrote:[You must be registered and logged in to see this link.]
Zzbaivong wrote:Acc test?
Hướng dẫn thay Admin ID bạn làm sai, và khi thay là thay luôn <> chứ không để lại nhé.

Cái bước này [You must be registered and logged in to see this link.] là lấy tên đăng nhập facebook của mình điền vào phải không ạ? vậy nick mình là nhokpronho thì nó sẽ có dạng là [You must be registered and logged in to see this link.] phải không? vậy số Admin ID là số nào ạ?
nó sẽ là [You must be registered and logged in to see this link.] k có <> nhé
nhưng túm lại là tên tài khoảng fb sai
bác vào fb, rồi vào tường nhà bác
sau đó nhìn lên thanh địa chỉ sẽ thấy cái tên fb của bác - là id chứ k phải cái mớ tên mà bác cho mấy đứa tìm đâu, nếu k hiểu thì bác có thể up link fb của bác lên đây mình sẽ thông não cho bác
  Bài viết hay nhất42
Rồi đấy đã sửa lại cái Admin ID rồi s vẫn không làm được?
  Bài viết hay nhất43
[You must be registered and logged in to see this image.]

bước này chọn không cũng chạy bt hoặc k cần điền
  Bài viết hay nhất44
sao em làm phần App Domains không được nhỉ
nó cứ báo lỗi
Code:
This must be derived from Canvas URL, Secure Canvas URL, Unity Binary URL, Site URL, Mobile Site URL, Page Tab URL hoặc Secure Page Tab URL. Check and correct the following domains: raptv.123.st
  Bài viết hay nhất45
Điền đúng như trong hình ấy, mình viết khá kỹ từng bước đấy.
The author of this message was banned from the forum - See the message
  Bài viết hay nhất47
Lúc mình viết code này là dùng facebook api v1, giờ đã là v2 rồi nên có thể không còn dùng được nữa.
  Bài viết hay nhất48
You cannot reply to topics in this forum