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

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

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

コードの例は以下となり、投稿内でSNSの共有リンクを表示させたい箇所に記述します。

作成するSNSの共有リンクは、Twitter・Facebook・LINE・Pocket・はてなブックマークボタンとなります。

<?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"  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"  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"  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"  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"  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()を使い、ページタイトルを取得

また、テンプレートタグで取得した値は、urlencode関数でURLエンコードを行い、それぞれ変数$url_encode、$title_encodeへセットしています。

urlencode関数について

urlencode関数はWordPress以外でも使用できるPHP関数となり、文字列をURLで使用できる文字列に変換（URLエンコード）します。

SNSの共有リンクURLを作成

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

esc_url関数について

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