[WordPress] SNSシェアボタンを作成する方法

SNSのシェアボタンの作り方

SNSのシェアボタンを作成する方法をまとめます。プラグインではなく、自力のカスタマイズで簡単なSNSのシェアボタンを作ります。作るのは次の5つのボタンです。

  • Twitter
  • Facebook
  • はてなブックマーク
  • Google+
  • Pocket

コード

<?php
function the_sns_share_buttons() {

    $url = urlencode( get_the_permalink() );

    ?>
    <aside id="sns-share-buttons" class="sns-share-buttons">
        <ul>
            <li>
                <a href="https://twitter.com/share?url=<?php echo $url; ?>" rel="nofollow" class="sns-twitter no-decoration" target="_blank">
                    <i class="fa fa-twitter"></i><span class="text">Twitter</span>
                </a>
            </li>
            <li>
                <a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $url; ?>" rel="nofollow" class="sns-facebook no-decoration" target="_blank">
                    <i class="fa fa-facebook"></i><span class="text">Facebook</span>
                </a>
            </li>
            <li>
                <a href="http://b.hatena.ne.jp/entry/<?php echo $url; ?>" rel="nofollow" class="sns-hatena no-decoration" target="_blank">
                    <i class="hatena">B!</i><span class="text">はてブ</span>
                </a>
            </li>
            <li>
                <a href="https://plus.google.com/share?url=<?php echo $url; ?>" rel="nofollow" class="sns-google no-decoration" target="_blank">
                    <i class="fa fa-google-plus"></i><span class="text">Google+</span>
                </a>
            </li>
            <li>
                <a href="http://getpocket.com/edit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" rel="nofollow" onclick="javascript:window.open(encodeURI(decodeURI(this.href)), 'pkwindow', 'width=600, height=600, personalbar=0, toolbar=0, scrollbars=1');return false;" class="sns-pocket no-decoration" target="_blank">
                    <i class="fa fa-get-pocket"></i><span class="text">Pocket</span>
                </a>
            </li>
        </ul>
    </aside>
<?php

}
font-awesomeのアイコンを入れていますが、要らなければ消してください。

URLのエンコード

シェアするURLをエンコードします。エンコードしないと正しくシェアされません。

$url = urlencode( get_the_permalink() );

urlencode 関数を使えばエンコードできます。これをシェア用のURLに埋め込みます。シェア用のURLは上記コードを参考にどうぞ。

target="_blank" と指定することでクリックされたときに別タブで開きます。

以上。