オリジナルのSNSシェアボタンをつくろう。HTMLで実装してみた。
サイトやブログで見かけるSNSシェアボタン。
読んでくれた人が記事を気に入ってくれたら、ボタンを押すだけで記事がシェアできるカンタン便利機能です。
SNS各社公式サイトでは埋め込み用コードが用意されておりますが、ずっしり重いのが不満。
今回はhtmlのaタグでリンクを飛ばします。超軽量。
シェアされた数を表示させるなどしたい場合には、公式の埋め込みコードをご利用ください。
<a href="http://www.facebook.com/share.php?u=「シェアしたいURL」&t=「タイトル」" target="_blank"></a>設定したogpはここで確認できます。
書き換えたとき。FBはキャッシュが強い・・ので、「Open Graphオブジェクトデバッガー」でキャッシュをクリア。最新データを反映させます。
<a href="https://twitter.com/share?url=「シェアしたいURL」" target="_blank" rel="nofollow">
</a>href属性にURLのクエリ文字列を指定。クエリ文字列部分、URLはエンコードします。メンションなども入れたい場合は👇
<a href="http://twitter.com/share
?url=シェアしたいURL（エンコードしてね）
&text=シェアしたいURLの説明テキスト
&via=ユーザー名（ツイッターアカウント）">
</a>Google +（2019年4月2日サービス終了）
<a href="https://plus.google.com/share?url=「シェアしたいURL」">
</a>はてなブックマーク
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=「シェアしたいURL」" target="_blank" rel="nofollow">
</a><a href="http://getpocket.com/edit?url=「シェアしたいURL」&title=「タイトル」" target="_blank" rel="nofollow">
</a>LINE
<a href="http://line.me/R/msg/text/?「シェアしたいURL」">
</a>noteで書くボタン ※2019/8追記
<a href="https://note.mu/intent/post?url=「シェアしたいURL」" target="_blank" rel="noopener">
</a>ボタンと同じくらい大事なmetaとogp
シェアボタンを実装するとサイトにクローラーがやって来て、head内のmetaタグやogp（Open Graph Protocol）を読みます。metaやogpを上手に設定することがとっても大事。
検索結果に表示されることもあるmetaは、サイトの内容が上手に説明できているとクリックされやすくなるかも。
ボタンのロゴについて
シェアボタンはサービス各社のAPIを利用しています。ロゴ・文言などについては各社のガイドラインに従いましょう。
SHARE
New Posts
