【WordPress】SNSシェアボタンの共有リンクを作成|Twitter・Facebookなど

今回は、WordPressのサイトでSNSのシェアボタンの共有リンクを作成する例となります。

SNSの共有リンクを作成する例

今回の例で作成するSNSの共有リンクは、Twitter・Facebook・LINE・Pocket・はてなブックマークボタンとなります。以下がソースコード例となり、SNSの共有リンクを表示させたい箇所に記述します。

<?php
// 現在のページURLを取得してURLエンコード
$url_encode = urlencode( get_permalink() );
// 現在のページのタイトルを取得してURLエンコード
$title_encode = urlencode( get_the_title() );
?>

<ul class="sns-list">
	<!-- Twitterの共有リンク -->
    <li class="sns-twitter">
        <a class="sns-link" target="_blank" href="<?php echo esc_url( 'https://twitter.com/share?url=' . $url_encode . '&text=' . $title_encode ); ?>">Twitter</a>
    </li>
    <!-- Facebookの共有リンク -->
    <li class="sns-fb">
        <a class="sns-link" target="_blank" href="<?php echo esc_url( 'https://www.facebook.com/share.php?u=' . $url_encode ); ?>">Facebook</a>
    </li>
    <!-- LINEの共有リンク -->
    <li class="sns-line">
        <a class="sns-link" target="_blank" href="<?php echo esc_url( 'https://line.me/R/msg/text/?' . $title_encode . '%0A' . $url_encode ); ?>">LINE</a>
    </li>
    <!-- Pocketの共有リンク -->
    <li class="sns-line">
        <a class="sns-link" target="_blank" href="<?php echo esc_url( 'https://getpocket.com/edit?url=' . $url_encode . '&title=' . $title_encode ); ?>">Pocket</a>
    </li>
    <!-- はてなブックマークの共有リンク -->
    <li class="sns-hatena">
        <a class="sns-link" target="_blank" href="<?php echo esc_url( 'https://b.hatena.ne.jp/add?mode=confirm&url=' . $url_encode ); ?>">はてなブックマーク</a>
    </li>
</ul>

ソースコードの説明

以下は、ソースコードのポイントとなる箇所の説明となります。

現在のページの情報を取得

まず、SNSの共有リンクURLのパラメータで使用する現在のページの情報を、以下のテンプレートタグで取得します。

  • get_permalink()を使い、ページのURLを取得
  • get_the_title()を使い、ページタイトルを取得

テンプレートタグで取得した値は、SNSの共有リンクのURLパラメータで使用するため、urlencode関数でURLエンコードを行い、それぞれ変数$url_encode、$title_encodeへ格納しています。

urlencode関数について

urlencode関数は、URLに使用できない文字列を、URLに使用できる文字列に変換(URLエンコード)することができます。また、WordPress以外でも使用できるPHP関数となります。

SNSの共有リンクURLを作成

現在のページの情報が格納されている変数$url_encode、$title_encodeを、それぞれのSNSの共有リンクURLのパラメータに指定することで、SNSの共有リンクURLを作成しています。

esc_url関数について

例ではURLを出力する際、セキュリティ対策のため、esc_url関数で値のエスケープ処理をしています。

値のエスケープ処理については、以下のリンク先を参考にしてみてください。

データ検証 - WordPress Codex 日本語版

参考サイトなど

コメント投稿またはTwitterで返信

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。
Twitterで返信する場合はこちらから。

また、コメントは承認制となります。