Facebook点赞按钮在iframe中如何向右对齐文字

Question

我在我的网站上使用 Facebook“赞”按钮，通过 iframe 实现。

现在您必须指定 iframe 的宽度。由于“赞”按钮的各种语言，这意味着我必须将宽度设置为至少 70px。

现在，我想让“赞”按钮对齐到我的网站最右边，现在我可以通过在 iframe 的 css 样式中添加 "text-align:right" 来实现。iframe 显示在右侧，但并没有完全靠近右侧。

这是因为 iframe 的宽度是 70px，例如英文“赞”按钮只有 55px。

现在我想要的是：将 iframe 实际内容与 iframe 右侧对齐。 http://pastehtml.com/view/1dnwtbh.html 在这里，我构建了一个示例。它与我构建的 div 对齐到右侧，但由于 iframe 大于实际“赞”按钮，它无法完美地对齐到右侧。我希望“赞”按钮在 iframe 中与右侧对齐。

希望可以得到您的帮助。

- Mr.Boon

Answer 1

CSS规则仅适用于iframe元素本身，而不适用于iframe内部的内容，因为它是另一个完全独立的网页。

您“可能”可以使用JavaScript通过以下方式向iframe页面添加CSS样式表：

var cssLink = document.createElement("link") 
cssLink.href = "style.css"; 
cssLink .rel = "stylesheet"; 
cssLink .type = "text/css"; 
frames['frame1'].document.head.appendChild(cssLink);

但我不确定这是否适用于所有浏览器。 最好的方法是使用AJAX调用页面。 这样你就可以在显示页面之前修改页面内容。

一个jQuery AJAX函数的示例可能如下所示：

$.ajax({
        type: "GET",
        url: "facebookURL",
        dataType: "html",
        success: function(html) {
            processData(html);

        }
    });

function processData(fbData) {
    $('#injectFBLikeHere').html(function() {
        return $(fbData).find('#LikePluginPagelet').html();
    });
}

请注意，我没有测试过这个，只是把它当作一个起点或指南。

- BenG

Answer 2

根据现代网络标准，通常无法修改iFrame的内容：http://en.wikipedia.org/wiki/Cross-site_scripting

由于您无法确定iframe内的“喜欢”按钮的宽度，因此无法将iframe调整为最小宽度以嵌套在右侧。

我能想到的唯一方法是调整iframe的大小，但正如您所说，您需要支持多种语言，如果您使用JavaScript检测用户的语言（JavaScript for detecting browser language preference），则可以根据语言手动设置“喜欢”按钮的iframe宽度。由于跨站脚本，我想不出任何自动化的方法来实现这一点。

- ArkahnX

Answer 3

也许this适合你： 在这里生成代码时，将宽度设置为0。

- Neha Parmar

Answer 4

以下是需要做的事情。

在您的标签之前插入一个名为#like的DIV，然后将您的Facebook代码放置在其中，如下所示。

<div id="like">

  <script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
  <fb:like href="http://www.facebook.com/pages/HUE-Architecture/122612441133152" layout="box_count"></fb:like>
</div>
<!-- End Like 

现在创建如下所示的 #like CSS，并根据需要进行调整，该CSS将应用于上述 DIV。

/* Facebook 点赞按钮 CSS */

 #like {
        position: fixed;
        top: 300px;
        right: -20px;
        float: right;
        height: auto;
        width: 130px;
}

注意：删除您之前应用于i-frame的任何CSS，以便它不会与此冲突。

- Dz.slick

Answer 5

像这样吗？http://d.pr/Cbkd

如果是的话，这是我通过Firebug所做的

.connect_widget_number_cloud, 
.connect_widget_connect_button {float: right !important;}

我还将 iframe 的宽度改为大约 60 像素。

- Koes Bong

---

我按照你说的做了，但对我来说没有任何区别。也许我做错了什么？我正在Windows上测试，使用最新版本的Chrome。 - Mr.Boon

你无法从自己的网站更改iframe中的CSS，这是Facebook的一部分。你只能在firebug等工具中进行更改。 - Allan Kimmer Jensen