Facebook как кнопка с использованием ненавязчивой JS в рельсах - PullRequest
Новая
       18

Facebook как кнопка с использованием ненавязчивой JS в рельсах

2 голосов
/ 01 июля 2011

Я только что добавил кнопку «Мне нравится в Facebook» в своем приложении rails, добавив следующий тег на страницу html.erb: 

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=1419...&amp;xfbml=1"></script><fb:like href="" send="" width="100" show_faces="" font="" layout="button_count" action="recommend"></fb:like>

И ... это работает нормально, но я получаю большой белыйместо на странице во время загрузки Facebook SDK.Итак, я подумал, что попробую поместить это в мой файл application.js и запустить функцию после загрузки страницы.Единственная проблема заключается в том, что я не могу заставить это работать вообще:)

Пока что я сохранил div "fb-root" в html и поместил следующую функцию в приложение.js 

$(function() {
    $('#fb-root').after('<script src="http://connect.facebook.net/en_US/all.js#appId=1419...&amp;xfbml=1"></script><fb:like href="" send="" width="100" show_faces="" font="" layout="button_count" action="recommend"></fb:like>');
});

Однако, это не работает для меня, и я не могу понять, почему (я новичок в JS).Любая помощь будет принята с благодарностью.Спасибо!

Ответы [ 2 ]

5 голосов
/ 01 июля 2011

Вы должны загрузить функцию javascript в асинхронном режиме : 

<script>
  window.fbAsyncInit = function() {
    FB.init({appId: 'your app id', 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>

Затем, как только библиотека javascript загрузится, она преобразует вашу кнопку fbml like в соответствующий HTML-код iframe.Если он показывает пробел, пока не загрузится, поместите код fbml кнопки like в div и создайте стиль для div с помощью css.

Вот полный пример, в котором нет проблемы, о которой вы говорите (я загружаю библиотеку javascript асинхронно, с задержкой по времени, чтобы имитировать медленную загрузку. Обратите внимание, что при нажатии кнопки загрузки не отображается белый цвет).загружается. 

<!DOCTYPE html>
<html>
<body bgcolor="#000">
<div id="fb-root"></div>
<fb:like href="http://stackoverflow.com" send="" width="100" layout="button_count" action="recommend"></fb:like>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: 'your app id', status: true, cookie: true, xfbml: true});
  };
  (function() {
    // delay to simulate slow loading of Facebook library - remove this setTimeout!!
    var t = setTimeout(function() {
        alert('loading fb');
        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);
        }, 3000);
  }());

</script>
</body>
</html>
1 голос
/ 02 июля 2011

ОК, я понял это. Сначала я поместил следующие теги в HTML:

home.html.erb 

<div id="fb-root"></div><div id="facebook">[Facebook]</div>

Важным тегом здесь является «fb-root», так как именно это будет искать javascript в Facebook. Затем в свой файл js я добавляю эту функцию:

application.js 

// facebook recommend button                                                    
$(function() {
        likebutton =
            '<fb:like href="" send="" width="100" show_faces="" ' +
            'font="" layout="button_count" action="recommend">' +
            '</fb:like>';
        $.getScript('http://connect.facebook.net/en_US/all.js', function() {
                FB.init({appId: 141936272547391,
                            status: true,
                            cookie: true,
                            xfbml: true
                            });
                $('#facebook').replaceWith(likebutton);
        });
    });

И, больше не будет белого ящика, если на его клиенте не включена JS, они просто увидят «[Facebook]», и мой код хорош и удобен в обслуживании. :)

...