WordPressで作ったWEBサイトにテキストのソーシャルボタンを設置する方法を説明します。
SNS（ソーシャルネットワークサービス）で記事をシェアしてもらうためのボタンを設置すると、読者が記事をより簡単に共有できるようになります。
記事が拡散することで、より多くの方に読んでもらえるので、WEBサイトを作ったらぜひ設置しておきましょう！
SNSでのシェアの他に、「はてなブックマーク」や「LINEに送る」「Feedly（RSSリーダー）への登録」のボタンも設置しておくとより親切ですよね。
テキストだと画像より読み込みも早くて、ボタンのサイズを大きく出来るのでスマホでの押しやすさという点でも優れています。
正規のロゴマークに手を加えられない場合もテキストリンクなら大丈夫です。
また、この作業はローカル環境（XAMMPなど）で作成、テストしてから本番環境へアップロードすることをお勧めします。
ワードプレスで作ったサイトにフラットデザインのソーシャルボタンを設置する方法
ここでは子テーマのcontent.phpを編集する方法をご紹介します。使っているテーマによってファイル名が違うかもしれません。
記事を表示するファイルのことです。<div class=”entry-content”>のタグが目印になるかと思います。
この記事は、
『営業と集客のコツがみるみるわかるブログ！』
今どきのフラットなソーシャルボタンをWordPressに実装したのでソースコードを公開！
http://value-innovator.biz/marketing/buzzbutton/
を参考にさせていただきました！とても分かりやすかったです！
子テーマのcontent.phpを編集する方法以外を知りたい方は、ページ最下部の追記をご覧ください！
1.Font Awesomeの設定
ボタンに入れるテキストの横に Font Awesome のアイコンフォントを入れたいので、自分のWEBサイトでFont Awesomeが使えるように設定します。
子テーマのheader.phpの<head>～</head>に以下のコードを入れます。
|
1 |
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> |
これだけで、自分のWEBサイトでFont Awesomeが使えます。
FONT AWSOMEの公式サイト
http://fortawesome.github.io/Font-Awesome/
2.ボタンのHTMLタグを作成
子テーマのcontent.phpの<div class=”entry-content”>～<div><!–entry-contentのおわり–>のソーシャルボタンを設置したい位置にソーシャルボタンのHTMLを追加します。
以下、各シェアボタンのHTMLです。
○○○にはCSS用のクラス名を入れて下さい。
<i></i>のタグはFont Awesomeの呼び出しタグです。
・FaceBookでシェア
|
1 2 3 4 5 6 |
<a class="○○○" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&t=<?php the_title(); ?>" onClick="window.open(encodeURI(decodeURI(this.href)), 'sharewindow', 'width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=!' ); return false;"> <i class="fa fa-facebook"></i> Facebook</a> |
○○○にはCSS用のクラス名を入れて下さい。
・Twitterでシェア
|
1 2 3 4 5 6 |
<a class="twitter-tweet" href="http://twitter.com/intent/tweet?text=【<?php the_title(); ?> | <?php the_permalink(); ?>】" onClick="window.open(encodeURI(decodeURI(this.href)), 'tweetwindow', 'width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=!' ); return false;"><i class="fa fa-twitter"></i> twitter</a> |
○○○にはCSS用のクラス名を入れて下さい。
・google+でシェア
|
1 |
<a class="○○○" href="https://plus.google.com/share?url=<?php the_permalink(); ?>" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"><i class="fa fa-google-plus"></i> Google＋</a> |
○○○にはCSS用のクラス名を入れて下さい。
・Lineで送る
|
1 2 |
<a class="○○○" href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>">B<i class="fa fa-exclamation"></i> はてブ</a> <a class="○○○" href="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>"><i class="fa fa-comment-o"> </i>LINE</a> |
○○○にはCSS用のクラス名を入れて下さい。
・Pocketに保存
|
1 |
<a class="pocketbtn" href="http://getpocket.com/edit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" onclick="window.open(this.href, 'PCwindow', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;"><i class="fa fa-chevron-down"></i> Pocket</a> |
○○○にはCSS用のクラス名を入れて下さい。
・Feedlyに登録
|
1 |
<a class="○○○" href='http://cloud.feedly.com/#subscription%2Ffeed%2F△△△' target='blank'><i class="fa fa-rss"></i> Feedly</a> |
○○○にはCSS用のクラス名を入れて下さい。
△△△には自分のサイトのfeedURLを入れて下さい。
feedURLの取得はhttp://berss.com/feed/Find.aspx
で簡単に出来ます。
3.ボタンのCSSを作成
子テーマのstyle.cssに追加します。
設置するボタンの分それぞれ作成してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
a.○○○{ width:50%; /*ボタンの幅（ここでは記事の幅の半分と言う意味で50％を指定しています。変更は自由です。）*/ padding:20px 0 20px 0; /*文字の上下の余白（ここでは上下に20pxを指定しています。変更は自由です。）*/ color:#fff; /*文字の色（ここでは白を指定しています。変更は自由です。）*/ text-align:center; /*文字の中央寄せ（変更は自由です。）*/ background-color:#3b5998; /*背景の色（ここではFeceBookの青を指定しています。変更は自由です。）*/ display:block; /*リンクをボックスタイプに指定*/ text-decoration:none; /*リンクの文字の下に線が出ないように指定*/ font-size:15px; /*文字の大きさを指定*/ float:left; /*ボタンを左にフロートさせる*/ } a.○○○:hover{ background-color:#6277a1; /*マウスオーバー時の背景の色（ここではFeceBookの青を指定しています。変更は自由です。）*/ } |
○○○は1.で決めたCSS用のクラス名です。
参考までに、他のボタンで使っている背景色一覧です。
背景色
|
1 |
background-color:#00acee; |
マウスオーバー時の背景の色
|
1 |
background-color:#6aafca; |
背景色
|
1 |
background-color:#EF3E56; |
マウスオーバー時の背景の色
|
1 |
background-color:#f79eaa; |
背景色
|
1 |
background-color:#568BCA; |
マウスオーバー時の背景の色
|
1 |
background-color:#6277a1; |
背景色
|
1 |
background-color:#DD4B39; |
マウスオーバー時の背景の色
|
1 |
background-color:#E05D4C; |
背景色
|
1 |
background-color:#70CA3B; |
マウスオーバー時の背景の色
|
1 |
background-color:#9ad975; |
背景色
|
1 |
background-color:#00C300; |
マウスオーバー時の背景の色
|
1 |
background-color:#98D382; |
こんな感じに仕上がります。
参考
こちらのサイトでは、ソーシャルボタンを別ファイルで作成してcontent.phpに呼び出す方法が書かれていてとても参考になりました。
『ドキドメ！』
ソーシャルボタンを自作してWordPressの高速化
http://dokidome.com/pege-speed/1178/
追記
シェアボタンはプラグインを使えば手軽に設置できます。
シンプルで設定も簡単な Simple Share Buttons がおすすめです。
https://simplesharebuttons.com/
当ブログでも記事の上方に使っています。
Simple Share Buttonsの設定方法はこちらのサイトでの説明がとても分かりやすかったです！
『WordPress神推しブログのネタワン』
Simple Share Buttons Adder – 8種類のシェアボタンを利用できるWordPressプラグイン
http://netaone.com/wp/simple-share-buttons-adder/
