Archive for 7月, 2012

12 7月wordpressの各記事にFacebookのコメント欄を設置挿入する覚えがき。

 

yahoonewsをはじめ、最近いろいろなサイトを見ると、記事の下のコメント欄にFacebookのコメント欄を引っ付けているサイトを多く見るようになりました。

↑こんな奴です。

ワードプレスなどのblogシステムにはもともとコメントシステムがありますが、時代の流れは自前のコメントシステムではなくFacebookやTwitterの「ソーシャルプラグイン」と呼ばれるこういったプラグインをつける方向です。

「ソーシャルプラグイン」をつけることにはどんなメリットがあるのでしょうか?

一番に考えられるのは、「広がり」です。
Facebookのソーシャルプラグインのコメント欄にされたコメントは、そのブログの記事内に表示される他、コメントした本人と友達のFacebookのニュースフィードにblog記事のリンクと共に表示されます。

あとはSNSの特徴通り、いいねやシェアを繰り返し記事のリンクが拡散されて行きます。
と言うことで、Facebookのコメント欄をワードプレスの各記事毎に設置する方法です。
まずは下のリンクから「Facebookソーシャルプラグイン」のページに行きます。
http://developers.facebook.com/docs/plugins/

ここで赤枠のコメントをクリック

 

 

 

下の画面が表示されたら「width」でコメント欄の左右のサイズを調整します。


「http://example.com」は後ほどwordpressのタグを挿入するのでそのままでOKです。

 

最後に「Get Code」ボタンをポチッとな!
※初めて「ソーシャルプラグイン」を使う場合はFacebookのアプリケーションIDが必要です。
アプリケーションIDの取得方法は下の「iFrame版 Facebookページ作成方法(最新版 仕様変更対応)」をご覧ください。
ワードプレスに挿入されるコードが表示されました。
プラグインのコードには「HTML5」「XFBML」のどちらかが使用できます。
今回は簡単なHTML5で設置します。

 

※HTML5はIE9以上・googlechrome・Firefoxなど対応ブラウザ出なければ表示されません。

まずは指示通り、上のテキストエリアのソースを<body>タグのすぐ後ろに挿入します。
ワードプレスのテーマの場合、多くのテーマでは「header.php」内を探してください。

次に「プラグインを表示したい場所にプラグインのコードを配置します」のコードをコピペします。

ここでみそですが、図の赤枠部分に記事のURLを取得するコード

<?php the_permalink(); ?>

を挿入します。
後はコメントを埋め込みたい部分にソースをペーストして終了です。

一般的にはindex.phpやpage.phpのワードプレスのデフォルトコメント欄の

<?php comment_form(); ?>

を探して差し替えるのが簡単でしょうか。

これで普通のワードプレスもソーシャルブログに早変わりです。

 

 

 

10 7月googleカレンダーの予約機能がおもしろそうなので試してみました。

みなさん、googleカレンダーに予約機能があるのをご存じでしょうか?

ホテルや旅館の予約を取るときに表示されるカレンダーがありますが、あれと同じような機能です。
いつの間にそんな機能が!と思いますが実は2011年6月から実装されています。
私は最近まで知りませんでした・・・・

使い方は至って簡単です。

まずはgoogleアカウントにログインしてカレンダーを表示します。
このときのポイントは「日」もしくは「週」の表示にすること。
「月」表示では「予約枠」のリンクは表示されません。

それでは早速設定してみましょう
「週」表示にして、予約枠を設定したい時間にマウスカーソルを合わせると
画像のバルーンが表示されます。

ここで赤枠の「予約枠」のリンクをクリック。

すると下の様な表示に変わるので「予約枠の使用を開始」のリンクをクリックします。

さあ、予約枠の詳細設定画面が出たでしょうか?
後は必要事項を入力しましょう。

「場所」のテキストボックスに住所を入れると、予約者に飛んでくる確認メールにgoogleMAPのリンクが張られますよ。
情報の入力が終わったら左上の「保存」ボタンをクリックして設定完了です。

あとは詳細入力ページに表示されていた「このカレンダーの予約ページ」のURLに入ってみましょう。
赤枠のようなページを確認できます。


クリックすると次のような画面が出てきて、「保存」ボタンを押すとその時間で予約されたことになります。

そうそう、この機能は予約する側もgoogleにログインしている必要があります(ここが惜しいね)
ついでにgoogleカレンダーをホームページやblogに貼り付ける方法です。

まずgoogleカレンダー右上の歯車マークをクリックして「設定」を選択します。


設定画面が開いたら「カレンダー」のタブをクリックして「このカレンダーを共有」のリンクをクリック!


このカレンダーを一般公開する ヘルプ
このカレンダーは一般公開され Google の検索結果にも表示されます。
予定の時間枠だけを一般に公開 (詳細は非表示、検索の対象にもならない)

のチェックボックスをチェックして「保存」をクリッククリック!
さらに左上タブの「カレンダーの情報」ページを表示して、赤枠のHTMLコードをコピーします。


あとは好きな場所に貼ればOK~~~
Facebookページに入れ込んだりも可能なので使い方によってはおもしろいです。