当前位置：文江博客话题详情

右对齐 Facebook 点赞按钮 iFrame 的内容？

发布于 2024-12-09 11:56:00 字数 337 浏览 0 评论 0原文

我需要右对齐 Facebook Like 按钮的内容，以便它们始终位于其设置的“宽度”的骑行侧。我可以在 Firebug 中通过将表格设置为 float: right; 来做到这一点，但如果我在 CSS 中定义该值，它似乎不起作用。

这是解释我的问题的图片：在此处输入图像描述

编辑：这是一个 JSFiddle：http://jsfiddle.net/h66z3/2/

原文

分享到QQ

分享到微博

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

发布评论

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

∝单色的世界 2024-12-16 11:56:00

由于您使用的是button_count布局，我发现有一个小技巧似乎有效。基本上你只需等待 iframe 被插入，然后将其宽度设置为 0。然后它会自动调整自身大小到合适的大小。我不能发誓这在所有情况下和所有宽度下都有效，但请测试一下，看看它是否适合您。这是一个示例代码页：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type='text/javascript'>
function loadcode(d, s, id)
{
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}
function init()
{
loadcode(document, 'script', 'facebook-jssdk');
setTimeout(initx, 10);
}
function initx()
{
likeframe=document.getElementById('d2').getElementsByTagName('iframe')[0];
if (likeframe) setTimeout(setwidth, 10);
else setTimeout(initx, 10);
}
function setwidth()
{
likeframe=document.getElementById('d2').getElementsByTagName('iframe')[0];
likeframe.style.width='0';
}
</script>
</head>
<body onload='init()' style='margin:10px 50px'>
<div id="fb-root"></div>
<div style='text-align:right'>Here is some right-aligned text to compare to.</div>
<div id='d2' style='float:right'>
<div class="fb-like" href="http://www.google.com" data-send="false" data-layout="button_count" data-width="90" data-show-faces="false"></div>
</div>
</body>
</html>

不幸的是，这不适用于标准布局，不知道为什么它如此不同。

Since you are using the button_count layout, there is a little trick I found that seems to work. Basically you just wait for the iframe to be inserted, and then set its width to 0. It will then automatically resize itself to the proper size. I can't swear this works under all circumstances and with all widths, but please test it out and see if it works for you. Here is a sample code page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type='text/javascript'>
function loadcode(d, s, id)
{
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}
function init()
{
loadcode(document, 'script', 'facebook-jssdk');
setTimeout(initx, 10);
}
function initx()
{
likeframe=document.getElementById('d2').getElementsByTagName('iframe')[0];
if (likeframe) setTimeout(setwidth, 10);
else setTimeout(initx, 10);
}
function setwidth()
{
likeframe=document.getElementById('d2').getElementsByTagName('iframe')[0];
likeframe.style.width='0';
}
</script>
</head>
<body onload='init()' style='margin:10px 50px'>
<div id="fb-root"></div>
<div style='text-align:right'>Here is some right-aligned text to compare to.</div>
<div id='d2' style='float:right'>
<div class="fb-like" href="http://www.google.com" data-send="false" data-layout="button_count" data-width="90" data-show-faces="false"></div>
</div>
</body>
</html>

Unfortunately this doesn't work for the standard layout, not sure why it's so different.

回复收藏 0 原文

ゃ懵逼小萝莉 2024-12-16 11:56:00

按照德里克的建议，我使用 HTML5 版本来产生以下结果： http://jsfiddle.net/namuol /h66z3/6/

下面的源代码是通过 Facebook 的 Like 生成的按钮生成器。

(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

HTML

<div id="fb-root"></div>
<div class="container">
    <h1>Page Title</h1>
    <ul class="share">
        <li>
            <div class="fb-like" data-href="www.teespring.com" data-send="false" data-layout="button_count" data-show-faces="false"></div>
        </li>
        <li>
            <a href="https://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
        </li>
    </ul>
</div>

CSS 未更改。

Following Derek's suggestion, I used the HTML5 version instead to yield this result: http://jsfiddle.net/namuol/h66z3/6/

The source below was generated via Facebook's Like Button generator.

(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

HTML

<div id="fb-root"></div>
<div class="container">
    <h1>Page Title</h1>
    <ul class="share">
        <li>
            <div class="fb-like" data-href="www.teespring.com" data-send="false" data-layout="button_count" data-show-faces="false"></div>
        </li>
        <li>
            <a href="https://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
        </li>
    </ul>
</div>

The CSS was unchanged.

回复收藏 0 原文

凡尘雨 2024-12-16 11:56:00

我不相信您会幸运地使用 CSS（或任何其他相关内容）来影响 Facebook 的 iFrame 的内容。我认为您要做的最好的事情就是更改 iFrame 元素本身的宽度，使其恰好适合您想要显示的 Facebook 内容量。然后右对齐整个 iFrame。

可以肯定的是，影响 iFrame 中的内容是不可能的，因为它位于不同的域中。

如果您希望它完美地向右对齐，而没有任何您自己未添加的额外空白，那么这是不会发生的。 Facebook 将在其内容末尾留出额外的空间，以容纳越来越大的“Like #”标记。

为了完美地对齐它（没有额外的空白），您只需要使用不带滚动条的“喜欢”按钮。点赞按钮本身是唯一具有恒定宽度的元素。

回复收藏 0 原文

恏ㄋ傷疤忘ㄋ疼 2024-12-16 11:56:00

我也尝试过这样做，但因为它是一个 iframe，所以你无法更改它。我的建议是使用类似平面的按钮（我相信您使用的类似按钮会在 169k 右侧显示信息，表示您喜欢它）或更改您的设计，使其成为电子邮件 |推特 | Facebook。

我知道这很糟糕，但因为它是一个 iframe，iframe 内的所有内容都不由你掌控。

回复收藏 0 原文

摘星┃星的人 2024-12-16 11:56:00

检查这个例子 http://jsfiddle.net/sandeep/h66z3/3/ 可能就是这样你想要

.container {
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
}
h1 {
    display: inline-block;   
}
ul li{float:right}
ul{overflow:hidden}

check this example http://jsfiddle.net/sandeep/h66z3/3/ may be that's you want

.container {
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
}
h1 {
    display: inline-block;   
}
ul li{float:right}
ul{overflow:hidden}

回复收藏 0 原文

梦开始←不甜 2024-12-16 11:56:00

正如其他人指出的那样，没有简单的方法可以做到这一点，因为内容被锁定在 iframe 内。但如果您喜欢挑战，您可能需要查看如何让 Facebook Like 按钮的宽度自动调整大小？是我一直在修改的一个想法。

回复收藏 0 原文

誰認得朕 2024-12-16 11:56:00

Button_count 布局非常简单。只需在 iframe 周围放置一个 div 并将 div 设置为绝对定位且位于右侧即可。例如，

<div style="position:absolute;right:0;">
<iframe>...</iframe>
</div>

Very easy for the button_count layout. Just place a div around the iframe and set div to absolutely positioned and to the right. E.g.,

<div style="position:absolute;right:0;">
<iframe>...</iframe>
</div>

回复收藏 0 原文

~没有更多了~

关于作者

节枝

暂无简介

0 文章

0 评论

24 人气

关注发私信

友情链接

文江博客

右对齐 Facebook 点赞按钮 iFrame 的内容？

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

发布评论

评论（7）

关于作者

相关话题

热门标签

推荐作者

初遇

听闻余生

Z_dy

左岸枫

1848719402

婷

友情链接

右对齐 Facebook 点赞按钮 iFrame 的内容？

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

发布评论

评论（7）

关于作者

相关话题

热门标签

推荐作者

初遇

听闻余生

Z_dy

左岸枫

1848719402

婷

友情链接

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