シェアボタンのURLを記事毎に自動で設定する

投稿日：2016年11月29日

お疲れ様です、ナガです。

エントリー下部に設置しているシェアボタンについての備忘録です。カウント数を取得する機能はつけていません。いつかきっと、つけます。あと全画面の別ウィンドウで開いてますが、これもコンパクトにしたいです。いつかきっと、コンパクトにします。

SNSっていっぱいある

僕のブログでは Facebook、Twitter、Google+ の三つしかシェアボタンつけてないですけど、他に有名どころは、LINE、Instagram、Pinterest、LinkedIn、はてなブックマーク、mixiなどなど、世の中はSNSで溢れかえってます。 ※はてブのシェアボタンはいつかきっと、つけます。

これら全てのシェアボタンをテンプレートに直接書くと結構コードがゴチャゴチャして嫌な感じになります。テンプレートファイルはなるべく綺麗にしておきたい。

プラグインつかえば？

正直、プラグイン使えばもろもろ解決できると思うのですが、僕もエンジニアの端くれとしてこれくらいは自分でコード書いて表示させたい。自分でなんとかできそうな機能のためにプラグインを増やしたくないなと。

シェア用のURLだけ関数にまとめる

個人的に href の値がURLとオプションでゴチャゴチャするのを防ぎたいのでコードを書きます。

下記の例は僕のサイトで使ってるサンプルです。

<?php
function shareURL($sns){
  // シェア用のURL出力用
  $shareURL  = urlencode(get_permalink());
  $shareText = urlencode(wp_title('|', false, 'right').get_bloginfo('name'));
  if($sns === 'fb'){
    echo 'https://www.facebook.com/sharer/sharer.php?u='.$shareURL.'&amp;t='.$shareText;
  }else if($sns === 'tw'){
    echo 'https://twitter.com/share?url='.$shareURL.'&amp;text='.$shareText.'&amp;via=nagasawaaaa';
  }else if($sns === 'gp'){
    echo 'https://plus.google.com/share?url='.$shareURL;
  }else{
    echo '';
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

引数の内訳

引数が fb なら Facebook
引数が tw なら Twitter
引数が gp なら Google+
引数が無ければ何も表示させない

変数の内訳

$shareURL には現在表示しているエントリーのパーマリンクを、$shareText にはエントリーのタイトルが入ります。

URL出力用の関数をテンプレートファイルに

上記セクションで作成した関数を記事出力用の single.php に記載します。この関数の問題は、ループの中でしか使えない点です。しかし多くのの場合、エントリー内にシェアボタンが置いてあるパターンだと思うのでそこは大目に見てください…。

<ul>
  <li><a href="<?php shareURL('fb'); ?>">Facebook</a></li>
  <li><a href="<?php shareURL('tw'); ?>">Twitter</a></li>
  <li><a href="<?php shareURL('gp'); ?>">Google</a></li>
</ul>

1
2
3
4
5

最後に

冒頭にも書きましたが、現状だと全画面でシェアウィンドウ開いて使いづらいと思うので、近日中にいい感じに大きいウィンドウが開く仕様にしておきます。

# シェアボタンのURLを記事毎に自動で設定する

# SNSっていっぱいある

# プラグインつかえば？

# シェア用のURLだけ関数にまとめる

# 引数の内訳

# 変数の内訳

# URL出力用の関数をテンプレートファイルに

# 最後に