WordPress : Twitter / Facebook / はてぶ / LINE の大きめシェアボタンを自作する

Hinemosu

当ブログHinemosuで使用しているSNSへのシェアボタンのサンプルコードを掲載します。

SNSはTwitter / Facebook / はてぶ / LINE に対応し、スマホやタブレットを意識した大きめタップサイズになっているのが特徴です。

表示例

実際の表示例は以下の通りです。

ブラウザ画面幅が640pxを下回る場合
ブラウザ画面幅が640pxを下回る場合
ブラウザ画面幅が640px以上の場合
ブラウザ画面幅が640px以上の場合

サンプルコード

<?php 
    $title = get_the_title();
    $url_title = urlencode($title) ;
?>

<div class="share_box">
    <ul>
        <li>
            <a href="http://www.facebook.com/share.php?u=<?php the_permalink(); ?>" target="blank" class="fb_share"><i class="fa fa-facebook fa-fw"></i>Facebookでシェア</a>
        </li>
        <li>
            <a href="https://twitter.com/share?url=<?php the_permalink() ?>&amp;text=<?php echo $url_title; ?>&amp;via=@@@@@@" class="tw_share" target="blank"><i class="fa fa-twitter fa-fw"></i>Twitterでシェア</a>
        </li>
        <li>
            <a href="http://b.hatena.ne.jp/add?mode=confirm&amp;url=<?php the_permalink() ?>&amp;title=<?php echo $url_title; ?>" class="hatena_share" target="_blank">はてなブックマーク</a>
        </li>
        <li>
            <a href="http://line.me/R/msg/text/?<?php echo $url_title; ?>%0D%0A<?php the_permalink(); ?>" class="line_share" target="_blank">LINEで送る</a>
        </li>
    </ul>
</div>

.share_box {overflow: hidden;}
.share_box ul {list-style-type: none;width:100%;}
.share_box ul li {float: left;margin-right: 2px;width: 33%;}
.share_box ul li a{height: 30px; text-align: center;padding: 20px 0;color: #fff;text-decoration: none;font-size:20px;margin: 0 0 1em;}
.fb_share {background: #3b5998;display: block;}
.tw_share {background: #00acee;display: block;}
.hatena_share {background: #008fde;display: block;}
.line_share{background: #25af00;display:none;}
@media screen and (max-width:640px) {
    .share_box ul li {width: 49%;margin:0 1px;}
    .share_box ul li a{margin: 0 0 12px;}
    .line_share{display: block;}
}

ツイッターをシェアするHTML部の @@@@@@ はご自分のツイッターIDに変更してください。

ツイッターとFacebookの共有ボタン名にWebフォントを使用しています。別途 Font Awesome をセットアップしてください。

LINEシェアボタンはブラウザの表示幅が640px以下の場合のみ表示されるようにしています。常時表示したり、そもそもLINEボタンが必要ない場合は CSSの “@media screen and (max-width:640px)" 部分を編集してください。

おわりに

サンプルコードは現在当ブログで使用しているコードから抜き出したものなので、過不足あるかも知れません。

もし不明点などありましたら、ブログコメント欄かツイッター @hideto までお問い合わせください。