・クリックしたらTwitterなどのSNSでシェアしたいけど、どう設置したらいいの？
こんな疑問にお答えします。
案件ではリンクをクリックしたら、このサイトをSNSでシェアできるようにしてくれという仕様がたびたびあります。
やり方は簡単で、URLにシェア用のリンクを埋め込むだけ。
やり方が分かればばすぐできるよ
ということで、この記事では「SNSシェアボタンの設置方法」について解説していきます！
・SNSシェアボタンのHTMLコード
・SNSシェアボタンのURLに使うパラメーター
目次
【HTML】SNSシェアボタンのURL設置方法【解説】
TwitterやLINEなど色んなSNSがありますが、それぞれリンクの設定方法だったり、つけるパラメーターが違ったりします。
今回は有名どころのSNSの設置方法を解説してきます。
- LINE
- Feedly
- ピンタレスト
- はてなブックマーク
順にみていきましょう。
<a href="https://twitter.com/share?url={URL}" rel="nofollow noopener" target="_blank">SNSシェアボタン</a>｛URL｝のところにシェアしたいリンクを貼ります。
挙動例はこちら↓
ちなみにTwitterのシェアリンクには多数のパラメーターをつけることができます。
| url | ツイート時にシェアするリンクURL |
| text | ツイート時にデフォルトで設定されるテキスト |
| hashtags | ツイート時につけるハッシュタグでカンマで複数指定可 |
| via | ツイート時に「＠さんから」と表示できる設定 |
| related | ツイート後にフォローを促すアカウントの項目 |
それぞれのパラメーターを設定したコードがこちら↓
<a
href="https://twitter.com/share?
url={URL}&
text={テキスト}&
hashtags={ハッシュタグ},{ハッシュタグ2}&
via={TwitterのID}&
related={TwitterのID}"
rel="nofollow noopener"
target="_blank"
>
SNSシェアボタン
</a>&をつけることで複数設定することができます。
注意点は{ハッシュタグ}の部分に「#」は記載しなくてよいこと。そして{TwitterのID}の部分に「@」を記載しなくてよいことです。
挙動例はこちら
TwitterのSNSシェアボタンにてパラメーターをつけるときの注意点があります。
それはパラメータの指定した順番に関係なく、text→url→hashtags→viaの順番で文言が作られること。
つまり「ハッシュタグのあと一番下にURLをつけたい」と思っても、仕様上することができません。
このせいで最初めちゃくちゃ悩んだ。。
URLの下にハッシュタグがでてしまう。。
が、対策はあるので大丈夫！
順番を変えたい方の対策としては
「text」のところに、ハッシュタグやURLを記載することです。
これなら自分の好きな順番で指定することが可能。
といってもその場合も、ハッシュタグ記号の#や、リプライ記号の＠はしっかり記述しましょう！
<a href="http://www.facebook.com/share.php?u={URL}" rel="nofollow noopener" target="_blank">SNSシェアボタン</a>｛URL｝のところにシェアしたいリンクを貼ります。
挙動例はこちら↓
下記サイトにて、手順通りに行いURLを作成して埋め込む。
https://developers.facebook.com/docs/plugins/share-button/
<a href="https://social-plugins.line.me/lineit/share?url={URL}" rel="nofollow noopener" target="_blank">SNSシェアボタン</a>｛URL｝のところにシェアしたいリンクを貼ります。
挙動例はこちら↓
<a href="http://getpocket.com/edit?url={URL}&title={タイトル}" rel="nofollow noopener" target="_blank">SNSシェアボタン</a>｛URL｝のところにシェアしたいリンクを貼ります。
｛タイトル｝の所にシェアしたいタイトル名を記述します。
挙動例はこちら↓
Feedlyはシェアボタンというより、RSSリーダーサービス。{URL}はフィードのURLを指定するのが注意点です。
<a href="http://cloud.feedly.com/#subscription/feed/{URL}" rel="nofollow noopener" target="_blank">SNSシェアボタン</a>｛URL｝のところにシェアしたいリンクを貼ります。
下記URLにてボタンを作成してHTMLに埋め込みます。
https://www.feedly.com/factory.html
<a href="//www.pinterest.com/pin/create/button/?url={URL}&media={画像のURL}" rel="nofollow noopener" target="_blank">SNSシェアボタン</a>｛URL｝のところにシェアしたいリンクを貼ります。
｛画像のURL｝のところにシェアしたいアイキャッチ画像などを設定します。
挙動例はこちら↓
<a href="http://b.hatena.ne.jp/add?mode=confirm&url={URL}&title={タイトル}" rel="nofollow noopener" target="_blank">SNSシェアボタン</a>｛URL｝のところにシェアしたいリンクを貼ります。
｛タイトル｝の所にシェアしたいタイトル名を記述します。
挙動例はこちら↓
【HTML】SNSシェアボタンのURL設置方法【解説】
- それぞれ指定のURLにパラメーターをつけてシェアする
- 公式サイトのプラグインを使う場合もある
SNSシェアボタンはよく使うので覚えておこう！
