さて、今日はWordPressを使っていると必ずでてくるシェアボタンの実装方法についての紹介です。
各SNSごとのシェアURL
今回カスタマイズするシェアURLです。
サービスごとに若干違いがあるものの基本的には同じです。
シェアしたいURLと、シェア時に表示される文字列( ページタイトル等 )をパラメーターとして設定しa要素のhrefに設定するだけでOKです。
a要素の中身は自由でデザインしてOKです。全て自由というわけではないので、各公式の情報を必ず確認してください。
Twitterでシェア
https://twitter.com/share?url=<シェアしたいURL>&text=<シェア時の文字列>Facebookでシェア
ttps://www.facebook.com/share.php?u=<シェアしたいURL>noteで書く
https://note.com/intent/post?url=<シェアしたいURL>LINEで送る
https://line.me/R/msg/text/?<シェアしたいURL>はてなブックマーク
https://b.hatena.ne.jp/add?url=<シェアしたいURL>&title=<ページのタイトル>WordPressでSNSシェアボタンを作る
今回の本題です。
WordPressでホームページを作る際に必要なSNSシェアボタンを作りましょう。
WordPress側で取得する必要があるパラメータは2つです。
- シェアURL：基本的には現在開いているページのURL
- シェア時に表示される文字列：ページタイトルを設定します。
こちらの2つを取得しましょう。
ループ中に取得する方法
ループ中にパラメーターの値を取得しておくととても簡単です。
まずはループの外で変数を宣言して初期化しておきます。
<?php
$shareTitle = '';
$shareURL = '';
?>ループの中ではこのような感じで値を取得。
取得する際にrawurlencodeを忘れずに…!!
<?php
$shareURL = rawurlencode(get_permalink());
$shareTitle = rawurlencode(get_the_title());
?>あとは、取得したものをa要素中に出力するだけでOKです。
とっても簡単！
// Twitter
<a href="https://twitter.com/share?url=<?php echo $shareURL;?>&text=<?php echo $shareTitle;?>" target="_blank" rel="noopener"></a>
// facebook
<a href="https://www.facebook.com/share.php?u=<?php echo $shareURL;?>" target="_blank" rel="noopener"></a>
// LINE
<a href="https://line.me/R/msg/text/?<?php echo $shareURL;?>" target="_blank" rel="noopener"></a>
// はてなブックマーク
<a href="https://b.hatena.ne.jp/add?url=<?php echo $shareURL;?>&title=<?php echo $shareTitle;?>" target="_blank" rel="noopener"></a>
// note
<a href="https://note.com/intent/post?url=<?php echo $shareURL;?>" target="_blank" rel="noopener"></a>ループの外で取得する方法
ループ外で取得する場合は、WordPress関数が使えない場合があるので、こちらの方法を紹介します。
シェアURLについては、httpヘッダ情報をSSHになっているか判定したあと、REQUEST_URIで現在のURL情報を取得します、
シェアタイトルは、現在のページIDを設定すればOKです。
<?php
// シェアURL
$shareURL = empty($_SERVER['HTTPS']) ? 'http://' : 'https://') . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
// シェアタイトル
$page_id = get_the_ID();
$shareTitle = rawurlencode(get_the_title( $page_id ));
?>おわり
SNSシェアはメディアサイトだけでなく、コーポレートサイトでもよく出てくる実装ですね。
覚えておくと何かと便利なので、ぜひ使ってください。
参考にした公式ページ