Hiromuブログ

最近はこちら(https://zenn.dev/hiromu)が本体

ソーシャルボタンの設置方法(補足)

前回のエントリーの少し補足の記事です。

 

Twitter

Twitterボタンは公式サイトだと以下の種類しかありません。

twitter_btn

 

でも↓のような上に数字、下にボタンのスタイルもよく見かけますよね。

twitter_box

 

これを実現するには以下のように生成されたコードのaタグの中に「data-count="vertical"」を追加すれば実現できます。

 

<a href="https://twitter.com/share"
   class="twitter-share-button"
   data-url="http://hi-rom.com"
   data-text="hi-rom.com"
   data-via="hi_rom_"
   data-count="vertical"
   data-lang="ja">
ツイート
</a>

 

Facebook

Facebookボタンを取得するためのサイトは英語なので、ボックスタイプを設置する場合の例を簡単にまとめました。

facebook_btn_ex

 

Google

Google+は「詳細オプション」にURL入力欄があるので注意が必要です。

以下はボックスタイプの例です。

 

google_plus_btn_ex