ソーシャルボタン
＃
“ソーシャルボタン”とは？
“ソーシャルボタン”はニュースサイトやブログなどでよく見られる、閲覧しているウェブサイトの記事や情報などをソーシャルネットワークサービス(SNS)やソーシャルブックマークなどで共有するための機能を持ったボタンです。
Facebookやtwitter、はてなブックマークなど代表的なサービスはそれぞれ公式のシェアボタンを提供しています。
＃
オリジナルのソーシャルボタンのメリット
公式のソーシャルボタンは簡単に設置できてとても便利ですが、いくつかデメリットもあります。オリジナルの画像を用意してソーシャルボタンとして使用することでそういったデメリットを解消することができます。
- ウェブサイトのデザインに合ったデザインにできる。
- 公式のソーシャルボタンはそれぞれサイズが微妙に違ったり、複数配置した時に配置した時に微妙にずれたりします。オリジナルのデザインにすることでウェブサイトになじむデザインにすることができます。
- 読み込み速度を速くできる。
- 公式のソーシャルボタンはJavaScriptの読み込みが必要な場合が多く、ページの表示速度が遅くなる原因になりますが、Javascriptを使用しないオリジナルのデザインにすることで改善することができます。
オリジナルのソーシャルボタンのコード
＃
Facebookで記事をシェアしてもらうためのボタンです。
<a href="https://www.facebook.com/share.php?u=〚“http://”を含む記事のURL〛" rel="nofollow" target="_blank">Facebookでシェア</a>
＃
twitterで記事のことをツイートしてもらうためのボタンです。
<a href="https://twitter.com/share?url=〚“http://”を含む記事のURL〛" rel="nofollow" target="_blank">ツイートする</a>
TwitterでツイートしてもらいたいURLにパラメータを使用するとTwitterのアカウントやハッシュタグなどツイートに様々な情報を追加することができます。
| 属性値 | 説明 |
|---|---|
| url | ツイートに含めたいページのURL(“http://”含む)を記述します。 |
| text | ツイートに含めたいテキストを記述します。 |
| via | ツイートに含めたいtwitterアカウント(“@”を除く)を記述します。「@****さんから」という形で表示されます。 |
| related | ツイートした後に関連したtwitterアカウント(“@”を除く)として表示したいものがあればを記述します。 |
| hashtags | ツイートに含めたいハッシュタグ(“#”を除く)を記述します。カンマ(“,”)で区切ることで複数記述できます。 |
パラメータはアンパサンド(“&”)で区切って記述します。
<a href="https://twitter.com/share?
url=〚“http://”を含む記事のURL〛
&text=〚ツイートさせるテキスト〛
&via=〚twitterアカウント〛
&related=〚関連するtwitterアカウント〛
&hashtags=〚ハッシュタグ〛"
rel="nofollow" target="_blank">ツイートする</a>
＃
LINE
LINEで記事をシェアしてもらうためのボタンです。
<a href="https://social-plugins.line.me/lineit/share?url=〚“http://”を含む記事のURL〛">LINEで送る</a>
＃
はてなブックマーク
記事をはてなブックマークにブックマークしてもらうためのボタンです。
はてなブックマークはあとで読みたいコンテンツをブックマークしておけるサービスです。
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=〚“http://”を含む記事のURL〛&title=〚記事のタイトル〛" rel="nofollow" target="_blank">はてなブックマーク</a>
＃
記事をPocketのクリップボードにクリップしてもらうためのボタンです。
Pocketはあとで読みたいコンテンツをクリップしておけるサービスです。
<a href="https://getpocket.com/edit?url=〚“http://”を含む記事のURL〛&title=〚記事のタイトル〛" rel="nofollow" target="_blank">Pocket</a>
