Facebook ソーシャルプラグインをいくつか実装してみた。

Check
Clip to Evernote このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加

今回実装したのは「Facebook Comments」と「LikeBox」の二つ。
実装の流れは次の通り。

・AppIDとApp Secretの取得
https://developers.facebook.com/apps
より、新しいアプリケーションを作成して取得。
基本的にFacebookアカウントがある人なら誰でも取得可能。
アプリの表示名とグラフに利用される名前を入力して取得。
App Secretは日本語訳「アプリの秘訣」です。


facebook developers image

facebook developers



 

 

 

 

・Comments
https://developers.facebook.com/docs/reference/plugins/comments/
から。HTML5など、三種類から選べます。

facebook comments image

facebook comments



facebook comments code

facebook comments code



 

 

 

 

 

 

 

 

 

 

 

 

基本HTML5は、HTML5のヘッダーが設定されていないと動作不安定なので、

ちゃんとブログの仕様にあったものを使うの推奨です。

 

・LikeBok
まず、通常のFacebookアカウントだけでは使えないことに注意。
FacebookPageを先に作っておくこと。

結構簡単に作れます。作成はこちらから。
http://www.facebook.com/pages/create.php

facebook page image

facebook page



 

 

 

 

 

 

ジャンルに悩んだらコミュニティで良いかと。

その後は、こちらでCommentsと同じようにLikeBoxのコードを取得すれば終了。
http://developers.facebook.com/docs/reference/plugins/like-box/
 

これ全て実装しても一時間かからないぐらいですので、

皆さん興味本位でやってみてはいかがでしょうか。




本ブログのデザイン変更について

Check
Clip to Evernote このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加

 
このたび、当ブログは大幅にデザインを変更しました。
「見ればわかるよ」って話もありますが、wordpressならではの利便と面倒くささがあったので健忘録を兼ねて記述しておく。

・テーマの決定。
悩みに悩んだ。
使い勝手では記事が真ん中の3カラムが良い。でも、左と右が主張過ぎていても良くない。
色合いはモノトーンにしようとは思っていたけど、前回の紺のグラデーションのように怪しげな雰囲気は脱したい。
商業用ではないテキストコンテンツのサイトだから、WEBサイトのファーストビューがFLASHや画像で埋め尽くされているようなサイトはNGなのはわかっている。
googleのランキングに表示速度っていうのが加わったとも聞くしね。)

で、結局このデザインに落ち着いた。
mono-labさん の monochrome 3.0 betaだ。
モノトーンと、ファーストビューに余計な画像がない点、そして豊富なウィジットによる柔軟性、全てを兼ね備えているテーマだと思う。
製作者に多謝。

ちょっと自分好みに編集してみた。タイトルのフォントを変えたり、TOPのカテゴリリンクの位置を変えたり、ウィジットの設定をした。
大分満足してきた。後は角が丸いのが好みではないので直角にしようかと考えているが、それは画像を使っているので工数がかかるので断念。
しかし、自分で課した自分へのテーマへのタスクは概ねクリアしたと思っている。


・削除した機能。
一つの大きな変更はTwitterWidgetを消したことだ。
TwitterWidgetはこんなもの。


以前のテーマでは目立つところに張ってあったが、今回はウィジットの基本機能でひっそりとしたテキストだけに変更している。
これは単純に右のウィジットに後述のAmazonアフェリエイトを貼る予定もあったからだけど、一番の理由は昨今のTwitterのサーバー負荷。
Twitterの強みはTwitterAPIを完全に公開したことにあるのは周知の通りだけど、やはり重くてサイトのレイアウトが崩れるのは良くない。
そういった理由で公式ウィジットを使うのを辞めた。



・追加した機能
機能というか、追加したのはGoogleAdsenseとAmazonアソシエイトに寄るアフェリエイト(広告)を足した。。
「なんだアフェリエイト目的のサイトか」という人もいるだろうが、他のサイトに比べればお試し程度なのはみてわかると思う。
そもそも、ぶっちゃけてしまえばこの手の個人ブログでアフェリエイトによる収益など、余程のPVを持ったサイトじゃないと意味が無いのは自分の
仕事でよくわかっている。


じゃあ何故アフェリエイトを付けたのか?


理由は二つで、一つは自分自身を表現するツールとしての活用。
今現在(2010/05/15)は左手に「郷原 信郎著、検察が危ない」のAmazonアフェリエイトを貼っている。
これは、収益よりも全く違った考課を狙っている。
つまり「このブログを書いている人はファーストビューにこういう本を置く人だ」ということを表現したかったのだ。
多分、これから先はもっとアナーキストな本が並ぶに違いない。


二つ目は「当日のブックマークを本ブログに自動投稿して、かつ、それをTwitterに自動POSTしつつTOPページアクセス時にはそれを見せない」ということ。(長いな)
これは、普段仕事でもプライベートでもお世話になっている「PHPSPOT」さんの「管理人のブックマーク」を自動で出来たら良いなと思って設定してみた。
手段としてはこうだ。


・GoogleReaderでその日スターを付けた記事を「diliciousに共有」する。

・diliciousのBlogPosting機能を使って、本ブログの記事が自動更新されるようにする。

・「del.icio.us daily blog post fixer」を使って、タイトルを変更する。

・Twitterに自動POSTされるように設定する

・サイトTOPには「薫平のブックマーク」が表示されないように管理画面から設定する。


これだけ。


これで、TOPはリンク集でなくちゃんとしたコンテンツが表示されつつ、SEOの重要要件である更新数を稼ぐニューストピック的なページも用意することが出来る。

自己満足だと言われればそれまでだけど、本人が満足しているからいいんです。




ではでは、これからも本ブログをよろしくお願いします。




ktai-styleとwptouch入れてみた。

Check
Clip to Evernote このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加

昨日はSEO用のプラグインである「All in One SEO Pack」を入れてみた。

この手のものはすぐに効果が出るというわけではないので、しばらく静観しなければならない。
googleウェブマスターツールやAnalyticsを眺める日々。

今日は、携帯サイト構築用プラグイン「ktai-style」を導入。
これで携帯専用のページが作成される。

ただ、これでiphoneやスマートフォンの表示を行うのも微妙なので、iphone用のプラグインも導入してみる。
wptouch」が評判のようなのでこれを使ってみる。

結果はこんな感じ。
FireMobileSimulatorのSnippingなので高画質だけど勘弁。

携帯(au,W53S)



iphone


これで携帯、スマートフォンからもオリジナルのページになっった。
各種検索エンジンからクロールされてインデックスが貼られるのはしばらく先だとは思うけど、これでブログとしての最低限の基板はできた感じ。

プラグインのインストールに関しては今回は割愛。
どちらも、/wp-contents/plugin/にソースをアップロードして、管理画面から「使用する」だけです。

製作者に多謝。
これでやっと落ち着いてブログ内容に集中できる・・・・・・かな?




All in One SEO Packを入れてみた。

Check
Clip to Evernote このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加

これから真面目に文章を書いていくに当たり、最低限のSEOは先にやっていこうと決意。
色々調べると「All in One SEO Pac」というプラグインがメジャーらしいということで早速調査

っとその前に。
このBLOGはLAMP環境でwordpressというオープンソースで作成されています。
LAMPとは、次の構成で作られる環境のこと。

L=Linux
A=apache
M=MySQL(RDBS)
P=PHP

SEじゃない方には既に呪文だと思いますが、要は「有料レンタルサーバならどこでも標準装備されている程度のシステム」って感じです。
WEB系のシステムエンジニアやプログラムコーダーが一度は通る道です。

話を戻します。
そんな環境で動作するオープンソース「wordpress」で作られている本ブログですが、SEO対策を全くやっていないのはいかがなものかということで( ´・ω・`)
メジャーなSEO対策ぐらいはやっておこうと思い立ったわけです。


やっと冒頭につながった。
そんなこんなで健忘録を兼ねて「All in One SEO Pac」をインストールしたドキュメントを簡単に書いてみる。。
(wordpressのインストールとかは一瞬なので書きません。)


1.公式サイトからダウンロード
2.Lhaplusでローカルに解凍。
3.サーバーの~/wordpressのrootパス/wp-content/plugins/にアップロード
4.管理画面のプラグインより、「使用する」をクリック。



後は設定をするだけとおもっていたのだけど、なんか「All in One SEO」の設定ページの上に書いてある。


要は、「開発したんだし俺のAmazonのwishlistからなんか贈り物したり、twitterでフォローしてくれよ」といいうことらしい。

とりあえずスルー
というか、毎回この手のものを見るに思うんだけど、日本じゃないのがきついよね。
これが日本の開発者で日本のAmazonから送れるなら少しは考えるんだけど。
AmazonUS版とか、URLすら知らないし。
いっそのことドラえもん募金みたいなシステム作ってくれないかな。
paypal入れるとかさ。


閑話休題。

後は、設定項目を埋めていくだけなんだけど、眠かったので(←重要)DescriptionとKeywordだけ設定して今日のところは終了。




結果はこんな感じ。




これで各検索エンジンも少しはクロールしてくれるかな?
効果は後にGoogleAnalyticsとかで追うとして、今日のところはこんなところで。
記事が充実してきたら会社でやっているレベルに真面目にやろう。