30 8月FacebookページのSSL対応ページをロリポップの共有SSLを使って作る

FacebookページのSSL対応ページをロリポップの共有SSLを使って作る

ロリポップの共有SSLを使ったFacebookページ用ワードプレスの作り方

Facebookを通常のhttp://で見ている分には問題無いが、URLが https:// となっていた場合、Facebookページが表示されない場合はある。

その場合は下記のようなページが表示される。

これはiFrameを使って作成されたFacebookページのiFrame内に表示されているものがSSLに対応していないために起こる現象で、回避するには元のページをSSL対応にするほか無い。

※SSLとは
Secure Socket Layerの略で、米Netscape社が開発したインターネット上で情報を暗号化し、送受信できるプロトコルです。サーバ⇔クライアントPC間でクレジットカード情報などの機密性の高い情報を安全にやり取りできます。

https://www.sslcerts.jp/

通常SSLを使用するにはSSL対応のサーバーにデータを設置する必要がある。
利用しているサーバーによって、SSLの対応は様々だが、ココではロリポップの共有SSLを使ってワードプレスを動かし、FacebookのSSLページに対応できるよう設定してみる。

1.ワードプレスをロリポップにインストール

2.ユーザーページから、自分のアカウントに対応している共有SSLのURLを確認する。

※例)下記のアカウントを借りて普通にワードプレスをインストールしてみた。
「http://ftown.pupu.jp/wp/」

今の状態で、下の共有SSLのURLにaccessすると、画像やCSSが読み込まれていないため、白地に文字だけのページが現れる。

https://pupu-ftown.ssl-lolipop.jp/wp/

3.「小粋空間」さんの下のプラグインをダウンロードしてワードプレスにインストール
WordPressのURLをSSLや相対URLに変更する「wp_replace_domain」プラグイン

※ワードプレスを共有SSL対応にするためには「WordPress HTTPS」と言うプラグインもあるが、「wp_replace_domain」の方が直感的でおすすめです。

あとは画像の「ドメイン設定」画面を開いて赤枠部分を入力して完了。
※http:// や https:// は必要ないので注意

これでワードプレスのSSL対応は完了です。

4.Facebook用Wordpressテンプレートをダウンロードしてテーマ設定。

5.iFrame版 Facebookページ作成方法(最新版 仕様)のページを参考にSSLページをFacebookアプリに登録して完了

以上でSSL対応Facebookページの完成です。

03 6月Facebookページの作り方。 その4 (WordPressを使ってFacebookページを作る方法)

■ここからはiFrameの中身のお話
(Wordpressを使ってFacebookページを作る方法)

iFrameを使ってFacebookページを作るには、別途自分でファイルを置くためのサーバーを用意する必要がある。
今までレンタルサーバーなどを使ったことがない人にとっては若干ハードルが高くなる。

1.いいねボタンのオンオフで表示されるページを切り替える

よく見かける機能だ、FBML時代は非常に簡単に実装できたが、iFrameになってからは、この機能も若干ハードルが高くなった。ただしこれに関しては、非常にいいソースが提供されている。(下記URL参照)
    http://www.facebook.com/fbml.sample?sk=app_198352453532934

上の「スタティックFBML」さんのページよりソースをダウンロードして設置しよう

2.wordpressをFacebookページで表示する。

弊社おすすめはこれである。
wordpressとは皆さんご存じの超メジャーblogツールであるが、WordpressをFacebookページに適応することで様々な機能を簡単にFacebook上で実装することが可能となる。

たとえば
1)文字や写真を思い通りに配置できる。
2)お問い合わせフォームを設置できる。
3)WordpressのRSS機能を使ってFacebookの「ノート」と同期できる
4)トップページの他、会社概要・利用規約・商品紹介など複数ページを展開できる

要するにwordpressをFacebook内に取り込むことで、Facebookで足りない機能を補完し、ビジネスを展開する上で必要な機能をすべてまかなうことができる。

設置サンプル
サンプル


【Facebook用Wordpressテンプレートのダウンロード】
下記フォームに入力していただくと、Facebook用WordpressテンプレートのダウンロードURLをお知らせします。
※無料 サポート等無いです。自己責任にて使用してください。


お名前
メールアドレス

□設置方法

1.先に説明したアプリの登録でiFrameページを作成する
 ※Facebookの仕様変更によりSSL(https)対応サーバー以外のサーバーを受け付けなくなるようです。
2.別サーバーにWordpressを設置し、iFrameアプリのcampusページにWPのURLを登録する。
3.WordpressのthemeをFacebookのサイズに合うものに変更する
 ※FacebookのiFrameの左右のサイズは初期設定は左右520px、上下800pxでサイズをはみ出した場合はスクロールバーが表示される。
 ※当ホームページ配布のFacebook用themeファイルを使用することでカスタマイズすることなく設置可能です。上のフォームよりダウンロードしてください。
4.javascriptを使用してスクロールバーがでないように設定する
 ※javascriptを使用することで、Facebook側がWordpressの記事の上下のサイズを自動取得し、その大きさに合うiFrameページを表示する
 ※この件もホームページ配布のFacebook用themeファイルを使用することで解決可能です。

ここいらのURLを参考にしてjavascriptを設置しよう

http://ascii.jp/elem/000/000/593/593097/
http://ascii.jp/elem/000/000/596/596552/
http://tam-tam.co.jp/tipsnote/javascript/post1097.html

20 4月記事のタイトル、記事内容、タグから関連した記事のリンクを記事の下部に自動的に表示してくれるプラグイン

Yet Another Related Posts Plugin

記事のタイトル、記事内容、タグから関連した記事のリンクを記事の下部に自動的に表示してくれるプラグイン。

○○の記事 その1、~~その2と言った投稿がある場合、関連記事のタイトルのリンクを自動設置してくれるので非常に便利

07 4月wordpressメモリーエラーの対処(おぼえ)

Fatal error: Allowed memory size of 33554432 bytes exhausted p-includes/pomo/mo.php on line 172

 

のエラーが出たばあい、 php.iniファイルを作成し、

 

memory_limit = 64M

と書いてサーバーに放り込む

 

あとwp-settings.phpに下記を記述

define('WP_MEMORY_LIMIT', '64M');

10 3月ワードプレスの投稿予約機能を使ったテスト

ワードプレスの投稿予約機能を使って、Facebookに毎日決まった時間に投稿してみる。

FacebookのRSS Graffiti アプリを使ってRSSを取得、 RSS Graffitiは30分に一度巡回なので投稿から反映までちょいタイムラグがある。

なのでワードプレスのプラグイン wordbooker を試してみた。

リアルタイムで投稿されるのでいい感じ

10 3月フェイスブックのシェアボタンをワードプレスの各記事に自動挿入

SexyBookmarks

フェイスブックのシェアボタンをワードプレスの各記事に自動挿入できる。

また、フェイスブック以外のソーシャルサイトにも選択するだけでシェアボタンの追加が可能

10 3月ワードプレスに簡単にフェイスブックのいいねボタンを設置

WordPress Facebook Like Plugin

インストールするだけで、WORDPRESSの各記事に自動的にいいねボタンを挿入できる