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ページの「いいね」は下記からどうぞ!最新記事がニュースフィードに表示されますぞ!


オススメ

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

  1. 【保存版】iPhoneのストレージ容量不足を劇的に解消する7つの方法
  2. 15インチ型「MacBook Pro」の動画編集性能を2016/2015モデルで比較ーーFinal CutとPremiere Pro
  3. 【レビュー】実際どう?超短焦点プロジェクター「LSPX-P1」が彩る自宅の白壁(2/3)【Sponsored by Sony】
  4. 【サイバーマンデー】Amazon年内最後のビッグセール4日目の特選品
  5. 【大悲報】2017年のiPhone、「iPhone 7s」と「iPhone 7s Plus」に?!