Question

我在我的网站上使用facebook like按钮，通过iframe。

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

现在我希望类似按钮与我网站的最右边对齐，现在我可以通过在iframe的css样式中添加“text-align：right”来实现。 iframe显示在右侧，但不是一直显示在右侧。

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

现在我想要的：将iframe的实际内容与实际iframe的右侧对齐。

http://pastehtml.com/view/1dnwtbh.html

我在这里建立了一个例子。它在div ive构建的右侧对齐，但因为iframe比实际的按钮大，所以它与右边没有完美对齐。我希望按钮在iframe中与右侧对齐。

我希望你们能帮忙

Answer 1

css规则仅适用于iframe元素，而不是iframe的内容，因为它完全是另一个网页。

您可以使用javascript将css样式表添加到iframe页面，其中包含：

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

注意我没有对此进行测试，仅将其用作起点或指南

Answer 2

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

由于您无法确定iframe内部的like按钮的宽度，因此无法将iframe的大小调整为嵌套在右侧的最小宽度。

我能想到的唯一方法是调整iframe的大小，但正如你所说，你需要它来支持多种语言，我想如果你使用javascript来检测用户的语言（JavaScript for detecting browser language preference）。您可以根据语言手动设置like按钮的iframe宽度。由于跨站点脚本，我无法想到任何自动执行此操作的方法。

Answer 3

这是做什么的。

在标记之前插入名为#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

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

/ * Facebook的CSS就像* /

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

注意：删除您应用于i-frame的所有先前的CSS，这样它就不会与此相冲突。

Answer 4

也许this会对你有用：在此处生成代码时，请将宽度设置为0。

Answer 5

喜欢这个？ http://d.pr/Cbkd

如果是这样，这就是我通过Firebug做的事情

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

我还将iframe宽度更改为60px。

Facebook Like按钮在右边的Iframe中对齐文本

5 个答案: