ソーシャルボタンをブログやサイトに設置する方法

公開日: : 最終更新日:2014/08/14 google, Twitter, zenback, サイト制作, はてな

スポンサーリンク

TwitterやFacebookなどのソーシャルボタンを付ける方法です。ソーシャルボタンを付けるには個別にそのサービスのスクリプトなりのソースを取得して貼りつけていくか、一括で表示してくれるサービスを利用するかになります。

一括で表示するサービスを利用する

忍者おまとめボタン

social_ninjaomatome.jpg

これが一番簡単で管理もしやすいのでお勧めです。ほとんどのソーシャルボタンを網羅しており、そのボタンの形式やサイズなど豊富な候補からの選択式で表示方法に困らないだけでなく横並びか縦並びかやボタンの順番などのデザインも簡単に変更できます。しかもボタンのクリック状況などの解析ページも付いています。特に広告も付いていなくて無料なので正直これで事足りると思います。

↓実際に設置した例

『忍者おまとめボタン』:http://www.ninja.co.jp/omatome/

Zenback

social_zenback.jpg

Zenbackは関連記事やソーシャルボタンの設置できるブログパーツの一種です。ソーシャルボタンだけの設置もでき、そのシェアしたコメントの表示もできるので反応を一緒に共有したい場合は便利です。
ソーシャルボタンだけでなく自分のサイトの関連記事なども表示可能なのでその表示もしたい場合はお勧めです。
ただし、広告が付いているという所とやや読み込みに時間がかかるのが欠点。

『Zenback』:http://zenback.jp/
『関連記事を手軽に表示できるzenbackの導入方法』:http://mementoo.info/archives/699

個別に取得する

Twitter

social_twitterbtn.jpg

Twitterの公式ページでボタンの設置用スクリプトページがあるのでそちらを参考にしてください。

『Twitter(Add buttons to your website to help your visitors share content and connect on Twitter.)』:https://about.twitter.com/resources/buttons

Facebook

social_facebookbtn.jpg

Facebookに登録する必要があります。その他はTwitterと同じ要領です。

Google+

social_googlebtn.jpg

特に登録の必要なく設置可能です。

はてなブックマーク

social_hatenabtn.jpg

特に登録の必要なく設置可能です。

『はてなブックマークボタン』:http://b.hatena.ne.jp/guide/bbutton
スポンサーリンク
Amazon
  • このエントリーをはてなブックマークに追加

関連記事

ニコニコ動画やYoutubeのRSSフィードもサムネ付きで手軽に表示できるブログパーツ

通常サイトのRSSだけでなく、ニコニコ動画やYoutubeの動画サイトのRSSを読み込んでサムネ画像

記事を読む

美人画像を表示してくれるブログパーツまとめ

美人時計など有名なものもありますが、美人画像を表示してくれるブログパーツをまとめました。暦や時刻を表

記事を読む

PEARをレンタルサーバーにインストールする

共用レンタルサーバーにPEARをインストールしたときにてこずったところについてメモ。今回レンタルサー

記事を読む

【HTML/CSS】タイトルロゴ画像の設定の方法

自分のブログやサイトのタイトル部分にトップ絵画像を設置する方法です。方法としてはimgタグをHTML

記事を読む

Pocketのソーシャルボタンをブログ・サイトに設置する方法

後で読みたい記事を保存することのできるPocketのソーシャルボタンの設置方法についてです。このボタ

記事を読む

ニコニコ動画のURLリンクから外部プレイヤーのスクリプトに正規表現で置換する

ニコニコ動画の動画のアドレスを抽出して外部プレイヤー貼りつけソースのスクリプトに変換するソースです。

記事を読む

【jQuery/javascript】はてなボタンを動的に設置する

はてなブックマークのボタンをページの読み込みが終わった後にjavascript(jQuery)で追加

記事を読む

Twitterのフォロワーが有効かどうか評価するツール

ツイッターの自分のフォロワーがスパムや活動休止中か判定することのできるツールに『Status Peo

記事を読む

人気記事・ランダム記事等紹介の忍者レコメンドが大幅にパワーアップした件

以前このブログにて忍者レコメンドの紹介記事を書きました。その際にこのブログにも忍者レコメンドを設置し

記事を読む

かわいい女の子のアイコンやアバター画像を作れるサイト

TwitterやFacebookなどでアイコンが欲しくなることってあるかと思います。私も色々検索して

記事を読む

NVIDIA DIGITSをSupervisorを使って自動起動する

はじめに 先日Ubuntu14.04にDIGITS 5をGPUなしP

【2017年度】GeForce 1080 Ti搭載BTOパソコン比較

はじめに 最近ディープラーニング用にGPUのないPCにDIGITSを

Windows用のシンプルなストップウォッチソフト紹介

Windows(10)でも使える使いやすいKAZAMITimerという

MNISTをDIGITS 5のCPUのみで試す(GPUなし)

はじめに DIGITSを使えばGUI操作で簡単にディープラーニングが

Windowsユーザが初めてMacBookを購入したときの注意点や感想

最近12インチのMacBookを購入しました。今までWindowsしか

Redmine3.2をUbuntu14.04にインストールして躓いた所についてメモ

はじめに Ubuntu14.04 ServerにRedmine3.2

UWSCを使ったソフト自動立ち上げ【SoftEther VPN Server】

やりたいこと 最近SoftEtherという筑波大学発のベンチャー企業

→もっと見る

  • Author : ががんぼ
    プログラミングやWeb関係で気付いたことについてメモしていく予定。だいたいが備忘録ですが、自分でサンプルを作って動かしてみたりしています。
PAGE TOP ↑