【问题标题】:Facebook Like Button Not Showing Up In FirefoxFacebook Like 按钮未出现在 Firefox 中
【发布时间】:2011-07-28 01:33:00
【问题描述】:

我正在为我的喜欢按钮使用以下代码

<fb:like id="facebook-like" href="http://mysite.com/index.php" layout="button_count" width="450" show_faces="false" font=""></fb:like>

有些用户遇到了点赞按钮没有显示的问题。在 3.6.17 中注明,但在其他版本中观察到。我对 firefox iframe 错误有点熟悉,但如果有人对 facebook like 按钮有任何解决方法,我很好奇。

【问题讨论】:

    标签: facebook firefox iframe facebook-like


    【解决方案1】:

    使用 javascript 呈现的类似按钮(&lt;div class="fb-like"/&gt;&lt;fb:like/&gt;)如果最初是隐藏的(display:none),则会得到 height=0。

    要解决此问题,请在显示容器后使用 javascript 创建元素,然后运行:

    FB.XFBML.parse();
    

    例子:

    result.show();
    var like_box = $(".fb-like-inactive", result);
    like_box.removeClass("fb-like-inactive");
    like_box.addClass("fb-like");
    FB.XFBML.parse();
    

    【讨论】:

    • 完美、简单的解决方案
    【解决方案2】:

    这个 CSS 为我解决了这个问题

    .fb-like span, .fb-like iframe { height:25px!important; width:150px!important}
    

    【讨论】:

      【解决方案3】:

      这仍然是一个问题,可以在这里看到(也包含修复): http://codepen.io/wiledal/pen/cGnyq

      如果 div 在解析时隐藏,Firefox 不会绘制 Facebook 样。在上面的示例中,我在不同时间后延迟了 div 的显示。您可以看到 500 毫秒后显示的点赞按钮不会在 Firefox 中呈现。

      我解决了一个问题,它不会在喜欢后切断评论对话框,只需使用 min-height 和 min-width 而不是之前建议的设置值。

      .fb-like span, .fb-like iframe {
        min-width: 100px !important;
        min-height: 20px !important;
      }  
      

      【讨论】:

        【解决方案4】:

        我只在 Firefox (v.29.0.1) 上遇到了同样的问题,结果是 AdBlock plus (v.2.6) 阻止了“赞”和“分享”按钮的呈现。

        【讨论】:

        • 请注意,如果使用您自己的图像,共享按钮仍然可以工作(显示),并调用函数执行 window.open 到https://www.facebook.com/sharer/sharer.php?kid_directed_site=0&amp;sdk=joey&amp;u=....
        【解决方案5】:

        你可以尝试像这样调用like按钮吗:

        <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=195243810534550&amp;xfbml=1"></script><fb:like href="http://mysite.com/index.php" send="false" width="450" show_faces="true" font=""></fb:like>
        

        如果您仍然发现问题,请告诉我。

        【讨论】:

          【解决方案6】:

          留下一个答案,因为我还不能离开 cmets...

          Oli 不错的 CSS hack 最初看起来很有效:

          .fb-like span, .fb-like iframe { height:25px!important; width:150px!important}
          

          但它剪掉了当我们实际点击赞按钮时试图弹出的评论框。

          Per 的延迟解析解决方案似乎可以胜任;这里有更多细节。在我们的例子中,我们在下拉菜单中有一个赞按钮,看起来像:

          <ul>
            <li class="control_menu">
              <span>menu name</span>
              <ul style="display: none;">
                 <li><div class="fb-like-inactive" data-href=...></li>
                 ...
              </ul>
            </li>
            ...
          </ul>
          

          当用户将鼠标悬停在control_menu 元素上时,代码会显示下拉ul。我们使用这段代码来处理延迟解析:

          $(document).ready(function() {
            $('.fb-like-inactive').closest('.control_menu').hover(function() {
              var inactive = $(this).find('.fb-like-inactive');
              if (inactive.length && (typeof FB != 'undefined')) {
                inactive.removeClass('fb-like-inactive').addClass('fb-like');
                FB.XFBML.parse(this);
              }
            });
          });
          

          它找到fb-like-inactive 按钮,然后查找树以找到包含control_menu 元素,然后将事件附加到control_menu 元素以检测用户何时将鼠标悬停在它们上方。当它检测到特定菜单元素的悬停时,它会在该元素中查找类似按钮的非活动按钮,将它们标记为正常fb-like,然后仅解析该元素的内容。

          我希望这可以节省一些时间。

          【讨论】:

            【解决方案7】:

            我只花了一个小时在这方面,在更基本的层面上,您需要知道在本地测试您的页面时 Facebook 按钮不会呈现。

            这似乎很明显,但只有在从网络服务器呈现时才会起作用。

            【讨论】:

              【解决方案8】:

              Per 的解决方案基于 fb 按钮的 XFBML 版本,我不确定如何使用“html5 版本”执行此操作,或者是否真的有可能,但我找到了一个不会剪辑的 CSS/JS 解决方案内容,所以这里是:

              html

              <button class="like-button">I like this stuff</button>
              
              <!-- This is a hidden like-box -->
              <div class="social-share aural">...stuff...</div>
              

              CSS:

              html body .aural {
                  position: absolute;
                  font-size: 0;
                  left: -9999px;
              }
              

              jQuery:

              $('body').on("click", '.like-button', function(e) {
                  var $socialShare = $('.social-share');
                  $socialShare.css({'font-size':'1em'});
                  var sw = $socialShare.width();
                  $socialShare.animate({left: sw-80}, 400);
              });
              

              您可能必须使用 !important 规则(在 css 和 js 中)或嵌套 .aural 类,具体取决于 css 的其余部分。如果它不起作用,我建议尝试更改默认布局,使其不会覆盖 .aural 或嵌套 .aural 并作为最后的手段使用 !important..

              【讨论】:

                【解决方案9】:

                我遇到了同样的问题,但罪魁祸首是在 about:config 中将跟踪保护设置为 true。

                这个提示最初让我想到了这个想法: Lifehacker: Turn on Tracking Protection in Firefox to Make Pages Load 44% Faster

                【讨论】:

                  【解决方案10】:

                  我的解决方案与上述任何一个都完全不同。

                  我的页面中有一个角色动画,其中一个元素具有 id="body"(这是完全合理的),但这似乎杀死了 FB 脚本。

                  当我重命名我的 id 后,共享又开始工作了;我只能假设存在某种冲突,因为 id'ed 元素可以作为全局变量引用。

                  我通过删除元素直到一切正常的通常过程发现了这一点,所以我很确定是这个。

                  【讨论】:

                    猜你喜欢
                    • 1970-01-01
                    • 2012-12-30
                    • 1970-01-01
                    • 1970-01-01
                    • 1970-01-01
                    • 1970-01-01
                    • 1970-01-01
                    • 1970-01-01
                    • 1970-01-01
                    相关资源
                    最近更新 更多