Cài đặt Social Locker for jQuery khi đăng ký cho xenforo

[2L.Ohayo]

Bước 1: Download Social Locker for jQuery v1.7.6 (file đính kèm) và up lên host giải nén.

Bước 2: Mở template page_container_js_head và thêm vào dưới cùng.

 <!-- [INSTALATION] -->
  <!-- libraries (copy and check path correctness) -->
  <script src="[COLOR=#ff0000]http://buidoi.net/js/js/libs/jquery.ui.highlight.min.js[/COLOR]"></script>

  <!-- social locker (copy and check path correctness) -->
  <script src="[COLOR=#ff0000]http://buidoi.net/js/js/jquery.onp.sociallocker.1.7.6.js[/COLOR]"></script>
  <link type="text/css" rel="stylesheet" href="[COLOR=#ff0000]http://buidoi.net/js/css/jquery.onp.sociallocker.1.7.6.min.css[/COLOR]" />
        <link href="[COLOR=#ff0000]http://buidoi.net/js/js/css/examples.css[/COLOR]" rel="stylesheet" type="text/css" />
        <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->




<script type="text/javascript">
    // -
    // 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: "[COLOR=#ff0000]247582348697830[/COLOR]",
                like: {
                    // url to like
                    url: "[COLOR=#ff0000]http://buidoi.net[/COLOR]"
                }
            },
            twitter: {
                tweet: {
                    // url to tweet
                    url: "[COLOR=#ff0000]http://buidoi.net[/COLOR]"
                }
            },
            google: {
                plus: {
                    // url to plus +1
                    url: "[COLOR=#ff0000]http://buidoi.net[/COLOR]"
                }
            }        
        });


    });
  </script>

* CHÚ Ý NHỚ SỬA URL VÀ ID APP FACEBOOK

Bước 3: Mở template register_form thay toàn bộ bằng code sau (áp dụng cho xenforo 1.4.x)

<xen:title>{xen:phrase sign_up}</xen:title>
<article id="default-usage">
<section class="example">
            <div class="to-lock" style="display: none;">
<form action="{xen:link 'register/register'}" method="post" class="xenForm AutoValidator"
    data-fieldValidatorUrl="{xen:link register/validate-field}"
    data-normalSubmit="1"
>
    <xen:if is="{$errors}">
        <div class="errorPanel">
            <h3 class="errorHeading">{xen:phrase please_correct_following_errors}:</h3>
            <div class="baseHtml errors">
                <ol>
                <xen:foreach loop="$errors" value="$error">
                    <li>{xen:raw $error}</li>
                </xen:foreach>
                </ol>
            </div>
        </div>
    </xen:if>

    <dl class="ctrlUnit limited">
        <dt><label for="ctrl_username">{xen:phrase name}:</label></dt>
        <dd>
            <input type="text" name="username" value="" class="textCtrl" id="ctrl_username" autocomplete="off" />
            <p class="explain">{xen:phrase please_leave_this_field_blank}</p>
        </dd>
    </dl>

    <dl class="ctrlUnit">
        <dt><label for="ctrl_{$fieldMap.username}">{xen:phrase name}:</label></dt>
        <dd>
            <input type="text" name="{$fieldMap.username}" value="{$fields.username}" class="textCtrl" id="ctrl_{$fieldMap.username}" autofocus="true" autocomplete="off" />
            <p class="explain">{xen:phrase this_is_name_that_will_be_shown_with_your_messages}</p>
        </dd>
    </dl>

    <xen:if is="mt_rand(0, 2) == 1">
    <dl class="ctrlUnit limited">
        <dt><label for="ctrl_{$fieldMap.email_hp}">{xen:phrase email}:</label></dt>
        <dd>
            <input type="email" name="{$fieldMap.email_hp}" value="" dir="ltr" class="textCtrl" autocomplete="off" id="ctrl_{$fieldMap.email_hp}" />
            <p class="explain">{xen:phrase please_leave_this_field_blank}</p>
        </dd>
    </dl>
    </xen:if>

    <dl class="ctrlUnit">
        <dt><label for="ctrl_{$fieldMap.email}">{xen:phrase email}:</label></dt>
        <dd>
            <input type="email" name="{$fieldMap.email}" value="{$fields.email}" dir="ltr" class="textCtrl" id="ctrl_{$fieldMap.email}" />
        </dd>
    </dl>

    <fieldset>
        <xen:if is="mt_rand(0, 2) == 1">
        <dl class="ctrlUnit limited">
            <dt><label for="ctrl_password">{xen:phrase password}:</label></dt>
            <dd>
                <input type="password" name="password" class="textCtrl OptOut" id="ctrl_password" autocomplete="off" />
                <p class="explain">{xen:phrase please_leave_this_field_blank}</p>
            </dd>
        </dl>
        </xen:if>

        <dl class="ctrlUnit">
            <dt><label for="ctrl_{$fieldMap.password}">{xen:phrase password}:</label></dt>
            <dd><input type="password" name="{$fieldMap.password}" class="textCtrl OptOut" id="ctrl_{$fieldMap.password}" autocomplete="off" /></dd>
        </dl>

        <dl class="ctrlUnit">
            <dt><label for="ctrl_{$fieldMap.password_confirm}">{xen:phrase confirm_password}:</label></dt>
            <dd>
                <input type="password" name="{$fieldMap.password_confirm}" class="textCtrl OptOut" id="ctrl_{$fieldMap.password_confirm}" />
                <p class="explain">{xen:phrase enter_your_password_in_first_box_and_confirm_it_in_second}</p>
            </dd>
        </dl>

        <xen:if is="mt_rand(0, 2) == 1">
        <dl class="ctrlUnit limited">
            <dt><label for="ctrl_{$fieldMap.password_confirm_hp}">{xen:phrase confirm_password}:</label></dt>
            <dd>
                <input type="password" name="{$fieldMap.password_confirm_hp}" class="textCtrl OptOut" id="ctrl_{$fieldMap.password_confirm_hp}" />
                <p class="explain">{xen:phrase please_leave_this_field_blank}</p>
            </dd>
        </dl>
        </xen:if>
    </fieldset>
    
    <dl class="ctrlUnit">
        <dt>{xen:phrase gender}:</dt>
        <dd>
            <ul>
                <li><label><input type="radio" name="{$fieldMap.gender}" value="male" {xen:checked "{$fields.gender} == 'male'"} /> {xen:phrase male}</label></li>
                <li><label><input type="radio" name="{$fieldMap.gender}" value="female" {xen:checked "{$fields.gender} == 'female'"} /> {xen:phrase female}</label></li>
                <li><label><input type="radio" name="{$fieldMap.gender}" value="" {xen:checked "!{$fields.gender}"} /> ({xen:phrase unspecified})</label></li>
            </ul>
        </dd>
    </dl>

    <xen:include template="helper_birthday_row_register" />

    <xen:if is="{$xenOptions.registrationSetup.requireLocation}">
        <dl class="ctrlUnit">
            <dt>
                {xen:phrase location}:
                <dfn>{xen:phrase required}</dfn>
            </dt>
            <dd>
                <input type="text" name="location" value="{$fields.location}" class="textCtrl" />
            </dd>
        </dl>
    </xen:if>

    <xen:set var="$honeyPotPosition" value="{xen:helper rand, 0, 2}" />
    <xen:if is="{$customFieldHoneyPot} && {$honeyPotPosition} == 1">
    <xen:include template="custom_field_edit">
        <xen:set var="$customFieldInputName" value="{$fieldMap.custom_fields}" />
        <xen:set var="$field" value="{$customFieldHoneyPot}" />
        <xen:set var="$customFieldExtraClass" value="limited" />
    </xen:include>
    </xen:if>

    <xen:include template="custom_fields_edit">
        <xen:set var="$customFieldInputName" value="{$fieldMap.custom_fields}" />
    </xen:include>

    <xen:if is="{$customFieldHoneyPot} && {$honeyPotPosition} == 2">
    <xen:include template="custom_field_edit">
        <xen:set var="$customFieldInputName" value="{$fieldMap.custom_fields}" />
        <xen:set var="$field" value="{$customFieldHoneyPot}" />
        <xen:set var="$customFieldExtraClass" value="limited" />
    </xen:include>
    </xen:if>

    <dl class="ctrlUnit" style="display: none">
        <dt><label for="ctrl_{$fieldMap.timezone}">{xen:phrase time_zone}:</label></dt>
        <dd>
            <select name="{$fieldMap.timezone}" class="textCtrl {xen:if $fields.timezoneAuto, 'AutoTimeZone'} OptOut" id="ctrl_{$fieldMap.timezone}">
                <xen:foreach loop="$timeZones" key="$identifier" value="$name">
                    <option value="{$identifier}" {xen:selected "{$identifier} == {$fields.timezone}"}>{$name}</option>
                </xen:foreach>
            </select>
        </dd>
    </dl>

    <xen:if hascontent="true">
        <fieldset>
            <xen:contentcheck>
                <xen:include template="helper_captcha_unit" />
            </xen:contentcheck>
        </fieldset>
    </xen:if>

    <dl class="ctrlUnit submitUnit">
        <dt></dt>
        <dd>
            <xen:set var="$timerHtml"><xen:if is="{$xenOptions.registrationTimer}">
                <span id="RegTimer">({xen:phrase please_wait_x_seconds, "seconds=<span>{$xenOptions.registrationTimer}</span>"})</span>
            </xen:if></xen:set>
            <xen:if is="{$tosUrl}">
                <ul>
                    <li>
                        <div class="text">{xen:phrase i_agree_to_terms_and_rules, 'checkbox=<input type="checkbox" name="agree" value="1" id="ctrl_agree" class="Disabler" />', 'terms_attributes=href="{$tosUrl}" target="_blank"'}</div>
                        <ul id="ctrl_agree_Disabler">
                            <li><input type="submit" value="{xen:phrase sign_up}" accesskey="s" class="button primary" id="SubmitButton" /> {xen:raw $timerHtml}</li>
                        </ul>                    
                    </li>
                </ul>
            <xen:else />
                <input type="submit" value="{xen:phrase sign_up}" accesskey="s" class="button primary" id="SubmitButton" /> {xen:raw $timerHtml}
            </xen:if>
        </dd>
    </dl>

    <input type="hidden" name="_xfToken" value="{$visitor.csrf_token_page}" />
    <input type="hidden" name="reg_key" value="{$regKey}" />
</form>
</div>
        </section>
</article>


<xen:if is="{$xenOptions.registrationTimer}">
    <script type="text/javascript">
    (function($) {
        $(function() {
            var rt = $('#RegTimer'), s = rt.find('span'), t = parseInt(s.text(), 10),
                sub = $('#SubmitButton'),
                i = setInterval(function() {
                    t--;
                    if (t <= 0) {
                        rt.hide();
                        clearInterval(i);
                    } else {
                        s.text(t);
                    }
                }, 1000);

                var f = function(e) {
                    if (t > 0) {
                        e.preventDefault();
                    }
                };

                sub.click(f);
                sub.closest('form').submit(f);
        });
    })(jQuery);
    </script>
</xen:if>

Nguồn: Lê Tí - Buidoi.net​

 

[namchelsea]

làm cái cho link chia sẻ trong bài viết đi bạn ơi