Facebook や Twitter などの SNS ボタンをオリジナルの画像やテキストで実装する方法

Last update 
/ Posted by Takumi Hirashima

Facebook や Twitter などの SNS ボタンをオリジナルの画像やテキストで実装する方法を紹介します。
HTML で実装する方法と合わせて、WordPress でも実装できるようにコードを併記して紹介しています。場合によっては通常のボタンよりも読み込み速度の向上につながる方法ですが、各サービスのシステム更新によっては満足いく結果を得られない場合もあります。常に最新の情報を得られるようにしましょう。

  1. Facebook いいね!ボタン
  2. Twitter ツイートボタン
  3. Google+ ボタン
  4. はてなブックマークボタン
  5. Pocket ボタン
  6. Pinterest ボタン
  7. feedly ボタン

Facebook いいね!ボタン

Facebook のいいねボタンを別ウィンドウで開いて表示する方法です。別ウィンドウで開く必要がなければ、onclick 以降を削除してご利用ください。
HTML で実装する場合は、次のコードをボタンを表示したい位置に追加してください。
通常のボタンの設置方法はFacebook ボタンを確認ください。

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

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

<a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;">Facebook</a>

Facebook の場合は JavaScript SDK を追加する必要があります。掲載位置はタグの開始の直後に含めることが理想的です。
次のコードは、Facebook にログインしていない状態で表示されるコードになりますが、定期的にコードが更新されているので場合によっては最新のコードを取得して追加してください。
オフィシャルのFacebookアカウンントがある場合は、一度ログインした状態でFacebook いいねボタンへアクセスして、コードを取得し直すことをお勧めします。

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.8";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Twitter ツイートボタン

Twitter のツイートボタンを別ウィンドウで開いて表示する方法です。別ウィンドウで開く必要がなければ、onclick 以降を削除してご利用ください。
HTML で実装する場合は、次のコードをボタンを表示したい位置に追加してください。
通常のボタンの設置方法はTwitter ボタンを確認ください。

<a href="http://twitter.com/share?text=【ツイート文(日本語が含まれる場合にはURLエンコードが必要)】&url=【共有するURL】&hashtags=【ハッシュタグ(複数あるときはカンマ区切り)】" onClick="window.open(encodeURI(decodeURI(this.href)), 'tweetwindow', 'width=650, height=470, personalbar=0, toolbar=0, scrollbars=1, sizable=1'); return false;" rel="nofollow">ツイート</a>

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

<a href="http://twitter.com/share?text=<?php echo urlencode(the_title_attribute('echo=0')); ?>&url=<?php the_permalink(); ?>&hashtags=【ハッシュタグ(複数あるときはカンマ区切り)】" onClick="window.open(encodeURI(decodeURI(this.href)), 'tweetwindow', 'width=650, height=470, personalbar=0, toolbar=0, scrollbars=1, sizable=1'); return false;" rel="nofollow">Twitter</a>

Google+ ボタン

Google+ +1ボタンを別ウィンドウで開いて表示する方法です。別ウィンドウで開く必要がなければ、onclick 以降を削除してご利用ください。
HTML で実装する場合は、次のコードをボタンを表示したい位置に追加してください。
通常のボタンの設置方法はGoogle+ ボタンを確認ください。

<a href="https://plus.google.com/share?url=【共有するURL】" onClick="window.open(encodeURI(decodeURI(this.href)), 'googlewindow', 'width=650, height=470, personalbar=0, toolbar=0, scrollbars=1, sizable=1'); return false;" rel="nofollow">Google+</a>

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

<a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" onClick="window.open(encodeURI(decodeURI(this.href)), 'googlewindow', 'width=650, height=470, personalbar=0, toolbar=0, scrollbars=1, sizable=1'); return false;" rel="nofollow">Google+</a>

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

はてなブックマークボタンを別ウィンドウで開いて表示する方法です。別ウィンドウで開く必要がなければ、onclick 以降を削除してご利用ください。
HTML で実装する場合は、次のコードをボタンを表示したい位置に追加してください。
通常のボタンの設置方法ははてなブックマークボタンを確認ください。

<a href="http://b.hatena.ne.jp/add?mode=confirm&url=【共有するURL】" onClick="window.open(encodeURI(decodeURI(this.href)), 'hatenawindow', 'width=650, height=470, personalbar=0, toolbar=0, scrollbars=1, sizable=1'); return false;" rel="nofollow">はてなブックマーク</a>

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

<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>" onClick="window.open(encodeURI(decodeURI(this.href)), 'hatenawindow', 'width=650, height=470, personalbar=0, toolbar=0, scrollbars=1, sizable=1'); return false;" rel="nofollow">はてなブックマーク</a>

Pocket ボタン

Pocket ボタンを別ウィンドウで開いて表示する方法です。別ウィンドウで開く必要がなければ、onclick 以降を削除してご利用ください。
HTML で実装する場合は、次のコードをボタンを表示したい位置に追加してください。
通常のボタンの設置方法はPocket ボタンを確認ください。

<a href="http://getpocket.com/edit?url=【共有するURL】" onClick="window.open(encodeURI(decodeURI(this.href)), 'pocketwindow', 'width=650, height=470, personalbar=0, toolbar=0, scrollbars=1, sizable=1'); return false;" rel="nofollow">Pocket</a>

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

<a href="http://getpocket.com/edit?url=<?php the_permalink(); ?>" onClick="window.open(encodeURI(decodeURI(this.href)), 'pocketwindow', 'width=650, height=470, personalbar=0, toolbar=0, scrollbars=1, sizable=1'); return false;" rel="nofollow">Pocket</a>

Pinterest ボタン

Pinterest ボタンを別ウィンドウで開いて表示する方法です。別ウィンドウで開く必要がなければ、onclick 以降を削除してご利用ください。
ボタンの実装には pinit.js を読み込む必要があります。

<script type="text/javascript” async defer src="//assets.pinterest.com/js/pinit.js"></script>

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

<a href="http://pinterest.com/pin/create/button/?url=【ページURL】&media=【画像URL】&description=【タイトルまたは説明】" onClick="window.open(encodeURI(decodeURI(this.href)), 'pocketwindow', 'width=650, height=470, personalbar=0, toolbar=0, scrollbars=1, sizable=1'); return false;" rel="nofollow"> pinterest</a>

WordPress で実装する場合は、次のコードを詳細ページでボタンを表示したい位置に追加してください。必ずシェアさせたい画像のURLを指定してください。

<a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=【画像URL】&description=<?php echo get_the_title(); ?>" onClick="window.open(encodeURI(decodeURI(this.href)), 'pocketwindow', 'width=650, height=470, personalbar=0, toolbar=0, scrollbars=1, sizable=1'); return false;" rel="nofollow"> pinterest</a>

アイキャッチ画像をシェア画像として選択する場合は、次のコードを追加してください。画像がない場合はボタンを表示されません。
アイキャッチ画像の詳しい設定方法はWordPress アイキャッチ画像の出力とカスタマイズ方法の紹介を御覧ください。

<?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 href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php echo $image[0]; ?>&description=<?php echo get_the_title(); ?>" onClick="window.open(encodeURI(decodeURI(this.href)), 'pinwindow', 'width=650, height=470, personalbar=0, toolbar=0, scrollbars=1, sizable=1'); return false;" rel="nofollow">Pinterest</a>
<?php endif; ?>

feedly ボタン

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

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

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 ?>

まとめ

Facebook や Twitter などの SNS ボタンをオリジナルの画像やテキストで実装する方法を紹介しました。
WordPress で実装する場合、アーカイブの一覧ページでは URL の取得方法がことなるので気をつけて下さい。
冒頭でも言いましたが、各サービスは日々更新されています。そのため常に最新の情報を得られるようにしましょう。

私が続けて読みたい関連記事

スポンサーリンク