Facebookの「いいねボタン」を大きく表示させる方法

Top Image Facebook Like Button
Facebookの「いいね」ボタンを設置してみたものの、設置場所によってはボタンそのもののサイズをもう少し大きくしたい、と感じる人もいるのではないだろうか。ボタンサイズを「large」にしても物足りない。

僕もやり方が分からずに困っていたのだが、アイデアハッカーにその方法が解説されていたので、紹介しておく!

Facebookの「いいね」ボタンを大きくするためのコード

まずはFacebookの「いいね」ボタンを表示するためのコードをは公式ページから取得しましょう。


今回は下記のような設定でコードを取得した。リンク先はgori.meのFacebookページ
facebook-likebutton-gorime-settings
取得したコードはこちら。

<div class="fb-like" 
data-href="https://www.facebook.com/gorime" 
data-layout="button_count" 
data-action="like" 
data-size="large" 
data-show-faces="false" 
data-share="false">
</div>

その結果、表示されるボタンは下記の通り(押せます!):


ここに「transform:scale(ここに倍率を入れる)」という記述を追加することによって大きくすることができる。2倍にする場合、下記のようなコードになる。

<div class="fb-like" 
data-href="https://www.facebook.com/gorime" 
data-layout="button_count" 
data-action="like" 
data-size="large" 
data-show-faces="false" 
data-share="false"
style="transform:scale(2);-webkit-transform:scale(2);-moz-transform:scale(2);">
</div>

上記のサイズで出力した結果は下記(押せます!):


2倍という倍率、予想以上に大きいので要注意!後は自分の好みによって倍率を調整しましょう。

また、本記事をスマホで見ている場合は反映されない模様。「いいね」ボタンのサイズを知るためにはMac/PCのブラウザからご覧あれ!

▼iPhoneのSafariやChromeからPC表示する方法は下記記事を参考にどうぞ!

劇的ビフォーアフターをチェック!

では実際に上記コードで変更した結果を紹介しておく。

まずは変更前の状態。このままでも良いが、個人的にはもう少し大きくしたかった。
Facebook Button Before
そこで、今回覚えたコードを適用した結果はこちら。良い感じに大きくなっている。併せて背景の画像サイズも大きくしてみた。
Facebook Button After
Facebookのいいねボタンを大きくしたい人はどうぞお試しあれ!そしてgori.meのFacebookページの「いいね」は下記からどうぞ!最新記事がニュースフィードに表示されますぞ!


あわせて読みたい
もっと読みたい
  1. 「iPhone 5s」を「iPhone 7 mini」に改造した人が登場
  2. 【非公式】「iPhone 8 – ‘X’ Edition」のコンセプトイメージが公開ーーこれまで報じられている噂を反映
  3. 【保存版】iPhoneのストレージ容量不足を劇的に解消する7つの方法
  4. タイプライター風のMac用ワイヤレスキーボード「lofree」、登場!Magic Keyboardと同じレイアウト
  5. 【保存版】Macの「その他」を削除し、ストレージ容量不足を解消する方法

gori.meの最新情報をチェック!!