Webの最新トピックを配信中!

WordPressにプラグイン無しで綺麗にソーシャルボタンを設置する方法

東洋経済オンラインで「33歳、タイで転職繰り返す日本人女性の苦悩」という個人的にかなり気になる記事を読もうと思ったら、すごくソーシャルボタンが綺麗に並んでいたのを見つけました。


これはいい!この大きさならちょうど良くてすごく押しやすそう。うちのサイトにも実装したい!と思って、似たような感じで設置してみました。


この記事の上部にも表示していますが、こんな感じです。

ということで、Wordpressの記事に綺麗にソーシャルボタンを並べる方法を紹介します。

プラグインを使わずソーシャルボタンを設置する方法

まずボタンのHTML部分を作る

ボタン部分のHTMLを書きます。

設置するソーシャルボタンは「Facebookのいいね&シェア」「ツイッター」「はてブ」「LINEで送る」の4つにしました。それぞれシェアされるURLを<?php the_permalink(); ?>としている点に注意してください。記事URLをシェアする想定です。
それぞれのボタンの大きさは、スマホで押しやすいように少し大きめです。

必要なJSを読み込む

各ボタンに必要な外部のJSを読み込みます。

↑こちらは「Facebookのいいね」用のJSです。bodyの直下辺りに記載します。これって実際どこに記載してもいいんですかね。

↑こちらは上から「ツイッター」「はてブ」「LINEで送る」に必要なJSです。bodyの閉じタグの辺りにぶち込みましょう。

CSSでレイアウトを調整

最後に、CSSでレイアウトを調整します。

LINEボタンがちょっとだけ大きいので、各ボタンを下揃えにしたくて、display:inline-blockにし、vertical-align:bottomを指定しています。Sassは下です。

これで完了です。

この記事の上部にも表示されているのでデモとして確認してみてください。トップやカテゴリページなどにソーシャルボタンを設置する場合は、<?php the_permalink(); ?>の箇所を適宜変えてください。

コラム:Webデザイナーを強くオススメする理由

あなたはたぶんエンジニアにはなれません。
だからこそ、このサイトでは、Webデザイナーになることを強くオススメしています。

でも、もし、エンジニアになれれば、月収100万円以上も可能です。実際に僕の友人も軽く年収1000万円は超えています。

ほとんどの人がエンジニアにはなれないので、30〜40万円以上はする高額なプログラミングの学校に行くのはお金をドブに捨てる可能性があります。どうしてもエンジニアになりたい方は、無料でプログラミングを学べるProEnginner開講の学校『エンジニアカレッジ』に行きましょう。エンジニアカレッジは、学校&就職支援の一体型サービスです。ここは本当にありがたい存在です。ソーシャルゲーム大手企業で有給インターンまで可能です。ここで、自分にエンジニアとしての素質があるのかチェックしてください。もし、あなたに才能があったら、最高にラッキーな人生です。
参考記事 : なぜ「エンジニア」ではなく「Webデザイナー」をすすめるのか

無料のプログラミング学校『エンジニアカレッジ』の詳細を読む

質問や感想などお気軽にどうぞ!

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  • 管理人(ねこポン)について

    ぬるま湯でぬくぬくと週3日だけ働く30代半ばウェブデザイナーです!
    インテリ風&仕事できる風を醸し出す腕前では右に出る者はいませんが、電話すら怖くて取れないし、無断欠勤してしまい自宅に警察が来たほどのコミュ症ポンコツ人間です。
    現在Web業界5年目。事業会社とWeb制作会社のウェブデザイナーを経て、フリーランスになりました。

    > 僕の20代まるごと黒歴史ストーリー

  • Web制作会社を歩き回れるゲームを作ってみました!ぜひ探検してみてください。(注意:音が出ます!)

    一番上へ