twitterのシェアボタン設置で「上吹き出し」にしたかったのにつまづいた

投稿日:2012-08-01

Larry si è tagliato i capelli e guarda in alto: vi piace?
Creative Commons License photo credit: paz.ca

 

おはようございますです。

成長する為にすることの第一歩は「真似る」ことだと思ってるナカジです。

 

先日、拝読させてもらってるブロガーの方々をまねして

シェアボタンの設置方法を変更しました。

 

ですが

twitterのシェアボタンを「上吹き出し」

にしたかったのにつまづいたのでその部分を共有したいと思います。

以下のシェアボタン作成ページで作成すると

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

上記の画像のように「横吹き出し」になります。

 

これを上記のように「上吹き出し」にする方法は

Twitter Developers サイト

に詳しく書いてありますが、英語です...

ではやり方を説明します。

 

やり方は簡単!!

シェアボタン作成ページで生成した「コードの1行目」に

data-count=”vertical”

を付け加えます。

<a href=”https://twitter.com/share” data-lang=”ja” data-count=”vertical”>ツイート</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>

コレだけです。

 

ただ、落とし穴が...

シェアボタン作成ページで作成する時に

ボタン(大)

にチェックを入れると

<a href=”https://twitter.com/share” data-lang=”ja” data-size=”large”>ツイート</a>

とコードがでてくるのですが、なぜか

data-size=”large”」があると

「上吹き出し」にならなかったんです!!

 

【OK版】

<a href=”https://twitter.com/share” data-lang=”ja” data-count=”vertical”>ツイート</a>

 

【NG版】

<a href=”https://twitter.com/share” data-lang=”ja” data-count=”vertical” data-size=”large”>ツイート</a>

 

わたしだけかも知れませんが、共有しておきたいと思います。

サポート募集中

この記事はお役に立てましたか。
よかったら、コーヒー ☕ をご馳走いただけたら励みになります。



おすすめのクリエイティブ・コーディング関連カテゴリー

ウェブツール

機能はシンプルなものですが、p5.jsやTone.jsで描画したり音が出たりするので遊んでみてください。
・【Midi Number Tools】:MIDIナンバーから音名と周波数を判定します
・【Delay Time Calculator】:テンポに応じた音符の長さを判定します