2021/3/8

2021/10/18

17297 views

ブログ記事には必ずといっていいほど設置されているSNSのシェアボタン。
今回は複雑なカスタマイズは無しに、シンプルにSNSシェアボタンをサイトに実装する方法を解説します。
ご紹介するSNSは、フェイスブック、ツイッター、POCKET、LINE、はてなブックマークになります。

各シェアボタンの設置方法

早速ですが、方法は以下の記述コードを参考ください。

フェイスブックのシェアボタン設置

フェイスブックのシェアボタンを実装するには下記のコードを記述します。

基本的な記述

<a href="http://www.facebook.com/share.php?u=【そのページのURL】" target="_blank">Facebook</a>

WordPressの場合

<a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>" target="_blank">Facebook</a>

 

ツイッターのシェアボタン設置

ツイッターのシェアボタンを実装するには下記のコードを記述します。

基本的な記述

<a href="http://twitter.com/share?text=【ツイートテキスト（※日本語をURLエンコードしたもの）】&url=【そのページのURL】" rel="nofollow">ツイート</a>

WordPressの場合

<a href="http://twitter.com/share?text=<?php echo urlencode(the_title_attribute('echo=0')); ?>&url=<?php the_permalink(); ?>" rel="nofollow" target="_blank">Twitter</a>

はてなブックマークのシェアボタン設置

はてなブックマークのシェアボタンを実装するには下記のコードを記述します。

基本的な記述

<a href="http://b.hatena.ne.jp/add?mode=confirm&url=【そのページのURL】" rel="nofollow" target="_blank">はてなブックマーク</a>

WordPressの場合

<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>" rel="nofollow" target="_blank">はてなブックマーク</a>

POCKETのシェアボタン設置

ポケットのシェアボタンを実装するには下記のコードを記述します。

基本的な記述

<a href="http://getpocket.com/edit?url=【そのページのURL】" rel="nofollow" target="_blank">Pocket</a>

WordPressの場合

<a href="http://getpocket.com/edit?url=<?php the_permalink(); ?>" rel="nofollow" target="_blank">Pocket</a>

LINEのシェアボタンの設置

LINEのシェアボタンを実装するには下記のコードを記述します。

基本的な記述

<a href="https://social-plugins.line.me/lineit/share?url=【エンコードしたURL】" target="_blank">LINE</a>

WordPressの場合

<a href="https://social-plugins.line.me/lineit/share?url=<?php echo urlencode(get_permalink()); ?>" target="_blank">LINE</a>

ボタンのテキストをCSSでデザインする

テキストをCSSでボタン風にコーディングする方法です。
下記のようにするサンプルコードです。

↓サンプルデザイン

 

HTML

<div class="snssharer">
<span class="facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>" target="_blank">Facebook</a></span>
<span class="twitter"><a href="http://twitter.com/share?text=<?php echo urlencode(the_title_attribute('echo=0')); ?>&url=<?php the_permalink(); ?>" rel="nofollow" target="_blank">Twitter</a></span>
<span class="hatena"><a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>" rel="nofollow" target="_blank">はてブ</a></span>
<span class="pocket"><a href="http://getpocket.com/edit?url=<?php the_permalink(); ?>" rel="nofollow" target="_blank">Pocket</a></span>
<span class="line"><a href="https://social-plugins.line.me/lineit/share?url=<?php echo urlencode(get_permalink()); ?>" target="_blank">LINE</a></span>
</div>

CSS

.snssharer {
    margin: 10px 0 20px 0;
}
.snssharer:after {
    content: "";
    clear: both;
    display: block;
    height: 0;
}
.snssharer span a {
    width: 19%;
    float: left;
    display: block;
    margin: 0 1% 0 0;
    border: solid 2px #333;
    border-radius: .4rem;
    padding: 1rem 2rem;
    text-align: center;
    font-weight: bold;
    font-size: 12px;
}
.snssharer .facebook a {
    color: #3c5a99;
    border-color: #3c5a99;
}
.snssharer .twitter a {
    color: #28aae1;
    border-color: #28aae1;
}
.snssharer .hatena a {
    color: #009fd7;
    border-color: #009fd7;
}
.snssharer .pocket a {
    color: #ed374d;
    border-color: #ed374d;
}
.snssharer .line a {
    color: #01ba01;
    border-color: #01ba01;
}

ボタンをオリジナルの画像をするには

ボタンをオリジナルの画像にしたい場合は、下記のようにコーディングします。

<a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>" target="_blank">
<img src="<?php echo get_template_directory_uri(); ?>/images/facebook.png" alt="Facebook">
</a>

インスタグラムのシェアボタンは？

あれ？

そういえば、SNSでも多大なユーザーを誇るインスタグラムのシェアボタンはいいの？
となりますよね。

現在のところ、インスタグラムについてはリンクシェアという機能がないため設置できないのです。

なので、今後シェア機能が導入されれば追記したいと思います。

まとめ

以上、SNSシェアボタンをオリジナルでシンプルに設置する方法の解説でした。
追々、アカウントを紐付けた方法も追記していきたいと思います。