フリーランスの道具箱

facebookいいねボタン(バイラルメディア風?)を子テーマをカスタマイズして、記事下に設置しました。

facebookいいねボタン設置

facebookのいいねボタンも欲しい

ブログのWordPressテーマをバズ部さんが配布されているXeoryへ変更して、標準のまま利用していましたが、記事下にあるのは、TwitterとFeedlyのボタンなのです。

facebookのボタンも設置したいので、カスタマイズしました。

今回設置したボタンは、WordPressのプラグイン(プラグインは記事最後に紹介しています)もあります。ただ、Twitter・Feedlyは元々あるボタンを使いたかったので、プラグインを使わずに、子テーマを使って、single.phpとスタイルシートをカスタイズし、facebookページのいいねのボタンを実装しています。

今回のカスタマイズの参考資料(感謝)はこちら

参考にさせてもらったコードからfacebookの部分だけを取り出して設置しました。また、モバイル?PC?の判定部分のPHPコードも、子テーマのfunctions.phpに追記しています。

スタイルシートはアイキャッチ画像の表示サイズを好みに改良しています。

実際のコード

facebookページ いいねボタン PHPコード

子テーマのsingle.phpに追記しています。

https://gist.github.com/mono96/ca2ac2fa50db9d909e4b

スタイルシート

メディアクエリでモバイルとPC表示を分岐しています。

https://gist.github.com/mono96/8da659246c61580f9bd7

functions.php

子テーマのfunctions.phpに追記した、モバイル表示判定コード

https://gist.github.com/mono96/61305c5cb8fabf09df2a

参考記事

子テーマの作り方はこちら

メディアクエリについてはこちら

WordPressにてバイラル風のボタンを設置するプラグインはこちら


この記事を書いた人 :

profile2016autumn

ブロガー・Web&Blogコーチ・親指シフトユーザー・orzレイアウト考案者。WordPressが得意。HTML・CSS・PHPも熟知し広範囲の知識を持つ。

誰でもインターネットを活用できる時代だから、頭でモヤモヤしている「こんなのを実現したいなぁ」を引き出して形にし実現させるお手伝い、そして、インターネットを上手に使えるようにサポートするのが得意です。

iPhoneやAndroidなどのガジェット、デジタルだけでなく文房具などのアナログなツールも大好きです。写真や旅を楽しむこと、おいしいお食事、楽しい・ワクワクすることが大好きです。

Twitterやfacebookでも情報発信中、よろしければフォローしてください。



Instagram
follow us in feedly

ご依頼・講座開催情報はこちら

ブログ・情報発信でお困りごと、モヤモヤ、解決。あなたのステップアップをサポートしています。

広告

情報発信コンサルティング・コーチ

Web・ブログのコンサルティング・ご相談のご依頼を受け付けております。
・Webを活用して本気でビジネス・人生を切り開きたい方
・Webのテクニカルな改善でお悩みの方
・アイディアはあるのに、記事の文章にするのがうまくいかない方
・親指シフトを本気で習得したい方

そんな多様なお悩み、そして、さらに隠れていて見えないお悩みもダイレクトにアドバイス。ブログ2400記事をアウトプットした経験に基づく良質なノウハウ・スキルを手に入れてください。時間の大切さを感じてるあなたへオススメです。

お申し込みは
お問い合わせフォーム
からお願いします。

うまく表示されない時は
こちらをご覧下さい。

お申し込みは
お問い合わせフォーム
からお願いします。

こちらの記事も役立ちます