ブログのシェアボタン、何を使っていますか?
- 各SNSの公式ボタン
- テーマの機能
- プラグイン
いろんな設置方法がありますね。
公式ボタンやプラグインは、読み込みに時間がかかる場合があります。
ページの表示速度は重要です。あまりに遅いと、ユーザーの離脱に繋がるだけでなく、Googleから検索順位を下げられてしまう可能性が!
今回は、自作のSNSシェアボタンの設置方法をシェアしたいと思います。コピペで使えるコードをご紹介しますので、サイト作りにお役立てください♪
【2019年3月31日記事修正】以前はGoogle+ボタンを付けていましたが、個人向けGoogle+ページの廃止に伴い、Pinterestボタンに差し替え記事を修正しました。
投稿記事下にSNSボタンを表示する方法
今回、設置するシェアボタンの完成形はこちら。
当サイトでも、記事下にこちらの自作ボタンを設置しています。
※テーマによって若干差は出ると思います。
SNSシェアボタンを一番使うのは、おそらく記事を最後まで読んだとき。
記事を読み終えて、良い記事だったな~と思ったときに、ちょうどシェアボタンがあり、押しやすいサイズだったら、つい押したくなりませんか?^^
SNSボタンが標準装備されているテーマでは、たいてい記事下にボタンがありますよね。
一般的に、投稿記事のテンプレートはsingle.phpです。
single.phpにボタンを実装するためのコードを追記することで、すべての投稿記事下に、SNSシェアボタンを表示させることができます。
※テーマによってテンプレートは異なります。お使いのテーマをご確認ください。
個別記事single.phpの子テーマを作る
ワードプレスでカスタマイズをする場合、「子テーマ」を使います。
子テーマは、簡単にいえば、テーマのファイルのコピー。
親テーマが更新しても、子テーマでカスタマイズした内容が優先されます。
子テーマを作らずカスタマイズをすると、親テーマの更新時に、せっかくのカスタマイズが上書きされてしまいます。
今回初めて子テーマを作る方は、style.cssとsingle.phpのコピーを作成してください。
子single.phpに、SNSボタンを実装するコードを追記する
こちらのサイトを参考に、自分のサイトに合うよう修正しました。
Twitter・Facebook・はてブ・LINE・Pocket・Pinterest用コード
子single.phpに追加したコードは以下。
<div class="snsShareArea"> <!-- Twitter --> <a class="btn--twitter" href="http://twitter.com/share?url=<?php the_permalink();?>&text=<?php echo get_the_title(); ?>&via=your_ID&tw_p=tweetbutton&related=your_ID" target="_blank"> Twitter </a> <!-- Facebook --> <a href="http://www.facebook.com/share.php?u=<?php the_permalink(); ?>&t=<?php echo get_the_title(); ?>" target="_blank" class="btn--facebook"> Facebook </a> <!-- B! Hatena --> <a class="btn--hatena" target="_blank" href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&title=<?php echo get_the_title(); ?>" target="_blank"> B! Hatena </a> <!-- Line --> <a class="btn--line" href="http://line.naver.jp/R/msg/text/?url=<?php the_permalink(); ?>" target="_blank"> LINE </a> <!-- Pocket --> <a class="btn--pocket" href="http://getpocket.com/edit?url=<?php the_permalink();?>&title=<?php echo get_the_title;?>" target="blank"> Pocket </a> <!-- Pinterest --> <a class="btn--pinterest" href="//pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>" target="_blank"> Pinterest </a> </div>
※シェア数の表示は、私のサイトでは不要だったため、カウントに関する記述を削除しています。
Twitterのコードに関する注意事項
赤字の部分を、ご自身のTwitterのID(@以下)に書き換えてください。
<a class=”btn–twitter” href=”http://twitter.com/share?url=<?php the_permalink();?>&text=<?php echo get_the_title(); ?>&via=your_ID&tw_p=tweetbutton&related=your_ID” target=”_blank”> Twitter </a>
当サイトのTwitterアカウントは、「あかえほ@akaeho_library」です。
この場合、赤字の部分を「akaeho_library」に書き換えます。
Twitterで短縮URLをシェアしたい場合
URLに日本語があると、Twitterでシェアした際、日本語部分が英数記号に変換されます。
以下のように、やたら長いURLになってしまいます。
Jetpackというプラグインを入れていれば、短縮URLを取得できる機能があります。
シェア用URLに、Jetpackの短縮URLを使えます。
Twitter用コードは、以下のように書きます。
<!-- Twitter --> <a class="btn--twitter" href="http://twitter.com/share?url=<?php echo wp_get_shortlink($post_id);?>&text=<?php echo get_the_title(); ?>&via=your_ID&tw_p=tweetbutton&related=your_ID" target="_blank"> Twitter </a>
コードを追記した場所
以前は、Selaというテーマを使用していました。
当時は、この記述の上に追記しました。コメント欄の上です。
※現在はCocoonというテーマを使用しています。Cocoonには独自のSNSボタンあり。
子style.cssにSNSボタンを装飾するためのコードを追記する
今のままだと、テキストリンクのような見た目となり、ボタンの形状にはなりません。
今度は、子style.cssにボタンを装飾するためのコードを追記し、見た目を整えます。
以下のコードを、子style.cssの一番下にコピペしてください。
/* Share button */ .snsShareArea:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; } .snsShareArea a{ box-sizing: border-box; display: block; float: left; width: 31.3%; margin: 1%; padding: .7em 0; border-radius: 3px; color: white; text-decoration: none; text-align: center; font-weight: bold; } .btn--twitter{ background: #55acee; } .btn--facebook{ background: #3b5998; } .btn--line{ background: #54bc4d; } .btn--hatena{ background: #008FDE; } .btn--pocket{ background: #ee4056; } .btn--pinterest{ background: #c60120; }
これで、ボタンの形になりました!
シンプルなボタンなので、CSSに詳しい方は、お好みのボタンを作ってみてください♪
記事中の任意の位置にSNSボタンを表示する方法
今度は任意の場所に、ショートコードで、SNSボタンを表示させる方法です。
子テーマのフォルダ内に新たにsns.phpを作成する
ショートコードで呼び出すファイル「sns.php」を作成します。
子テーマを作った際、「child」というフォルダを作成しました。
「child」フォルダ内に、「sns.php」という名前でファイルを新規作成します。
このファイルに記載する内容は、上でご紹介したTwitter・Facebook・はてブ・LINE・Pocket・Pinterest用のコードです。
functions.phpに、SNSボタンを呼び出すためのショートコードを指定する
「functions.php」を開き、コードを追記します。
functions.phpの子テーマがある場合は、子テーマを使ってください。
自分で子テーマを作る場合、functions.phpの子テーマはうまく機能しない可能性があり、要注意です。
function sns_original() { ob_start(); get_template_part('sns'); return ob_get_clean(); } add_shortcode('sns', 'sns_original');
「sns.php」を、ショートコード「sns」で呼び出すためのコードです。


記事中の任意の位置にショートコードを書く
sns.phpの作成とfunctions.phpへの追記が無事に完了したら、あとはシェアボタンを表示させたい場所にショートコードを書くだけ!
ショートコードの書き方はシンプル。[sns]と書いてください。
※[]は半角に直してください。
最後に
今回の記事は、ある程度、phpやcssをいじれる向けの記事となりました。
説明も最低限にしているため、この記事を読んで操作に不安がある方は、なるべくテーマ既存のSNSボタンやプラグインを利用してください。
よく分からないまま作業をしてしまうと、最悪の場合、サイトを壊してしまいます。
- 全ての記事下に表示させるなら、子single.phpにボタン実装用コードを追記
- css(子テーマのスタイルシート)でボタンの見た目を調整
- 記事中の任意の表示させたい場合は、ショートコードを利用。sns.php作りボタン実装用のコードをコピペ、functions.phpにsns.phpを呼び出すためのコードを追記する
最後までお読みいただき、ありがとうございました。