Facebook Eitoku's Blog

「セキュアな接続がサポートされていません」を消す方法 | Facebookファンゲート

いやいやいや。忙しさにかまけてすっかりBlogの更新が滞ってしまいました。

ちょっと時間がとれそうなので、Blogを更新！

今回、Facebookの仕様が新しくなり、ファンゲート（いいね！を押すと見られるようにする仕組み）を使う際、変更しなければいけない点が出てきました。

これは、自分のBlogにコメントして下さった方がいて、気付きました。とても助かりました！geneさん、本当にありがとうございました！

〓「セキュアな接続がサポートされていません。」
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

ファンゲートは、いいね！を押して貰うのに一役買ってくれる手法です。いいね！を押して貰うと、その先のコンテンツや情報が読めるという手法です。

こちらでサーバーを用意してページを作り、そのページをアプリという形でFacebookに登録。設定をして使えるのですが、これが煩雑だったので、以前覚書きを書きました。

Facebookのファンゲートの方法はこちら↓

Iframeで『いいね！』を押した人限定で見れるコンテンツを作る覚書-ファンゲート

ところが、2012月01月12現在から、いいね！を押すと「セキュアな接続がサポートされていません。」と表示されるようになりました。

これは、Facebook側でのセキュリティーのアップデートによるもので、iframeで作成している人はほぼ当てはまってしまっているのではないでしょうか。

かく言う自分もその一人です。全然気付きませんでした(^ ^;)

〓SSLサーバーにiframeのページを移動
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

方法は、簡単。iframeのページを、SSL(セキュリティを更に高める為に、データを暗号化する事して送受信するための通信規約。データやメールの通信にも使われています。)内のサーバーに入れる事で解決するようです。

http://facebook.bex.jp/106

変更すると、URLがhttps://hogehoge.com/hogehoge/のように変化します。

方法はそれだけで簡単！なのですが！面倒なのはそう、サーバー移転。それにともない費用だって…。という私もそれに該当。

以前ロリポップのコロリポプランを使っていたのですが、なんとsslが使えないので、サーバー変更を余儀なくされました(T T)本当にその辺りはがっかりですが、管理人としては背に腹は変えられません。

私はコアサーバーにして今、サイトが見られるようになるまで待っている状態です。

共有sslが使えて価格的におすすめはロリポップかコアサーバー。ただ、共有sslが使えるかまだわからないので、追記したいと思います。

もし、こらからもファンゲートを続けようと思われる方は、是非やって見て下さい。また追記します。

▲このページのトップへ

Iframeで『いいね！』を押した人限定で見れるコンテンツを作る覚書-ファンゲート-

『Fan-Gate(ファンゲート)』をご存知でしょうか？

Facebookページでいいね！ボタンを押さないとページやコンテンツが見れないようにする事です。いろいろブログを見たりしたましたが、ちんぷんかんぷん、四苦八苦しましたが、iframeで使えるように作れました。↓

いいね！を押していない方にはコンテンツは見えません。いいね！を押してもらうように促す文が表示されます。

いいね！を押してくれた方にはコンテンツが見られるようになります。

実際に見てみたい方は、土屋英徳(Tsuchiya Hidenori) | Facebookへ。

海外のFacebookページでは、結構見受けられます。特徴としては、Facebookページ全体を見せないようにする設定とは異なり、あるコンテンツだけを見せないようにできるので、ウォールなどはいいねを押されない方でも見れる事です。

これがいい、悪いは別として、ユーザーにいいね！を押してもらう為には効果的な場合もあります。

大分苦労したので、覚書として書いてみたいと思います。参考になれば幸いです。コードを参考したのは、Reveal / Fan-Gate / Like-Gate Facebook iframe tab tutorial (with PHP) | Blog | Chili Pepper Designです。

■Iframeのページでファンゲートを作成する

最初に、PHPを勉強されている方は比較簡単だと思いますが、自分のようにPHPを使えない方は複雑だと感じると思います。できるだけ簡単に書きたいと思います。

1.拡張子をphpで作る

まず、Facebookページですが、作り方のコツは、FacebookページにIframeでUstreamとFacebookコメント欄を入れる覚書にありますのでここでは割愛します。

ファンゲートを利用する際に注目して欲しいのは、拡張子を.htmlではなく、.phpで作る事です。この理由として、ファンゲートの仕組みを使うには、phpコードを使う為で、基本的にphpの拡張子でないと動作してくれないからです。（html上でphpコードを動かす方法もありますが、ここでは説明しません。）

WindowsやMacで拡張子の変え方が少し変わりますが、基本的には.htmlを.phpに変えるだけです。その時に注意がでますが、OKで大丈夫です。

2.サーバーを選ぶ

phpの拡張子のページを動かす為には、phpが動かせるサーバーにアップしないといけません。php5のバージョンが使えるサーバーを選びましょう。自分はロリポップ！レンタルサーバーを利用しています。

3.コードを入れる

いよいよサイトを作るのですが、その時にまず以下のコードを入れます。そのまま貼付けて貰って構いません。貼りつける場所の指定はありません。

まっさらな状態でしたら、上からそのまま貼付けて下さい。上書きするなら、完全に前のサイトコードなどは削除してペーストしてください。

<?php
function parsePageSignedRequest() {
if (isset($_REQUEST['signed_request'])) {
$encoded_sig = null;
$payload = null;
list($encoded_sig, $payload) = explode('.', $_REQUEST['signed_request'], 2);
$sig = base64_decode(strtr($encoded_sig, '-_', '+/'));
$data = json_decode(base64_decode(strtr($payload, '-_', '+/'), true));
return $data;
}
return false;
}
if($signed_request = parsePageSignedRequest()) {
if($signed_request->page->liked) {
print<<<EOF

<html>
～
</html>←いいね！を押された後に見せたいサイトコードを丸ごとを入れる

EOF;
} else {
print<<<EOF

<html>
～
</html>←いいね！が押される前に見せたいサイトコードを丸ごとを入れる

EOF;
}
}

?>

これで、上の写真で紹介したようなファンゲートを使ったコンテンツができます。各html部分に、丸ごとサイトのhtmlコードを作成、または貼付けてOKです。

最後に、保存する時、文字コードはUTF-8で保存して下さい。いろいろ理由があるのですが、ここでは説明を省きます。

コードを少しだけいじりましたが、これでほとんど大丈夫だと思います。今のところ不具合もないです。ただ、phpも素人ですし、独自で行ったので、不具合がでたり、これより簡単なスマートな方法もあるかもしれません。それでもよければ使ってみてください。

▲このページのトップへ

FacebookページのIframe仕様で出てしまうスクロールバーを消す覚書

FacebookページをIframeでカスタマズすると、ある一定の縦の長さで、スクロールバーがでますね。これ、いやじゃないですか？パソコンによっても出現したりするし。

これをなんとかしたくて、いろいろ調べ、ようやくスクロールバーを消す事が出来ました。その方法を書きたいと思います。

●手順

手順といっても難しくはありません。あるスクリプトをhtmlに入れるだけです。参照したのは以下のブログです。

iframe版ページタブでもFB.Canvas.setAutoResize()できる : Facebook開発者向けドキュメントの日本語訳とTips

そのスクリプトは

<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<div id="fb-root"></div>
<script type="text/javascript">
FB.init({
appId : '<span style="color:#990033">自分のアプリIDを入力</span>',
status : true, // check login status
cookie : true, // enable cookies
xfbml : true, // parse XFBML
logging : true
});
FB.Canvas.setAutoResize();
</script>

これをコピペして自分のアプリIDを入力を入力。それを
<body>～</body>の間の、任意の場所に貼り付けます。自分はとりあえず

の真下に貼りつけました。

iframe化したページタブでは高さ800px固定のようなのですが、このソースはiframe内のコンテンツのサイズが変わると自動でリサイズしてくれるソースなので、スクロールバーが消えるというわけです。結果↓

ページを開いた一瞬だけスクロールバーが表示されますが、自動で消えます。多分どの大きさにしても、縦スクロールを消してくれるはずです。

ちなみに

FB.Canvas.setAutoResize();

の部分を、自動リサイズではなく、長さを確定したソースに変換すると下のようになります。

FB.Canvas.setSize({ height: 10000 });

ブログで記載されていた長さで転載していますが、実際2000にしてやって、確かに問題無く動作しました。これは便利です。しっかりしたサイトが作れそうですね。

●横のスクロールバーを消す

もし、横のスクロールバーが気になる！という方がいましたら、同じように以下のスクリプトを<body>～</body>の間の、任意の場所に貼りつけて下さい。

<STYLE type="text/css">

</STYLE>

多分消えたはずです。

自分は、スクリプトに関しては素人も素人なので、配置等は結構適当です。動いているのでいいかなで終わらしているので、心配な方は、詳しい方に聞いてみて下さい。

●問題が…

自動リサイズのスクリプトのせいなのか、もともとChromeがそうなのわからないのですが、ChromeでみるとソーシャルプラグインのFacebookのコメント欄が、とても狭く表示されてしまうのです。

動きが変な所もあり、表示された！と思って更新したら、出なくなったりなど。IEやfirefox等では問題なく表示されているのに…

Firefox,IE

コメント欄はしっかり出ています。

Chrome

短い…。しかもスクロールバーもでないし。でもドラッグすると動くような状態です。

この問題もいろいろやったのですが、全然だめでした….
Chromeをメインで使っている自分には致命的です...

もしわかる方がいたら、教えて欲しいです(>_<)使用しているのはChrome8です。

▲このページのトップへ

FacebookページにIframeでUstreamとFacebookコメント欄を入れる覚書

Facebookページ。商用の為のページなんですが、普通のアカウントページと違い、カスタマイズができます。

今まではFBMLを使ってカスタマイズするのが一般的だったのですが、3月11日からは使えなくなり、Iframeでサイトやアプリを作る事を推奨しています。

そこでIframeでの作り方を覚えておくために、自分が参考にしたブログとUstreamとコメント欄の設置方法を紹介したいと思います。

自分が忘れないようにする為の覚書のようなものですが、皆さんの参考になれば幸いです。

Facebookページの作り方からは書きませんので、分からなければ調べてみて下さい。そして作ったFacebookページがこれです。↓

土屋英徳(Tsuchiya Hidenori)

Emergency Campers（イマージェンシーキャンパーズ)facebookページ

●手順

まず、FacebookページをIframeでどうやってカスタマイズして表示するかですね。

1.外部サーバーが必要なので、ドメインとサーバーを確保。

2.Html,PHPなどで、サイトを作り、アップロード。

3.Facebookのアップグレードをする→Facebookページのアップグレード状況

4.アプリという形で認識させるので、アプリの開発者登録をする→Developers

上記を含めて、それからの手順は、以下の2つサイトが画像付きでとてもわかりやすく説明してくれています。初心者の自分にもとても参考になりました。↓

FacebookページにiFrameを組み込もう
新しいFacebookページにStatic iframe形式でタブを追加する方法 [C!]

5.後は2で作ったファイルを手直していけば完成。htmlやphp、CSSの知識があれば、かなり自由にカスタマイズできるはずです。

●UstreamとFacebook用コメント欄の設置

Ustreamの設置はそれほど難しくありません。Ustreamを使うにはまずUstreamに登録が必要になります。→USTREAM登録後に、配信するチャンネルを決め、自分のダッシュボードから「番組ページへ行く」を押します。

埋め込みを選択して、↓に表示されたコードをコピーしてhtmlに貼り付けます。

これでUstreamは設置終了です。それだけではなくてTwitterやFacebookでコメント等を入れたいようにするには、その下の「Social streamは…」の部分のタグを、同じくhtml等に貼りつければOKです。上にUstream、下にSocial streamのタグを貼るとこうなります↓

しかし、自分はFacebookのコメント欄、しかも、TwitterのタイムラインやFacebookのウォールに表示させる事無く、その場だけのコメントだけでもよい仕様にしたかったので、FacebookのSocial Plugins - Commentsに行き、Facebookのコメント欄を使えるように登録。

ここはもともと、ブログ等にFacebookのコメント欄やいいねボタン等を使えるようにするタグを作る所です。

Iframeで作る場合は、Facebookの中で直接表示させるわけではなく、外部から読み込む形になるので、アプリも一旦外のサイト仕様にする必要があります。→Create an App

無事にセキュリティーコードを入れると下の画面のようにID等が表示されるので、「アプリID」の部分をコピーか記憶して下さい。

そしてSocial Plugins - Commentsに行き、「Unique ID」に「アプリID」の数字を入れます。下の設定は任意でどうぞ。

OKを押せばを下のようにコードができるので、それをコピーしてhtmlに貼ってアップすればオッケー。

しかしこのままだと、コメント欄の説明周りの言葉が全て英語の表記になってしまうので、日本語表記に直します。

コードの中に

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=…
という部分があります。ここの/en_US/を/ja_JP/に直して下さい。そうすれば日本語になります。

横に二つのスクロールバーが出てしまうのが嫌な場合は、Facebookコメントのソースを更に外部にIframeして、htmlに読み込ませ、Iframeの全体の高さ合わせていけば、下のようにコメント欄だけにスクロールバーがでるようになります。

これは、あくまで自己流ですので、もっと簡単にできたり、綺麗なデザインがあったりすると思います。もしそのような情報があれば教えて下さい。

【PR】ノートパソコンを激安で

▲このページのトップへ

ホーム