このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

オリジナルデザインのソーシャルボタンを設置する

May 1st,2016
ウェブサイトの記事をソーシャルネットワークサービス(SNS)やソーシャルブックマークなどでシェア、共有してもらうためのソーシャルボタン。そのソーシャルボタンをオリジナルのデザインにする方法を紹介。

ソーシャルボタン

“ソーシャルボタン”とは?

ソーシャルボタン”はニュースサイトやブログなどでよく見られる、閲覧しているウェブサイトの記事や情報などをソーシャルネットワークサービス(SNS)やソーシャルブックマークなどで共有するための機能を持ったボタンです。

Facebookやtwitter、はてなブックマークなど代表的なサービスはそれぞれ公式のシェアボタンを提供しています。

オリジナルのソーシャルボタンのメリット

公式のソーシャルボタンは簡単に設置できてとても便利ですが、いくつかデメリットもあります。オリジナルの画像を用意してソーシャルボタンとして使用することでそういったデメリットを解消することができます。

  • ウェブサイトのデザインに合ったデザインにできる。
    公式のソーシャルボタンはそれぞれサイズが微妙に違ったり、複数配置した時に配置した時に微妙にずれたりします。オリジナルのデザインにすることでウェブサイトになじむデザインにすることができます。
  • 読み込み速度を速くできる。
    公式のソーシャルボタンはJavaScriptの読み込みが必要な場合が多く、ページの表示速度が遅くなる原因になりますが、Javascriptを使用しないオリジナルのデザインにすることで改善することができます。

オリジナルのソーシャルボタンのコード

Facebook

Facebookで記事をシェアしてもらうためのボタンです。

<a href="https://www.facebook.com/share.php?u=記事のURL(“http://”含む)" rel="nofollow" target="_blank">Facebookでシェア</a>

twitter

twitterで記事のことをツイートしてもらうためのボタンです。

<a href="https://twitter.com/share?url=記事のURL(“http://”含む)" rel="nofollow" target="_blank">ツイートする</a>

TwitterでツイートしてもらいたいURLにパラメータを使用するとTwitterのアカウントやハッシュタグなどツイートに様々な情報を追加することができます。

属性値 説明
url ツイートに含めたいページのURL(“http://”含む)を記述します。
text ツイートに含めたいテキストを記述します。
via ツイートに含めたいtwitterアカウント(“@”を除く)を記述します。「@****さんから」という形で表示されます。
related ツイートした後に関連したtwitterアカウント(“@”を除く)として表示したいものがあればを記述します。
hashtags ツイートに含めたいハッシュタグ(“#”を除く)を記述します。カンマ(“,”)で区切ることで複数記述できます。

パラメータはアンパサンド(“&”)で区切って記述します。

<a href="https://twitter.com/share?
url=記事のURL
&text=ツイートさせるテキスト
&via=twitterアカウント
&related=関連するtwitterアカウント
&hashtags=ハッシュタグ
"
rel="nofollow" target="_blank">ツイートする</a>

google+

Google+で記事をシェアしてもらうためのボタンです。

<a href="https://plus.google.com/share?url=記事のURL(“http://”含む)" rel="nofollow" target="_blank">Google+でシェア</a>

LINE

LINEで記事をシェアしてもらうためのボタンです。

<a href="https://timeline.line.me/social-plugin/share?url=記事のURL(“http://”含む)">LINEで送る</a>

LINEのソーシャルボタンは公式に提供されている画像か「LINEで送る」「LINE」のテキストのみ使用が許可されています。

はてなブックマーク

記事をはてなブックマークにブックマークしてもらうためのボタンです。

はてなブックマークはあとで読みたいコンテンツをブックマークしておけるサービスです。

<a href="http://b.hatena.ne.jp/add?mode=confirm&url=記事のURL(“http://”含む)&title=記事のタイトル" rel="nofollow" target="_blank">はてなブックマーク</a>

Pocket

記事をPocketのクリップボードにクリップしてもらうためのボタンです。

Pocketはあとで読みたいコンテンツをクリップしておけるサービスです。

<a href="https://getpocket.com/edit?url=記事のURL(“http://”含む)&title=記事のタイトル" rel="nofollow" target="_blank">Pocket</a>
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク