• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
  • Upgrade Your Account
    Hello Guest! Upgrade your account to download all VIP Resource here

Hướng dẫn Sử dụng Social Locker for jQuery khi đăng ký cho vbulletin

NamLee

Bơ Đi Mà Sống
Staff member
Joined
Dec 11, 2015
Messages
2,459
Chủ thớt
#1
Demo:
Download Social Locker for jQuery v1.7.6: đính kèm
Pass: buidoi.net

Thực hiện nào =D

Download Social Locker for jQuery v1.7.6 về và up lên host giải nén đi nhé =D (không thích thì cứ dùng link của BuiDoi.Net cũng được, khỏi phải up file :v )

Vào template headinclude thêm vào dưới cùng (nhớ sửa url và ID app facebook)
Code:
  <!-- [INSTALATION] -->   
  <!-- libraries (copy and check path correctness) -->
  <script src="http://buidoi.net/js/js/libs/jquery.ui.highlight.min.js"></script>
   
  <!-- social locker (copy and check path correctness) -->
  <script src="http://buidoi.net/js/js/jquery.onp.sociallocker.1.7.6.js"></script>
  <link type="text/css" rel="stylesheet" href="http://buidoi.net/js/css/jquery.onp.sociallocker.1.7.6.min.css" />
        <link href="http://buidoi.net/js/js/css/examples.css" rel="stylesheet" type="text/css" />
        <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->




<script>
    // -
    // Notice: read the documentation that comes with the plugins to get more details


    // IMPORTANT: this is an obligatory wrapper, it runs after loading a page
    jQuery(document).ready(function ($) {


        // use your own selector to choose content what you want to lock
        $("#default-usage .to-lock").sociallocker({


            // IMPORTANT: remove the demo option. It makes the locker appears
            // every time even if you unlocked the one already.
            demo: true,


            // text that appears above the social buttons
            // any html tags available, for example: "<strong>My locker message</strong>"
            text: {
                header: "XÁC NHẬN ĐĂNG KÝ!",
                message: "Hãy Like - Google+ - Share để tiếp tục đăng ký!"
            },
           
            // a theme name that will be used,
            // by default available: secrets, dandyish, glass
            theme: "secrets",          
           
            // the order of the social buttons
            // you can remove this option to use the default order
            // available buttons:
            // - facebook:  facebook-like, facebook-share,
            // - twitter:   twitter-tweet, twitter-follow,
            // - google:    google-plus, google-share (experimental, doesn't work in IE and Opera).
            buttons: {
                order: [
                    "twitter-tweet"
                    ,"facebook-like"
                    ,"google-plus"
                ]
            },
           
            // facebook options
            // check out the documentation to learn more about facebook options
            facebook: {
                appId: "247582348697830",
                like: {
                    // url to like
                    url: "http://buidoi.net"
                }
            },
            twitter: {
                tweet: {
                    // url to tweet
                    url: "http://buidoi.net"
                }
            },
            google: {
                plus: {
                    // url to plus +1
                    url: "http://buidoi.net"
                }
            }           
        });


    });
  </script>
Vào template register thay toàn bộ bằng code sau (áp dụng cho vbb4.x nhé các tình iu :3 )
Code:
{vb:stylevar htmldoctype}<html xmlns="http://www.w3.org/1999/xhtml"<vb:if condition="$vboptions['enablefacebookconnect']"> xmlns:fb="http://www.facebook.com/2008/fbml"</vb:if> dir="{vb:stylevar textdirection}" lang="{vb:stylevar languagecode}">
<head>
    {vb:raw headinclude}


    {vb:cssfile register.css}
    <title><vb:if condition="$show['coppa']">{vb:rawphrase coppa} </vb:if>{vb:rawphrase register_at_x, {vb:raw vboptions.bbtitle}}</title>
{vb:raw headinclude_bottom}
</head>
<body>


{vb:raw header}
{vb:raw navbar}


<div id="pagetitle">
    <h1>{vb:rawphrase vbulletin_registration}</h1>
    <vb:if condition="$vboptions['usecoppa']"><p class="description">{vb:rawphrase step_2_of_2}</p></vb:if>
</div>


<script type="text/javascript" src="clientscript/vbulletin_md5.js?v={vb:raw vboptions.simpleversion}"></script>
<script type="text/javascript">
function verify_passwords(password1, password2)
{
    // do various checks, this will save people noticing mistakes on next page
    if (password1.value == '' || password2.value == '')
    {
        alert('{vb:rawphrase fill_out_both_password_fields}');
        return false;
    }
    else if (password1.value != password2.value)
    {
        alert('{vb:rawphrase entered_passwords_do_not_match}');
        return false;
    }
    else
    {
        <vb:if condition="$show['coppa']">
        pass_copy = password1.value;
        passconfirm_copy = password2.value;
        </vb:if>


        var junk_output;


        md5hash(password1, document.forms.register.password_md5, junk_output, {vb:raw show.nopasswordempty});
        md5hash(password2, document.forms.register.passwordconfirm_md5, junk_output, {vb:raw show.nopasswordempty});


        <vb:if condition="$show['coppa']">
        document.forms.register.password.value = pass_copy;
        document.forms.register.passwordconfirm.value = passconfirm_copy;
        </vb:if>


        return true;
    }
    return false;
}
</script>


<form id="registerform" action="register.php?do=addmember" name="register" method="post" onsubmit="return verify_passwords(password, passwordconfirm);" class="vbform block">


    <vb:if condition="$show['errors']">
        <h2 class="blockhead">{vb:rawphrase errors_occurred_during_registration}</h2>
        <div class="blockbody">
            <ul class="blockrow">
                {vb:raw errorlist}
            </ul>
        </div>
    </vb:if>


    <h2 class="blockhead">{vb:rawphrase register_at_x, {vb:raw vboptions.bbtitle}}</h2>
<article id="default-usage">
<section class="example">
            <div class="to-lock" style="display: none;">
              
    <div class="blockbody formcontrols">
       
        <vb:if condition="$show['coppa']">
            <div class="blockrow">{vb:rawphrase until_receive_signed_form}</div>
        </vb:if>


        <vb:if condition="$vboptions['enablefacebookconnect']">
            <h3 class="blocksubhead">{vb:rawphrase facebook_connect}</h3>
            <div class="section">
                <div id="fbregbox" class="blockrow hidden">
                <vb:if condition="$show['facebookuser']">
                    <a href="{vb:raw fbprofileurl}">
                        <img src="{vb:raw fbprofilepicurl}" title="{vb:var fbname}" alt="{vb:var fbname}" />
                    </a>
                    {vb:rawphrase welcome_x_link_y, {vb:var fbname}, {vb:raw fbprofileurl}}
                    <a style="cursor: pointer" onclick="vBfb.register_logout();"><img src="{vb:stylevar imgdir_misc}/facebook_logout.gif" alt="{vb:rawphrase logout_of_facebook}" /></a>
                <vb:else />
                    <a id="fb_regloginbtn" href="#"><img src="{vb:stylevar imgdir_misc}/facebook_login_long.gif" alt="{vb:rawphrase facebook_connect}" /></a>
                </vb:if>
                </div>
           
            <vb:if condition="$show['facebookuser']">
                <div class="blockrow">
                    <label for="facebookusername">{vb:rawphrase already_a_member}</label>
                    <div class="rightcol">
                        <input type="text" class="textbox" name="facebookusername" id="facebookusername" maxlength="50" tabindex="1" value="{vb:rawphrase username}" />
                        <input type="text" class="textbox" name="facebookpassword_hint" id="facebookpassword_hint" maxlength="50" tabindex="1" value="{vb:rawphrase password}" />
                        <input type="password" class="textbox" name="facebookpassword" id="facebookpassword" maxlength="50" tabindex="1" style="display: none;" />
                        <input type="button" class="button" name="facebookassociate" id="facebookassociate" value="{vb:rawphrase log_in}" tabindex="1" />
                        <p class="description">{vb:rawphrase associate_facebook_with_x_account, {vb:raw vboptions.bbtitle}}</p>
                        <script type="text/javascript">
                        YAHOO.util.Dom.setStyle('facebookpassword_hint', "display", "inline");
                        YAHOO.util.Dom.setStyle('facebookpassword', "display", "none");
                        YAHOO.util.Dom.setStyle('facebookusername', "color", "#828282");
                        YAHOO.util.Dom.setStyle('facebookpassword_hint', "color", "#828282");
                        vB_XHTML_Ready.subscribe(function()
                        {
                        //
                            YAHOO.util.Event.on('facebookusername', "focus", facebookusername_focus);
                            YAHOO.util.Event.on('facebookusername', "blur", facebookusername_blur);
                            YAHOO.util.Event.on('facebookpassword_hint', "focus", facebookpassword_hint);
                            YAHOO.util.Event.on('facebookpassword', "blur", facebookpassword);
                        });


                        function facebookusername_focus(e)
                        {
                        //
                            var textbox = YAHOO.util.Event.getTarget(e);
                            if (textbox.value == '{vb:rawphrase username}')
                            {
                            //
                                textbox.value='';
                                textbox.style.color='black';
                            }
                        }


                        function facebookusername_blur(e)
                        {
                        //
                            var textbox = YAHOO.util.Event.getTarget(e);
                            if (textbox.value == '')
                            {
                            //
                                textbox.value='{vb:rawphrase username}';
                                textbox.style.color='#828282';
                            }
                        }


                        function facebookpassword_hint(e)
                        {
                        //
                            var textbox = YAHOO.util.Event.getTarget(e);


                            YAHOO.util.Dom.setStyle('facebookpassword_hint', "display", "none");
                            YAHOO.util.Dom.setStyle('facebookpassword', "display", "inline");
                            YAHOO.util.Dom.get('facebookpassword').focus();
                        }


                        function facebookpassword(e)
                        {
                        //
                            var textbox = YAHOO.util.Event.getTarget(e);


                            if (textbox.value == '')
                            {
                                YAHOO.util.Dom.setStyle('facebookpassword_hint', "display", "inline");
                                YAHOO.util.Dom.setStyle('facebookpassword', "display", "none");
                            }
                        }
                        </script>
                    </div>
                </div>
            </vb:if>
            </div>
           
            {vb:raw fbimportform}
        </vb:if>


        <h3 class="blocksubhead">{vb:rawphrase required_information}</h3>


        <div class="section">
            <div class="blockrow">
                <label for="regusername">{vb:rawphrase username}:</label>
                <div class="rightcol">
                    <input class="primary textbox" id="regusername" type="text" name="username" maxlength="{vb:raw vboptions.maxuserlength}" value="{vb:raw username}" tabindex="1" />
                    <!--<img src="{vb:raw vboptions.cleargifurl}" id="reg_verif_image" alt="" />-->
                    <div id="reg_verif_div" class="primary" style="display:none;"></div>
                    <script type="text/javascript" src="clientscript/vbulletin_ajax_nameverif.js?v={vb:raw vboptions.simpleversion}"></script>
                    <script type="text/javascript">
                    <!--
                        regname_verif = new vB_AJAX_NameVerify('regname_verif', 'regusername');
                    //-->
                    </script>
                    <p class="description">{vb:rawphrase enter_your_username}</p>
                </div>
            </div>


            <div class="blockrow">
                <ul class="group">
                    <li>
                        <label for="password">{vb:rawphrase password}:</label>
                        <input type="password" class="textbox" name="password" id="password" maxlength="50" value="{vb:raw password}" tabindex="1" />
                    </li>
                    <li>
                        <label for="passwordconfirm">{vb:rawphrase confirm_password}:</label>
                        <input type="password" class="textbox" name="passwordconfirm" id="passwordconfirm" maxlength="50" value="{vb:raw passwordconfirm}" tabindex="1" />
                    </li>
                </ul>
                <p class="description">{vb:rawphrase enter_password_for_account}</p>
            </div>


            <div class="blockrow">
                <ul class="group">
                    <li>
                        <label for="email">{vb:rawphrase email_address}:</label>
                        <input type="text" class="textbox" name="email" id="email" maxlength="50" value="{vb:raw email}" dir="ltr" tabindex="1" />
                    </li>
                    <li>
                        <label for="emailconfirm">{vb:rawphrase confirm_email_address}:</label>
                        <input type="text" class="textbox" name="emailconfirm" id="emailconfirm" maxlength="50" value="{vb:raw emailconfirm}" dir="ltr" tabindex="1" />
                    </li>
                </ul>
                <p class="description">{vb:rawphrase enter_valid_email_address}</p>
            </div>


            <vb:if condition="$show['coppa']">
            <div class="blockrow">
                <label for="parentemail">{vb:rawphrase parent_guardian_email}:</label>
                <input type="text" class="primary textbox" name="parentemail" id="parentemail" maxlength="50" value="{vb:raw parentemail}" dir="ltr" tabindex="1" />
            </div>
            </vb:if>


            {vb:raw human_verify}
           
        </div>


        <vb:if condition="$show['customfields_profile']">
            <h3 class="blocksubhead">{vb:rawphrase additional_required_information_profile}</h3>
            <div class="section">
                {vb:raw customfields_profile}
                <vb:if condition="$show['birthday']">{vb:raw birthdayfields}</vb:if>
            </div>
        </vb:if>


        <vb:if condition="$show['customfields_option']">
            <h3 class="blocksubhead">{vb:rawphrase additional_required_information_option}</h3>
            <div class="section">
                {vb:raw customfields_option}
            </div>
        </vb:if>


        <h3 class="blocksubhead">{vb:rawphrase additional_information}</h3>
        <div class="section">
            <vb:if condition="$show['referrer']">
            <div class="blockrow">
                <label for="referrerfield_ctrl">{vb:rawphrase referrer}:</label>
                <div class="rightcol">
                    <div id="referrerfield" class="popupmenu nomouseover noclick nohovermenu">
                        <input id="referrerfield_ctrl" type="text" class="primary textbox popupctrl" name="referrername" value="{vb:raw referrername}" tabindex="1" maxlength="{vb:raw vboptions.maxuserlength}" />
                        <div id="referrerfield_body" class="popupbody"></div>
                    </div>
                    <script type="text/javascript" src="clientscript/vbulletin_ajax_suggest.js?v={vb:raw vboptions.simpleversion}"></script>
                    <script type="text/javascript">
                    <!--
                        rnc = new vB_AJAX_NameSuggest('rnc', 'referrerfield_ctrl', 'referrerfield');
                        rnc.allow_multiple = false;
                    //-->
                    </script>
                    <p class="description">{vb:rawphrase if_referred_enter_name, {vb:raw vboptions.bbtitle}}</p>
                </div>
            </div>
            </vb:if>


            {vb:raw timezoneoptions}


            <div class="blockrow">
                <label>{vb:rawphrase receive_email}...</label>
                <div class="rightcol">
                    <ul class="checkradio group">
                        <li>
                            <label for="cb_adminemail"><input type="checkbox" name="options[adminemail]" value="1" id="cb_adminemail" tabindex="1" {vb:raw checkedoff.adminemail} /> {vb:rawphrase receive_email_from_bulletin_board_staff}</label>
                        </li>
                        <vb:if condition="$show['email']">
                            <li>
                                <label for="cb_showemail"><input type="checkbox" name="options[showemail]" value="1" id="cb_showemail" tabindex="1" {vb:raw checkedoff.showemail} /> {vb:rawphrase receive_email_from_other_members}</label>
                            </li>
                        </vb:if>
                    </ul>
                    <p class="description">{vb:rawphrase administrators_may_send_email}</p>
                </div>
            </div>


            {vb:raw customfields_other}
        </div>
    </div>






    <h2 class="blockhead">{vb:rawphrase forum_rules}</h2>
    <div class="blockbody formcontrols">
        <div class="section">
            <div class="blockrow">
                <p class="label">{vb:rawphrase to_proceed_must_agree}</p>
                <div id="forumrules" class="restore">
                    <vb:if condition="$show['coppa']">
                        <vb:comment> coppa regulations </vb:comment>
                        {vb:rawphrase coppa_rules_description, {vb:raw vboptions.bbtitle}, {vb:link forumhome|bburl}, {vb:raw session.sessionurl}, {vb:raw vboptions.webmasteremail}}
                        <vb:comment> / coppa regulations</vb:comment>
                    </vb:if>
           
                    <vb:comment> regular forum rules </vb:comment>
                    {vb:rawphrase forum_rules_registration, {vb:raw vboptions.forumhome}, {vb:raw session.sessionurl_q}}
                    {vb:rawphrase forum_rules_description, {vb:raw vboptions.bbtitle}}
                    <vb:comment> regular forum rules </vb:comment>
                </div>
            </div>
            <div class="blockrow singlecheck">
                <label for="cb_rules_agree" class="full"><input type="checkbox" name="agree" id="cb_rules_agree" tabindex="1" value="1" /> <strong>{vb:rawphrase read_agree_abide_by_rules, {vb:raw vboptions.bbtitle}}</strong></label>
            </div>
        </div>
    </div>


    <div class="blockfoot actionbuttons">
        <div class="group">
            <input type="hidden" name="s" value="{vb:raw session.sessionhash}" />
            <input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
            <input type="hidden" name="do" value="addmember" />
            <input type="hidden" name="url" value="{vb:raw url}" />
            <input type="hidden" name="password_md5" />
            <input type="hidden" name="passwordconfirm_md5" />
            <vb:if condition="!$show['birthday']">
                <input type="hidden" name="day" value="{vb:raw day}" />
                <input type="hidden" name="month" value="{vb:raw month}" />
                <input type="hidden" name="year" value="{vb:raw year}" />
            </vb:if>
            <vb:if condition="$show['coppa']">
                <input type="hidden" name="coppauser" value="1" />
            </vb:if>
            <input type="submit" class="button" value="{vb:rawphrase complete_registration}" tabindex="1" accesskey="s" />
            <input type="reset" class="button" name="Reset" tabindex="1" value="{vb:rawphrase reset_fields}" />
        </div>
    </div>
</div>
        </section>
</article>
</form>


{vb:raw footer}


</body>
</html>
Nếu đã upload Social Locker for jQuery v1.7.6 lên host thì edit lại link, không thì để nguyên
End tut
 

Attachments

Facebook Comment

New posts New resources Most viewed threads Threads with more replies