BLOG

SNSシェアボタンをオリジナルで設置する

| HTML / CSS

今回はSNSのシェアボタンの設置方法です。

設置するSNSのシェアボタンは、Twitter、Facebook、LINEが最近はおおいので
それらについて書いていきやす。

Facebook シェアボタン

公式

シェアボタン – ソーシャルプラグイン – ドキュメンテーション – Facebook for Developers

手なわけで自分の好きなようにできるかたちですね。

オリジナル

<a href="http://www.facebook.com/share.php?u=URL">シェア</a>
  • URLにアドレス

Twitter ツイートボタン

公式

Twitter Publish

オリジナル

<a href="https://twitter.com/share?url=URL&text=本文&hashtags=ハッシュタグ">ツイートする</a>
  • URLにアドレス
  • 本文に本文
  • ハッシュタグにハッシュタグ(複数の場合は(,)カンマ区切り

LINE 送るボタン

公式

LINE Social Plugins

オリジナル

<a href="https://social-plugins.line.me/lineit/share?url=URL">LINEで送る</a>
  • URLにアドレス

Pocket

公式

Pocket for Publishers: Pocket Button

オリジナル

<a href="http://getpocket.com/edit?url=URL&title=本文" rel="nofollow noopener" target="_blank">Pocket</a>
  • URLにアドレス
  • 本文に本文

はてなブックマーク

公式

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

オリジナル

<a href="http://b.hatena.ne.jp/add?mode=confirm&url=URL&title=本文" target="_blank" rel="nofollow noopener">はてブ</a>

公式のボタンを使えば多分仕様とかの変更にも対応できたりするんだろうと思うんですが、統一性の問題があるので何かしら、いじらないとってイメージです。
僕はオリジナルつかってFontAwesomeとかのアイコンつかえるのが楽で良いですね。
(FontAwesomeのLINEのはなんか周りに白がでてめんどうでしたw)

PAGE TOP