「HTMLコーディング」カテゴリーアーカイブ

FBページのアプリページ作成

Facebookページ（旧ファンページ）でのアプリページ作成時での不具合に、iframe読み込みエラーとスクロールバーの非表示があります。

まず、iframe読み込みエラーでは、読み込まれる元のサーバー（自分が契約しているサーバー）の設定やクセが関係する場合があります。
例えば外部ファイルとして読み込ませるために「html」ファイルを参照できないエラーの場合は「php」ファイルに置き換えてみる。

例：）facebook ディレクトリにindex.htmlを置いて、これをiframeとして読ませる場合
FTPでindex.htmlをアップした後で、index.phpにリネームしてみる。またサーバーによっては、htaccessにてphpバージョンを記述しておく必要がある場合があります。
例えば、php5.2.4を利用しているサーバーの場合、htaccessにて下記一行を該当ディレクトリに置きます。ただしこのhtaccessファイル以下のディレクトリ全てに影響が出ますので、サーバー仕様を確認してみましょう。
———————————
AddHandler x-httpd-php524 .php
———————————

FBアプリページはワイド版も使えて、最大810pxに対応しています。しかし完全に横のスクロールを消したい場合には、790pxで作成しておくと万全だと言えそうです。
また「FB.Canvas.setSize」のJavascriptが無効になってしまったため、縦の最大値が1280pxになってしまい、それ以上はスクロールバーが表示されます。
それを非表示にする場合には、「FB.Canvas.setAutoGrow」を利用するといいでしょう。
<head>内に以下の一行を追加します。
———————————
<script type=”text/javascript” src=”http://connect.facebook.net/ja_JP/all.js”></script>
———————————

その後、</body>の直前に下記コードを追加してみましょう。
———————————
<div id=”fb-root”></div>
<script>
(function() {
var e = document.createElement(‘script’); e.async = true;
e.src = document.location.protocol + ‘//connect.facebook.net/ja_JP/all.js’;
document.getElementById(‘fb-root’).appendChild(e);
}());
window.fbAsyncInit = function() {
FB.init({
appId: ‘1234567890’, // ← ここには自身のアプリIDに変更
status: true,
cookie: true
});
FB.Canvas.setAutoGrow();
};
</script>
———————————

アプリIDはこちらにFacebookアカウントでログインして確認していきましょう。
「アプリID 確認ページ」

今後のFacebookページは、「交流を重きにおいて、SNSの特性を使いこなす」という習性の元で運営されるべき物となったことで、オシャレな作り込みやファン獲得の要素も大きいですが、いかにお客様や関係者様とSNSを生かした交流を推進できるかといった使い方が重要になっていきそうです。
まずはタイムラインの充実を図っていくところから始めるという原点を忘れてはいけないと思います。

Sponsered Link