Плагин jQuery для Facebook кнопка «Мне нравится»

Question

На многих сайтах теперь вы можете увидеть кнопку «Мне нравится» на Facebook. - При нажатии он меняет цвет фона. - При наведении мыши, вы можете написать дополнительный текст

Мне нравится этот интерфейс - легкое действие, но допускает выражение большего количества данных, если пользователь хочет.

Кто-нибудь написал подобный плагин?

UPDATE: Смотрите: http://www.engadget.com/2010/05/30/htc-evo-4g-gets-hacked-froyo-port-sense-ui-be-damned/ внизу поста, вы увидите кнопку лайкбэка Facebook

Answer 1

Я не знаю такого плагина для jQuery, но написание пользовательского интерфейса довольно просто.

( Редактировать : На самом деле я просто подумал о месте, где я мог бы использовать эту функцию сам. Я мог бы с таким же успехом написать подходящий плагин на основе этой следующей недели, если у меня будет время, и отредактировать его здесь. В настоящее время ниже то, что я первоначально отправил ...)

Все, что вам нужно, это пара div:

<div id="thebutton">Click me!</div>
<div id="thebox" style="display:none;">Content goes here</div>

И немного jQuery:

    <script type="text/javascript">
    $(function () {

        $('#thebutton')
            .click(function () {
                //Show/hide the box
                $(this).toggleClass('activated');
                $(this).hasClass('activated') ? $('#thebox').fadeIn() : $('#thebox').fadeOut();
            })
            .mouseenter(function () {
                //If the button is .activated, cancel any delayed hide and display the box
                $(this).addClass('hovering');
                if ($(this).hasClass('activated')) {
                    $('#thebox').clearQueue().fadeIn();
                }
            })
            .mouseleave(function () {
                //Hide the box after 300 milliseconds (unless someone cancels the action)
                $(this).removeClass('hovering');
                $('#thebox').delay(300).fadeOut();
            });

        $('#thebox')
            //When hovering onto the box, cancel any delayed hide operations
            .mouseenter(function () { $(this).clearQueue(); })

            //When hovering off from the box, wait for 300 milliseconds and hide the box (unless cancelled)
            .mouseleave(function () { $(this).delay(300).fadeOut(); });
    });
</script>

Остальное в значительной степени просто CSS для #thebutton, #thebox, .hovering и .acactive.

Вот спартанский взгляд, который я использовал, когда писал это:

<style type="text/css">
    #thebutton              { width: 100px; background-color: #eee; text-align: center; padding: 10px; cursor: pointer; }
    #thebutton.activated    { font-weight: bold; }
    #thebutton.hovering     { color: Blue; }          
    #thebox                 { background-color: #eee; position:relative; width: 300px; height: 200px; padding: 10px; top: 5px; display: none;}
</style>

Answer 2

Как насчет этого плагина jquery: http://socialmediaautomat.com/jquery-fbjlike-js.php Его очень просто настроить, и он позволяет выполнять некоторые полезные задачи в сочетании с плагином jquery cookie (посмотрите на демонстрационную страницу).

Answer 3

Использование кнопки $ ('# your-button'). Button (); Функция из библиотеки пользовательского интерфейса jQuery предоставляет эту функциональность и многое другое.

http://jqueryui.com/themeroller/

Answer 4

Это не плагин, он использует Facebook Javascript SDK . Вы загружаете это, помещая это в основании Вашего документа:

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({status: true, cookie: true,
         xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
  '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>

Добавьте этот атрибут в свой тег HTML (фактический тег HTML сразу после DOCTYPE):

xmlns:fb="http://www.facebook.com/2008/fbml"

И затем вы можете разместить этот фрагмент там, где вы хотите кнопку «Мне нравится»:

<fb:like></fb:like>

Answer 5

Вы можете обрабатывать события hover, mousedown и mouseup и изменять содержимое или стиль кнопки.