WEBMAN

HTML,CSS,JSでハマった事のメモとWEB制作の実験場

更新日: / 公開日:

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

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

SPONSOR

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

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

SNSっていっぱいある

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

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

プラグインつかえば?

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

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

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

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

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.'&t='.$shareText;
  }else if($sns === 'tw'){
    echo 'https://twitter.com/share?url='.$shareURL.'&text='.$shareText.'&via=nagasawaaaa';
  }else if($sns === 'gp'){
    echo 'https://plus.google.com/share?url='.$shareURL;
  }else{
    echo '';
  }
}

引数の内訳

  • 引数が 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>

最後に

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

SPONSOR

この記事をシェアする

コメント

関連記事