BLOG

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

| ライフ

今回は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

オリジナル

LINEで送る

  • 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)

RECENT POSTS

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

CSSでマスクする

クリッカブルマップのレスポンシブ対応ができる「image-map-resizer」が優秀らしい

我が家の植物たち

カスタムフィールドを含む複数の条件でソートをする【WordPress】

脱jQuery!$.ajax使わない書き方

検索用のフォームを設置する【wordpress】

docker-composeをつかってWEBサーバーをたてる

カスタムフィールドを検索範囲にいれる【ACF】

WordPressに大量に投稿をインポートする【CSV】

CATEGORY

POPULAR POSTS

PAGE TOP