FC2ブログに、ブックマークボタンを設置する

ブログが作りたい!Webサービスで遊ぶ > FC2ブログに、ブックマークボタンを設置する

FC2ブログに、ブックマークボタンを設置する

FC2ブログに、ソーシャル ブックマークボタンの設置

ソーシャル ブックマークボタンを設置してみよう!

他の人のブログなどを眺めていると、ブログの記事の最後などで、ソーシャル ブックマークのボタンを見かけることがあります。

「うちも欲しいなり。(コロ助)」・・・そんな気持ちがふつふつとわいてきたので、設置してみることにしました。


ソーシャル ブックマークとは?

ソーシャル ブックマークは、ブックマーク(お気に入りに追加する)をネットワーク上で行うことができるサービスです。

1:ブックマークする

普段、みなさんは、「おもしろい」とか、「役立つぞ」と思ったホームページを、ブックマーク(お気に入りに追加する)しているのではないかしら。

「後でまた見たい」と感じたホームページを、ブラウザへ記憶(URLの保存)させておくわけです。

2:ブックマークの問題点と解決案

しかし、例えば会社でブックマークしておいたホームページは、自宅のパソコンでは、利用できません。

「あれー、何というタイトルのホームページだったかしら?」、「検索エンジンで、何というキーワードで行き着いたんだったかしら?」など、忘れてしまうこともしばしばあります。

こういう問題を解消してくれるのが、ソーシャル ブックマークです。

「インターネット上に、自分のリンク集が手軽に作成できる」とイメージすれば、分かり良いかもしれません。

ソーシャル ブックマークしておけば、どこからインターネット接続しても、ブックマークをチェックできます。

3:ソーシャル ブックマークの有用性

ソーシャル ブックマークは、ディレクトリ構造ではなく、タグによって整理します。

また、ソーシャル ブックマークを利用している人たちとブックマーク(情報)を共有することもできます。

これによって、同じようなジャンルに興味をもっている人が見ているホームページをチェックすることもできます。

つまり、その業界のオーソリティ(権威のある人)が、普段見ているホームページを確認する機会も得られます。(もちろん、オーソリティが利用していればですけれど)

4:ソーシャル ブックマークの利用方法

ソーシャル ブックマークを利用する場合は、「ソーシャル ブックマーク」サービスを提供しているWebサイトへ行き、ユーザ登録する必要があります。

「ソーシャル ブックマーク」サービスを提供している有名なWebサイトは以下ようです。

一般的に、ブラウザの上部に、ブックマークするためのプラグイン(機能拡張)が用意されているので、既存のブラウザのブックマークとも違和感なく利用できます。

ソーシャル ブックマークのブラウザのボタン

Yahoo!ブックマークは、使用してみれば分かりますが、他のサービスより手間で、とても面倒です。(2008/03/11)


ブックマーク追加ボタンを、ブログに設置したい

ソーシャル ブックマークは、どんなものか分かったかしら?あるいは、すでにご存知だったかもしれませんね。

それで今回は、「ソーシャル ブックマークを利用しましょう!便利だよ!」という話がしたいわけではなく、自分が運営しているブログ内に、ソーシャル ブックマークのボタン(リンク)を設置したいというお話です。

各「ソーシャル ブックマーク」のコードを調べて、テンプレートに貼り付けようかと思ったのですが、実に面倒くさい。

それに、ブログに設置するときに、場所(スペース)も取ります。5つも6つも配置したら、大変です。

また、省スペースのために、アイコンを小さくすると、ユーザが気付かない可能性があります。

さて、そこで見つけたのが、AddClipsというWebサービスです。なかなか素敵です。


AddClipsとは?

AddClipsは、ソーシャル ブックマーク追加ボタンの統合サイトです。もちろん、無料で利用できます。

ボタンを1つ設置すれば、次のような主だったソーシャル ブックマークへのリンクが表示されます。


AddClipsの導入手順

1:AddClipsへ行く

(01)

AddClipsへ行きます。

(02)

右下のほうにある「AddClipsボタンをつくる」を、クリックします。

AddClipsボタンをつくるをクリック

2:AddClipsボタン作成

(03)

「AddClipsボタンをつくる」画面が、表示されます。

好きな「ボタンの種類」を選びます。

ボタンの種類を選ぶ

(04)

「サイトの種類」を選びます。

サイトの種類を選ぶ

一般的なウェブサイト(Webサイト)か、あるいはブログかを選びます。次の選択肢があります。

  • ウェブサイト
  • ブログ

ブログの場合は、さらに選択肢が表示されます。あなたが該当するブログサービスを選びます。次の選択肢があります。

  • MovableType
  • Wordpress
  • livedoor Blog
  • FC2 BLOG
  • Seesaa
  • JUGEM
  • 忍者ブログ
  • Blogger
  • その他

(05)

「ボタンの動きとカラー」を選びます。

ボタンの動きとカラー

「マウスオーバー」か、「別ウィンドウ」表示かを選びます。次の選択肢があります。

  • マウスオーバー
  • 別ウィンドウ

「マウスオーバー」を選んだ場合は、「色」も選択します。次の選択肢があります。

(06)

「統計情報の使用」を選びます。

「AddClipsボタンをつくる」をクリックします。

統計情報の使用を選び、AddClipsボタンをつくるをクリック

3:読み取り許可

(07)

前述(06)の統計情報の使用で「はい(要ログイン)」を選択すると、「ログインする」画面が表示されます。「はてな」もしくは、「livedoor」のアカウントが必要です。

アカウントのある方をクリックします。

アカウントのある方をクリックする

どちらのアカウントも持っていない場合は、登録して戻ってくるか、あきらめて、前述(06)の統計情報の使用で「いいえ」を選択しましょう。

(08)

「ID」と「Password」を入力し、ログインします。

ログインします

(09)

「AddClipsが読み取り許可を要求しています」画面が表示されます。

次の情報を、AddClipsが読み込んでも良いか?を問われています。信頼できるサイトか、注意書きが表示されます。

  • はてなのアカウント名
  • 登録しているプロフィール画像のURL
AddClipsが読み取り許可を要求しています

(10)

「アカウント情報の読み取りを許可する」を、クリックします。

アカウント情報の読み取りを許可するをクリック

読み取り許可については、よく検討しましょう。(統計情報が利用できないだけですから)

(11)

ソースコードが完成したそうです。

ソースコード完成

ソースコードをコピーしましょう。

ソースコードをコピー

4:テンプレートにソースコードを貼り付け

(12)

あとは、FC2ブログでテンプレートに、ソースコードを貼り付けるだけです。

テンプレートの「記事部分」と「フッター部分」の間に貼り付けると、ちょうど良いと思います。

次の記事へ
次の記事へ

次回予告

次回は、文章を書くときのHTMLタグ(<p>タグ)について書きます。


関連記事

FC2以外のWebサービスを使って、遊んでみましょう!

作成日:2008/03/16 更新日:2008/03/16

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

たくさんある・・・

ソーシャルブックマークってこんなにたくさんあったんですね。
ヤフーとfc2、はてなしか知らなかった!
うん、確かにヤフーのは使いにくいというか手間ですね。


ブックマークボタンみつけたので、マウスオーバーしてみたらいっぱい出てきました。
すごい~
で、これの中から自分が利用してるサービスを選んでブクマする、って感じなんですね。

便利。
自分も使ってみたいな。ソーシャルブクマのサービスは全然利用してないから
何か利用したいところです。

ブクマ

ひろこさん、こんばんは。

海外のものも入っているみたいです。
実際もっと多いのかもしれませぬ。
キャプ画を表示してくれるようなところもあったような気がするよ。

マウスオーバ表示と、別ウィンドウ表示があるのさ!(・∀・)
整理され過ぎて、誰も気付かないような・・・どなんやろ。

あー、ブクマされるような記事が書きたいッス。

こんばんは!

このブックマークボタンもの凄~く気になっていたんです^^
AddClipsで入手できるのですね!
早速行って来ます♪

とても参考になりました!!!

Googleさんちょっとおかいしいですね?
私のほうは今表示されたみたいですが、、、

Google先生

ichimarugo-いちまるごさん、こんばんは。

気になっていたのなら、言ってくれればいいのにーん。ニンニン。

Google先生、戻りましたね。
1時間近く使えない状況って、はじめてじゃないかしら。

Googleの障害を、Googleで調べようとしたのは内緒です。
気付くのに数秒かかりました。(´Д`)トホホ

KumaCrowさん。 こんばんは。

ほぼ毎日見せていただいてるのですが、私の頭では理解できないことばかりで、
コメントを書かれてるのを見ても、皆さんすごい方ばかりで、
ずっとコメントを入れるのもためらっていました。 
可愛い熊さんも欲しいけど、それもできない。
今、特に思考回路がぐちゃぐちゃで、理解する努力もできません。
だからブログも、全く扱ってなく、ただだらだら書いてるだけ。

せっかく買った写真も結局まだ1枚も撮ってなく、なんだかなあ~の日々です。
ボールと戯れてるだけの毎日です。

せっかくステキなKumaCrow先生にめぐり合えたのに、
教えてくださることを実行できなくて、ごめんなさい。
ぽちだけさせてもらってます。
いつも、コメント入れてくださってありがとうございます。
とっても嬉しいです(*^_^*)
今日は、だから、ここを見てることと、ありがとうをいいたくて、
思い切ってコメントに入れさせてもらいました。
ごめんなさい、他の方のような建設的なコメントではなくて。
いつも応援しています。 
いつの日か、きっと、1からお勉強させていただきます!

こんばんは!

こちらの記事を参考に今ほどやっとブックマークボタンを設置しました^^
とても参考になりました!

ありがとうございました!!!

おもしろい記事

tearful rinkoさん、こんばんは。

あーそうですねー、
ここのところ、ちょっとうちのブログにしては、
難しめの内容が続いているかも。

気を付けないといけないですね。
ご指摘ありがとうございます。(・∀・)

おもしろい記事を増やしたいんですけれど、
おもしろいのが一番難しいんですよね~。

コメントをたくさんもらえるようなブログにしたいのだけれど、
なかなか、難しいッス。

その点、rinkoさんのブログは、
コメントがいっぱい付いていいですよ!

それだけ、内容に意味があるってことなんじゃないかな。
だらだらなんてこと、ないんじゃないかな。

rinkoさんのブログを読んで、
癒(いや)されて帰っていく人たちがいることって、
とても書き手としては、幸せなことなんじゃないだろうか。

頑張っているじゃないですか。ねー、rinkoさん。
すでに頑張っているのだから、頑張り過ぎないようにしなきゃ。

私は、人間的にも、技術的にも、もろもろまだまだ未熟ですので、
これからも、ご指導ご鞭撻(べんたつ)いただければと思います。

こちらこそ、いつもコメントありがとうございます。
とても、エネルギーになっています。(o^-')b

AddClips

ichimarugo-いちまるごさん、こんばんは。

ほんとだ、AddClipsが入っていますね。

ブクマを試してみようかと思ったのですが、
すでに、自分が持っているIDのところは、
すべてブクマしているのよね。(´Д`)ホホホ
増やそうかな。

お疲れ様でした。(・∀・)

フムフム r(-◎ω◎-)

KumaCrowさん しゅしゅごぃ~~ですねぇ~ d(-_^)good!!
これだけの事を書くって私には一生かかっても無理ですが
とても助かります アリガト エヘ♪(*^・^)ノ ⌒☆(*^-^*) ポッ

拍手とポチッとしたぜ o(*^▽^*)o~♪

ソーシャルブックマーク

hoheさん、こんばんは!(・∀・)/ぐいぶに

お役に立てたようで良かったでござる。

それから、拍手とポチッとも、
ありがとうございます。

助かります。ヾ(*´∀`*)ノわーい

No title

お世話になっております。
AddClipsについて知ってはいましたが、メールアドレス等の登録が必要かと思っていて億劫になっていました。

図解付きでの説明ありがとうございます。
登録不要で1分程度で設置できました。

AddClips

神出鬼没★さん、こんにちは!( ・∀・)ノHappy Sunday
コメントありがとうございます。

設置、お疲れさまでした~。(´▽`)♪

あ、でもAddClipsは、
表示が重くなるときがあるやもしれませぬ。

あれ?重いかも・・・と思ったら、
試しにちょいと外してみると良いかもしれません。

貼るところが・・・><

頑張っています。初めてのコメントでここに書いていいのかわからないのですが、よろしくお願いいたします。
はてなを登録して、ブックマークコードをコピーするところまで出来たのですが、どこに貼って良いのかわからず、もう少し細かく教えてもらえるとうれしいです。
テンプレートとヘッダー?の間・・・それがわからないです↘
テンプレートの編集画面に行くとHTML編集とスタイルシート編集の二つが出てきて、HTMLの一番最後に貼ってみましたがブログの一番下に貼れた状態に。自分の記事(日本語記入の)の最後に貼りつけると、何かが消えて、ブックマークが貼れていた↘。

とりあえず、何も保存せず、コードのみワードに貼りつけ保存しましたw

ここに貼るとこう表示されるよという参考画像があればもっと嬉しいです。
よろしくお願いいたします。

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/242-fdcb8518
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて