ゆめぴょんの知恵ゆめぴょんの知恵
サイト制作、WordPressカスタマイズ、無料アプリ紹介など。海外旅行135ヶ国。知識を知恵にするブログ!

保存版!SNSソーシャルボタン設置コード一覧まとめ!コピペでOK

犬もFacebookでいいね

記事にソーシャルボタンを設置することは、もはや必須になりつつあります。良い記事はどんどんシェアされます。このブログでもボタンの様々なカスタマイズ方法を共有しました。今回はそれら設置コードをまとめました。

今回まとめたコードは、ツイッター/Twitter、Facebook、Google+、はてブ(はてなブックマーク)、Pocketの5つのソーシャルメディアのボタンです。日本国内ではこの5つが現在の主なシェア先になっています。Pocketはシェアではありませんが。

ゆめぴょん(@yume_pyon)です。こんちはっ!

以前も縦型のコードについては一覧の記事にしましたが、少しわかりにくい部分や、その後に追加した部分などもあるため、新しい記事として公開します。今回は横型コードも掲載します。

WordPressでブログを作成してる場合は、プラグインで簡単にソーシャルボタンを設置できます。プラグインなしでも難しくないです。下の記事を参考にしてください。

WP Social Bookmarking Lightは複数ソーシャルボタン設置のWordPressプラグインWP Social Bookmarking Lightは複数ソーシャルボタン設置のWordPressプラグイン

あなたは新しいブログ記事の更新をどうやって知らせますか。今回は「WP Socia…

コピペでOK!ソーシャルボタン設置と追尾方法。プラグイン不要コピペでOK!ソーシャルボタン設置と追尾方法。プラグイン不要

ブログ・サイトにソーシャルボタンを自力で設置する方法です。いま流行りのスクロール…

また、オリジナルのSNSボタンの設定方法については、下記事もどうぞ!

【WordPress】オリジナルSNSボタン設置方法!スマホ用シェア数つきSNSアイコンも公開【WordPress】オリジナルSNSボタン設置方法!スマホ用シェア数つきSNSアイコンも公開87 shares

このブログではオリジナルのソーシャルボタンを設置して、サイト表示速度を高速化し、…

ソーシャルボタン設置コードの注意点

今回の記事で掲載する設置コードは、「スクリプト部分」(JavaScript)と「表示部分」を分けています。

もし同じソーシャルボタンをページ内に複数設置する場合は、各「スクリプト部分」は1度だけ記述すればいいです。その方が読込み時間も短縮できて、表示速度の高速化もはかれます。「表示部分」は設置数だけ配置してください。

「スクリプト部分」の設置場所は、5種類のソーシャルボタンとも、</body>タグの直前がオススメです。もちろん<head>タグ内でもいいけど、前者の方がボタン以外の表示は速くなります。

さらなる高速化をめざしたい方は、5種類のソーシャルボタンのスクリプトを1つにまとめる方法も記事にしていますので、ぜひ参考に読んでみてください。

【Webサイト高速化】ソーシャルボタンを1つにまとめるコードを共有するよ【Webサイト高速化】ソーシャルボタンを1つにまとめるコードを共有するよ

記事の中に複数の同じソーシャルボタンを設置している場合、スクリプトをまとめること…

公式サイト一覧:ソーシャルメディアのボタン生成

  1. ツイッター:ツイート・フォローボタン(縦型は下で)、Twitterウィジェット
  2. Facebook:Like ButtonLike Box(Facebookページ用)
  3. Google+:+1 ボタンGoogle+バッジ
  4. はてなブックマーク:ボタンの作成旧ボタンの作成ブログパーツ
  5. Pocket:Pocket Button
  6. LINE:LINEで送るボタン
  7. mixi:mixi デベロッパーセンター

ソーシャルメディア関連のボタンを増やすと、表示速度が遅くなってしまいます。ボタンがもっさりと表示されるのを隠すために次のような設定もおすすめです。

【Web制作】ソーシャルボタン表示を高速化!描画後にフェードイン【Web制作】ソーシャルボタン表示を高速化!描画後にフェードイン

ブログの記事の上方に設置しているソーシャルボタンを描画後に表示(フェードイン)す…

ツイッター/Twitterの設置コード

スクリプトのコード

上でも書きましたが、配置場所はどこでもいいです。ページに1つしか配置しない場合は、ツイッターの設置コードの直後にくっつけて書いてもいいです。

表示部分のコード

ツイッター/Twitterボタン

カスタマイズ方法

「data-lang」の後などに次のコードを追加できます。「data-via」はツイッターアカウントを持ってる人は必須です。URL、タイトルは自動取得してくれるので希望する場合のみ。「data-related」も余裕があれば。

  • data-via=”*****”:ツイッターアカウント名を@なしで記入。「yume_pyon」など
  • data-count=”vertical”:縦型。公式サイトでは生成不可
  • data-url=”http://○○○.com/◆◆/”:開いてるページのURL。通常は不要
  • data-text=”記事のタイトルなど”:開いてるページのタイトル。通常は不要
  • data-related=”yume_pyon:ブログ術,yumepolo:旅行記”:記事シェア時に紹介

「data-related」は記事がシェアされた時に、アカウントの紹介文とフォローボタンが出てきます。複数アカウントを持っている場合は、「,」(カンマ)で区切れば続けて書くことが可能です。

フェイスブック/Facebookの設置コード

スクリプトのコード

設置場所は自由です。iflame版にはこのコードは不要です。Like-buttonもLike-boxも同じコードなので、FacebookとFacebookページの2つを設置する場合もスクリプトは1つだけでOKです。

「ja_JP」を「en_US」に変更すると「Like」表示になり「いいね」より短くできるらしい。iflame版は「locale=en_US」をつけるらしい。私はどちらも未確認です。

Like-Buttonの表示部分のコード

Facebook関連のボタンは、標準ではカウントなしにできないようです。

Like-Buttonのカスタマイズ方法

  • href=http%3A%2F%2F○○○.com:URLを必須入力。FacebookページURLも可能
  • width:横幅を指定できる
  • send=true:送信ボタンを付ける場合はtrue
  • layout=button_count:縦型(バルーン型)は「box_count」。横型は「button_count」
  • action=recommend:「いいね!」は「like」。「おすすめ!」は「recommend」
  • 英語表示「Like」などへの変更については、上のスクリプト欄を参照

Like-Boxの表示部分のコード

Facebookページのボックス

Like-Boxのカスタマイズ方法

  • href=http%3A%2F%2Fwww.facebook.com%2F●●●:FacebookページURLを必須入力
  • width:横幅は292が最小値
  • data-show-faces=”true”:顔ありは「true」
  • data-header=”true”:ヘッダ「Facebookもチェック」を付けるなら「true」
  • data-stream=”true”:ストリーム(投稿)を表示するなら「true」
  • data-show-border=”true”:枠線を表示するなら「true」
  • アイコン画像を表示したくない場合は、上のLike-buttonを利用すればよい

Google+/ググタスの設置コード

スクリプトのコード(非同期)

(2015.2.5追記)「plusone.js」を「platform.js」に変更

標準で非同期にも対応しているようです。

Google+ボタンの表示部分のコード

さすがのGoogle、コードもシンプルです!

Google+バッジの表示部分のコード

Google+バッジ

カスタマイズ方法

Google+ボタンのみに有効なカスタマイズです。バッジでは使えません。

  • URLの指定は不要
  • data-size=”medium”:横型ボタンの大きさ。小は「small」。中は「medium」
  • data-annotation=”none”:カウントなし
  • data-annotation=”inline”:インライン表示もできるが、あまり見かけない

はてブ(はてなブックマーク)の設置コード

スクリプトのコード

表示部分のコード

新バージョン

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

旧バージョン

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

カスタマイズ方法

  • button-only@2x.png:@は必ず半角に変更すること
  • http://b.hatena.ne.jp/entry/:の後にURLを指定した方が良い
  • data-hatena-bookmark-title=:の後にタイトルを指定できる。多くの場合で不要

WordPressの場合は下のように設定すればいいと思います。

Pocketの設置コード

Pocket簿tん

スクリプトのコード

表示部分のコード

カスタマイズ方法

  • data-save-url=”***.com/abc/”:保存するURLを記述。設定するのが望ましい

WordPressの場合は「data-save-url=”<?php the_permalink(); ?>”」と設定出来ます。

まとめ:今日のゆめぴょんの知恵

今回紹介した5種類のソーシャルボタンは、昨年くらいからほぼ定着している感じです。mixiが離脱して、Pocketが増えてきている気がします。スマホでは、LINEでのシェアが化ける可能性もありますね。

ツイッターやFacebookの次に何かが来るのか、数年は安泰なのかは誰もわからないと思います。もしかしたらソーシャルボタン以外のシェア方法が出てくるかもしれません。そうなっても迅速に対応したいです!

なおブログの更新通知の方法については次の記事も参考にしてください。

【WordPressまとめ】ブログ更新情報を速く伝えるための通知方法【WordPressまとめ】ブログ更新情報を速く伝えるための通知方法

ブログの更新情報を伝える機能には、RSSフィード、Ping送信、Pubsubhu…

次回の記事は「ウェブ制作に役立つチップ」の予定です(^^)。更新を見逃さないためにも、 feedlyの登録をおすすめします(^^)/

ゆめぴょん(@yume_pyon)でした。ばいちゃお! こてっZzz

«前記事:Google+1ボタンを押せない!Chromeの原因と解決方法SNSソーシャルメディアのシェアボタンが表示されない原因を解明:次記事»
ページ
↑先頭
ホーム