在 Rails 中使用不显眼的 js 制作 Facebook Like 按钮

发布于 2024-11-18 03:10:06 字数 895 浏览 4 评论 0原文

我刚刚通过将以下标签添加到 html.erb 页面中,在我的 Rails 应用程序上放置了一个类似 facebook 的按钮:

<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 文件中,并在页面加载后运行该函数。唯一的问题是我根本无法让它工作:)

到目前为止,我已将“fb-root”div 保留在 html 中,并将以下函数放入 application.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 新手)。任何帮助将不胜感激。谢谢!

I've just put a facebook like button on my rails app by adding the following tag into an html.erb page:

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

And ... that works OK but I get a big white space on the page as the facebook sdk is loading. So, I thought I'd try putting this in my application.js file and running the function after the page is loaded. The only problem is that I can't get this to work at all :)

So far, I've kept the "fb-root" div in the html and I've placed the following function into application.js

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

However, this is not working for me and I can't figure out why (I'm a js newb). Any help would be greatly appreciated. Thanks!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

晨曦÷微暖 2024-11-25 03:10:07

您应该异步加载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 之类按钮转换为适当的 html iframe 代码。如果它在加载之前显示空白,请将“like”按钮 fbml 代码放入 div 中,并使用 css 设计该 div 的样式。

这是一个完整的示例,没有您正在讨论的问题(我异步加载 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>

You should load the javascript function asynchronously:

<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>

Then once the javascript library has loaded, it will convert your fbml like button into the appropriate html iframe code. If it is showing a white space until it loads, put the like button fbml code inside a div and style that div with css.

Here is a full example which doesn't have the issue you are talking about (I load the javascript library asynchronously, on a timed delay to simulate a slow load. Notice that there is no white while the load button is loading.

<!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>
摇划花蜜的午后 2024-11-25 03:10:07

好吧,我明白了。首先,我将以下标签放入 html 中:

home.html.erb

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

这里重要的标签是“fb-root”,因为这是 Facebook 的 javascript 将查找的内容。然后,在我的 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]”,并且我的代码很好且可维护。 :)

OK, I figured this out. First, I put the following tags in the html:

home.html.erb

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

The important tag here is "fb-root" as that is what Facebook's javascript will look for. Then, in my js file I add this function:

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);
        });
    });

And, no more white box, if he client doesn't have JS enabled they just see "[Facebook]" and my code is nice and maintainable. :)

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文