Question

我正在使用像发送，推文和Google plus这样的Facebook。我为facebook div指定宽度320，为tweet指定宽度105。但Facebook和推特按钮的（div / iframe）应该根据它们内容的宽度自动增加和减少。有人可以建议我实现这一目标。我的主要想法是缩小这些部分之间的差距。

<script type="text/javascript">
    var SnImpl= "<%=SnImpl%>";

    if (SnImpl == "true") {
        (document, 'script', 'facebook-jssdk');
        (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'));
        (function() {
            var scrGooglePlus = document.createElement('script');
            scrGooglePlus.type = 'text/javascript';
            scrGooglePlus.async = true;
            scrGooglePlus.src = 'https://apis.google.com/js/plusone.js';
            var scrWriter = document.getElementsByTagName('script')[0];
            scrWriter.parentNode.insertBefore(scrGooglePlus, scrWriter);
        })();
    }

    <div class="fb-like" data-href="<%=strSNURL %>" data-send="true"
        data-width="320px" data-show-faces="false">
    </div>
    <iframe allowtransparency="true" frameborder="0" scrolling="no" src="//platform.twitter.com/widgets/tweet_button.html?url=<%=strSNURL %>&via=SomeOne&text=Something" style="width: 105px; height: 25px;"></iframe>
   <g:plusone href="<%=strSNURL %>"></g:plusone>

Answer 1

您需要提前知道插件的宽度。

如果您为Facebook指定320px，则facebook的iFrame将变为320px。 Facebook甚至不知道iframe内容的最小宽度是多少，所以它只跟随你的320px订单。（http://developers.facebook.com/docs/reference/plugins/like/）我建议尝试指定120px并将布局样式更改为＆＃34; button_count＆＃34;因为与默认的＆＃34;标准＆＃34;相比，这个相当狭窄。＆＃34; box_count＆＃34;将是它们中最窄的选择，只占50px宽度。

对于twitter（https://dev.twitter.com/docs/tweet-button），您可以指定＆＃34; vertical＆＃34;对于计数属性而言，这将使它达到58px宽。

对于Google（https://developers.google.com/+/plugins/+1button/），您可以指定高级气泡以匹配其他两个。这将为您提供50px的宽度。

分配Facebook就像发送div，推文iframe，Google Plus动态宽度

1 个答案: