2013-02-13 5 views
6

これは他のスレッドで尋ねられましたが、それらの回答は私のケースに合っていませんでした。あなたはここからTwitterのフォローボタン埋め込む場合:あなたが幅をインラインスタイルとして設定されて見ることができるようにTwitterのフォローボタンの幅を変更するには?

<iframe scrolling="no" frameborder="0" allowtransparency="true" src="http://platform.twitter.com/widgets/tweet_button.1360366574.html#_=1360791644346&amp;count=horizontal&amp;id=twitter-widget-0&amp;lang=en&amp;original_referer=http%3A%2F%2Fwww.foo.com%2Fsearch%2Fcats&amp;size=m&amp;text=Search%20Results%20for%20%22cats%22%20on%20Foo&amp;url=http%3A%2F%2Fwww.foo.com%2Fsearch%2Fcats" class="twitter-share-button twitter-count-horizontal" style="width: 109px; height: 20px;" title="Twitter Tweet Button" data-twttr-rendered="true"></iframe> 

https://twitter.com/about/resources/buttons

<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a> 
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 

をJSはIFRAMEとのリンクを置き換えます。私はのようなものでこれをオーバライドすることができます知っている:例えば

.twitter-share-button { width: 80px !important; } 

が、私は理由は何であれば株式数が増加すると、特定のコンテンツページで非常に多くのことを行うにはしたくありません。次に、最小の幅で共有数が不明瞭になります。

返信iframeのサイズは、必要な最小必要幅よりも大きくないように、内部の共有数に応じてTwitterに通知する方法がありますか?

私はFacebookがデータ属性によって希望の幅を受け入れることを知っていますdata-width私は信じています。これは私が上に求めている振る舞いのタイプを得るためにautoに設定することができます。ツイッターは共有ボタンと同様のものを提供していますか?

Fiddle

+1

リンクがiframe内にあるため、CSSで変更することはできません。あなたは、TwitterでスタイルをいくつかのAPIで変更できるかどうかを見なければなりません。 iframeの幅を設定するとボタンのサイズが変わるのですか? – epascarello

+1

Twitterのフォローボタンと同じ問題があります。 JSコードは、インラインの幅が実際のボタンよりも大きいHTMLを生成します。これにより、正確な位置決めが不可能になります。フォロワー数が増えてボタンが大きくなり、「切り捨てられる」ようになると、 '!important'で幅をオーバーライドすることは持続可能な解決策ではありません。誰でもこの問題の解決策を見つけましたか? – Squrler

答えて

1

代わりのwidthは、min-widthを設定します。

.twitter-share-button { min-width: 80px !important; width: auto !important;} 
+0

私の問題は、デフォルトの幅自体が大きすぎるということです。最小幅を設定しても効果はありません。 – TK123

+0

'width:auto'も追加できます。私は私の答えを更新しました。 – zakangelle

+1

http://jsfiddle.net/3LxbJ/もっと大きくなった – TK123

1

これは既知の問題のようです(this Dev Twitter threadを参照)のように、ほぼ2年間のために効果的なソリューションを待っていること今。現時点では、クリーンボタンの幅を実際の内容と一致させる方法はないようです。
IFrameを操作しようとすると、いくつかのカスタムjavascriptを使うことができますが、最後にもう一度IFrame/CORSの壁に当たってしまいます。

+0

Twitterのような会社がこれほど長い間苦労しているというのは非常に哀れです。 –

+0

これまでの回避策として、私はちょうどコンテナ要素に 'width'を設定しました。 – superjos

関連する問題