Facebook などSNSシェアボタンをオリジナルの画像やテキストで設置する方法

最終更新日 - 公開日 2015.12.11

by Takumi Hirashima

Facebook などのSNSシェアボタンをオリジナルの画像やテキストで設置する方法を紹介します。
例えば、サイトのデザインに合わせてシェアボタンを設置したい時に便利な方法です。
HTML で静的に設置する方法と合わせて WordPress で動的に設置する方法を紹介します。

  1. Facebook シェアボタン
  2. Twitter ツイートボタン
  3. Twitter フォローボタン
  4. LINE で送るボタン
  5. Google+ ボタン（サービス終了）
  6. はてなブックマークボタン
  7. Pocket ボタン
  8. Pinterest ボタン
  9. feedly ボタン
  10. Mastodon ボタン
  11. サイズ指定の別ウィンドウで表示する場合

Facebook シェアボタン

Facebook のシェアボタンをオリジナル画像やテキストで設置する方法を紹介します。

HTML で設置する場合

HTML で設置する場合は、ボタンを表示したい位置に次のコードを追加してください。
通常のボタンの設置方法はFacebook ボタンを確認ください。

<a href="http://www.facebook.com/share.php?u=【共有するURL】" >Facebook</a>

WordPress で設置する場合

WordPress の場合は投稿のループ内に次のコードを追加してください。

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

Twitter ツイートボタン

Twitter のツイートボタンをオリジナル画像やテキストで設置する方法を紹介します。

HTML で設置する場合

HTML で設置する場合は、ボタンを表示したい位置に次のコードを追加してください。
通常のボタンの設置方法はTwitter ボタンを確認ください。

<a href="http://twitter.com/share?text=【ツイート文（日本語が含まれる場合にはURLエンコードが必要）】&url=【共有するURL】&hashtags=【ハッシュタグ（複数あるときはカンマ区切り）】" rel="nofollow">ツイート</a>

WordPress で設置する場合

WordPress の場合は投稿のループ内に次のコードを追加してください。

<a href="http://twitter.com/share?text=<?php echo urlencode(the_title_attribute('echo=0')); ?>&url=<?php the_permalink(); ?>&hashtags=【ハッシュタグ（複数あるときはカンマ区切り）】" rel="nofollow">Twitter</a>

Twitter フォローボタン

Twitter のフォローボタンをオリジナル画像やテキストで設置する方法を紹介します。

HTML（WordPress共通） で設置する場合

HTML（WordPress共通）で設置する場合は、ボタンを表示したい位置に次のコードを追加してください。
通常のボタンの設置方法はTwitter ボタンを確認ください。

<a href="https://twitter.com/intent/follow?screen_name=【フォローしたいユーザー名）】" rel="nofollow">フォロー</a>

LINE で送るボタン

LINE で送るボタンをオリジナル画像やテキストで設置する方法を紹介します。
※LINEで送るボタンの設置方法を2019年3月6日に更新しました。
※LINEで送るボタンの設置方法を2020年10月3日に更新しました。

HTML で設置する場合

HTML で設置する場合は、ボタンを表示したい位置に次のコードを追加してください。
通常のボタンの設置方法はLINE で送るボタン設置方法を確認ください。

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

WordPress で設置する場合

WordPress の場合は投稿のループ内に次のコードを追加してください。

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

※PCサイトに設置する場合は、正規のボタンを設置しないと動かない場合があります、ご注意ください。

Google+ ボタン（サービス終了）

Google+ +1ボタンをオリジナル画像やテキストで設置する方法を紹介します。
※コンシューマー向けの Google＋ は2019年8月末でサービス終了がアナウンスされました。詳細は Google の関連サイトをご覧ください。

HTML で設置する場合

HTML で設置する場合は、ボタンを表示したい位置に次のコードを追加してください。
通常のボタンの設置方法はGoogle+ ボタンを確認ください。

<a href="https://plus.google.com/share?url=【共有するURL】" rel="nofollow">Google+</a>

WordPress で設置する場合

WordPress の場合は投稿のループ内に次のコードを追加してください。

<a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" rel="nofollow">Google+</a>

はてなブックマークボタン

はてなブックマークボタンをオリジナル画像やテキストで設置する方法を紹介します。

HTML で設置する場合

HTML で設置する場合は、ボタンを表示したい位置に次のコードを追加してください。
通常のボタンの設置方法ははてなブックマークボタンを確認ください。

<a href="http://b.hatena.ne.jp/add?mode=confirm&url=【共有するURL】" rel="nofollow">はてなブックマーク</a>

WordPress で設置する場合

WordPress の場合は投稿のループ内に次のコードを追加してください。

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

Pocket ボタン

Pocket ボタンをオリジナル画像やテキストで設置する方法を紹介します。

HTML で設置する場合

HTML で設置する場合は、ボタンを表示したい位置に次のコードを追加してください。
通常のボタンの設置方法はPocket ボタンを確認ください。

<a href="http://getpocket.com/edit?url=【共有するURL】" rel="nofollow">Pocket</a>

WordPress で設置する場合

WordPress の場合は投稿のループ内に次のコードを追加してください。

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

Pinterest ボタン

Pinterest ボタンをオリジナル画像やテキストで設置する方法を紹介します。
ボタンの設置に合わせて pinit.js を読み込む必要があります、ご注意ください。

HTML で設置する場合

HTML で設置する場合は、ボタンを表示したい位置に次のコードを追加してください。
通常のボタンの設置方法はウィジェットビルダーを御覧ください。

<a data-pin-do="buttonPin" data-pin-count="above" data-pin-custom="true" data-pin-save="false" href="https://www.pinterest.com/pin/create/button/?url=【ページURL】&media=【画像URL】&description=【タイトルまたは説明】">pinterest</a>

ボタンのコードを設置したら、pinit.js を読み込みます。
各ページの BODY の閉じタグ（</BODY>）のすぐ前に、次のコードを追加してください。

<script async defer src="//assets.pinterest.com/js/pinit.js"></script>

WordPress で設置する場合

WordPress の場合は投稿のループ内に次のコードを追加してください。
設置の際は必ずシェアさせたい画像のURLを指定してください。

<a data-pin-do="buttonPin" data-pin-count="above" data-pin-custom="true" data-pin-save="false" href="https://www.pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=【画像URL】&description=<?php echo get_the_title(); ?>">pinterest</a>

こちらも同様に pinit.js を読み込みます。

アイキャッチ画像を設定する場合

アイキャッチ画像をシェア画像として選択する場合は、次のコードを追加してください。

<?php if ( has_post_thumbnail()):?>

<?php

$thumbnail_id = get_post_thumbnail_id($post->ID); //アタッチメントIDの取得

$image = wp_get_attachment_image_src( $thumbnail_id, 'full' ); //「full」サイズのアイキャッチの情報を取得

?>

<a data-pin-do="buttonPin" data-pin-count="above" data-pin-custom="true" data-pin-save="false" href="https://www.pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php echo $image[0]; ?>&description=<?php echo get_the_title(); ?>">pinterest</a>

<?php endif; ?>

画像がない場合はボタンは表示されません。
アイキャッチ画像の詳しい設定方法はWordPress アイキャッチ画像の出力とカスタマイズ方法の紹介を御覧ください。

feedly ボタン

feedly ボタンをオリジナル画像やテキストで設置する方法を紹介します。

HTML で設置する場合

HTML で設置する場合は、ボタンを表示したい位置に次のコードを追加してください。
通常のボタンの設置方法はfeedly ボタンを確認ください。

<a href="http://cloud.feedly.com/#subscription/feed/【フィードURL】" target='blank'>feedly</a>

WordPress で設置する場合

WordPress で設置する場合は、次のコードをボタンを表示したい位置に追加してください。

<a href="http://cloud.feedly.com/#subscription/feed/<?php bloginfo('rss2_url'); ?>" target='blank'>feedly</a>

WordPress のフィードについて

WordPress でフィード URL を取得する場合は bloginfo を使用します。RSS 2.0 フィード以外のURLを取得したい場合は、次のコードを参照してください。

<?php bloginfo('rdf_url'); // RDF/RSS 1.0 フィード URL ?>

<?php bloginfo('rss_url'); // RSS 0.92 フィード URL ?>

<?php bloginfo('rss2_url'); // RSS 2.0 フィード URL ?>

<?php bloginfo('atom_url'); // Atom フィード URL ?>

<?php bloginfo('comments_rss2_url'); // コメント RSS 2.0 フィード URL ?>

Mastodon ボタン

マストドンにはシェアボタンを設置する機能がないため、有志の方が制作された、Mastoshareや、本来の主旨とは変わってしまいますが、Mastodon と Twitter に同時投稿できる Chrome の拡張機能「Tooter」などがあります。
マストドンは運営形式が特殊なため、シェアの形式には注意が必要です。

サイズ指定の別ウィンドウで表示する場合

シェアウィンドウを別ウィンドウで表示したい場合は JavaScript の onclick イベントを使用します。
例えば、Facebookのシェアウィンドウをサイズ指定の別ウィンドウで表示する場合、次のコードを追加します。

<a href="http://www.facebook.com/share.php?u=【共有するURL】" onclick="window.open(this.href, 'window', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;">Facebook</a>

追加するコードは次の通りです。

onclick="window.open(this.href, 'window', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"

サイズを変更する場合は width と height の値を変更してください。

まとめ

Facebook などのシェアボタンをオリジナルの画像やテキストで設置する方法を紹介しました。
WordPress で設置する場合アーカイブ一覧ページでは URL の取得方法がことなるので、一覧ページなどでの設置には気をつけて下さい。
ご紹介した方法は、通常のボタンよりも読み込み速度の向上につながる場合がありますが、各サービスのシステム更新によっては満足いく結果を得られない場合もあります。
常に各サービスの最新の情報をチェックするようにしましょう。
その他に Facebook や Twitter などの SNS サイトのキーカラー一覧はこちらをご覧ください。