ブログの探究－ブログ運営のテクニック集－: ソーシャルブックマークとRSSアイコンの設置（自己紹介用）

概要：ソーシャルブックマークとRSSアイコンの設置（自己紹介用）

色々なブログを見ていると下記のようなアイコンを見たことはありませんか？

このように「twitter」、「facebook」、「RSS」の３つを設置している方が多いですが、更に「Google＋」も設置している人もいますね。

何のために設置しているのか？
人によって目的は異なるかもしれませんが、おそらく「自己ブランディング（ネット上で自分の存在をアピール）」のためだと思われます。

最近はtwitter、facebook、mixi、google+などのソーシャルメディアが流行しています。
これらと自分のブログを連携することによりさらに多くの方にブログを見てもらったり、更に詳しく自分を知ってもらえるわけですね。

今回は前者の３つをブログに設置する方法をご紹介します。

手順：ソーシャルブックマークとRSSアイコンの設置（自己紹介用）

今回はBloggerを使って設置手順をご紹介します。難しくはないのですが結構作業ボリュームがあります。

１．アイコンのダウンロード

まずは、元となるアイコン（画像）を取得しなければいけません。
各種アイコンを下記のページからダウンロードしましょう。

⇒　design deck

リンク先に飛んだ後、画面を下にスクロールしていくと下記の画面がありますので、Downloadを押下します。

クリックすると、「フォローしてね」画面が表示されますが、即フォローする必要はありません。
フォローしない場合は、「skip to Download」をクリックしましょう。後はファイルを保存してダウンロード完了です。

※ファイル名は「mini_social_icons_set.zip」です。アイコンはデスクトップなどご自身が管理しやすい場所に保存しましょう。

２．アイコンのアップロード

ダウンロードした圧縮ファイルを解凍（展開）します。
（例：WindowsXPなら圧縮ファイルを右クリックで「すべて展開」を選択で解凍可能）

解凍後、フォルダの中を次の順でファイルを探します。

[mini_social_icons_set]　→　［JPG］　→　［48×48］

アイコンファイルの一覧が表示されていますが、今回は下記を使用します。

・twitter.jpg
・facebook.jpg
・rss.jpg

続いてBloggerにログインします。
ログイン後「新規投稿」で新しい記事を作成します。

新しい記事のタイトルは「アイコン」など適当なものにします。
そして記事の内容ですが、先ほどの３つの画像を「画像を挿入」で記事内に挿入します。

全て挿入したら保存をクリック。
これで画像を使用できるようになります。

３．Picasaから画像のURLを取得

Bloggerの画像はPicasaに保存されます。

⇒　Picasaウェブアルバム

Picasaにログインしたら、先程の画像がアップロードされているはずですので、対象の画像を見つけます。見つけたら右クリックで［プロパティ］を選択。アドレス：（URL）に画像のURLが表示されるので、これを控えておきます（メモ帳などのエディタに控えておけば良いと思います）。

４．アイコンの設置

①各種リンク先URL取得

アイコンにリンク先URLを設定する必要があるので、これを順に取得します。

・twitter
twitterのリンク先URLは下記の通りです。

http://twitter.com/#!/あなたのツイッターID

あなたのツイッターIDにはよくtwitterにある@はつけません。
私（@hayato_k0315）の場合、

http://twitter.com/#!/hayato_k0315

です。

・facebook
facebookのリンク先URLの取得は少々面倒です(^^;
まず、facebook上に自分のページを作成しなければなりません。

⇒　Facebook

facebookにログイン後、左サイドバーの「ページを発見しよう」をクリック。

→右側の「Facebookページを作成」をクリック。

→「慈善活動またはコミュニティ」を選択。

→ページのタイトルを求められるので任意の名前を入力（私は当ブログの名前にしました）。規約に同意して「スタート」を押下。

→ページの説明を入力して、すぐ下にはご自身のブログのURLを入力しておきましょう。

以上で「Facebookページ」の作成が終了です。

ホームに戻ったら、下記の画面のようにホームの横の▼をクリックして、ご自身のFacebookページを開きましょう。

するとFacebookページが開いてブラウザ上部のアドレスバーにURLが表示されるはずです。

http://www.facebook.com/pages/Facebookページ名/ID

これがFacebookページのURLになります。

私（@hayato_k0315）のFacebookページであれば

http://www.facebook.com/pages/%E3%83%96%E3%83%AD%E3%82%B0%E3%81%AE%E6%8E%A2%E7%A9%B6/448840421839696

です。

大変でしたね(^^;

・RSS
RSSはBloggerの場合Atomになります。

BloggerのAtomフィードは

あなたのBloggerブログ名/feeds/posts/default

になります。
当ブログであれば

http://internet-bibouroku.blogspot.com/feeds/posts/default

です。

②Bloggerにアイコン設置

Bloggerにログイン後、[レイアウト]　→　[HTML/JavaScript]でソース入力画面に進みます。

下記の対象ソースを埋め込みます。

［対象ソース］

【ソースの説明】
・赤字部分はあなたのものに変更して下さい。

・width、heightはアイコンのサイズです。お好みに変更して下さい。

・hspaceはアイコンの間隔です。これもお好みに変更して下さい。

埋め込みが終了したら、保存して終了です。
中々大変な作業ですが、必ず設置できますので是非試して下さいね(^-^)

スポンサードリンク

ブログの探究－ブログ運営のテクニック集－

ページ

2012年12月3日月曜日

ソーシャルブックマークとRSSアイコンの設置（自己紹介用）