[旧] WEB向上中

[旧] WEB向上中

webデザイナーとして日々奮闘する中、色々と忘れず頑張っていければと、web周りの技術や情報をメモっています。

Amebaでブログを始めよう!

前回「今から学ぶ、Facebookページの作り方(準備)」で、Facebookページの登録の仕方をご紹介しましたが、今回はコンテンツの作成手順です。

ウェルカムページだけを簡単に作りたいという方は、ウェビメモさんのブログで紹介されていますので、そちらをご参考ください。
思ったよりカンタンでした!アプリで作るfacebookページ+参考デザインの紹介 | ウェビメモさん

■事前準備を行う

基本的にFacebookページで、ウェルカムページを含むコンテンツページを作成するには、iframeを使用します。そして事前に気を付けておいた方が良い点がいくつかありますので、ご一読ください。
・iframeは外部サーバに設置する必要がある。
・サーバはhttps対応が必須(
・iframe内のコンテンツは横520px×縦800px以内で作成しないとスクロールバーが表示される。
 →スクロールバーを消す方法はPink Kidzさんのブログを参照ください。
  facebookのiFrameページのスクロールバーを消す | Pimp Kidzさん
以上の事を踏まえて、まずは外部サーバにiframeで読み込むためのファイルをアップロードします。
その際に外部サーバにアップするファイル内の記述で、リンク先が target="_top" か target="_blank" になっている事を確認してください。

■開発者登録を行う

Facebookでは、iframeページを1つのアプリとして扱うので、開発者登録を行う必要があります。
まずは以下のURLにアクセスしてください。
https://developers.facebook.com/apps
アクセスしたページより、「許可する」をクリックし、右の「Create one.」のテキストリンクをクリック、その後携帯電話かクレジットカードで認証作業を行います。(すでに認証済みの方は、認証画面は出てきません。)
携帯認証は、登録した携帯にFacebookから認証用の番号が届くので、その番号を登録する手順となります。

■アプリ登録を行う

アプリケーション作成ページ(上のアプリ登録と同じURLです)で、「アプリケーション作成」ボタンをクリックします。
以下のような画面が出ると思いますので、各項目を入力し「続行」をクリックします。
Facebookアプリ
入力内容は後で変更可能ですので、あまり深く考えずとりあえず入力します。
最後に認証画面が出てくるので、画面に表示された文字を入力すればアプリ登録は完了です。

■アプリを設定する

左メニューの「基本設定」よりアイコンを変更します。
表示された画面の上部にある「アイコンを変更」ボタンをクリックし、アイコンを変更します。このアプリをFacebookページで利用した際に、左メニューに表示されるアイコンとなります。ちなみにサイズは16×16です。別にアイコンなんてどうでも良いという方は、この部分を飛ばしても大丈夫です。
Facebookアプリ

次にさきほどの画面の下部分の項目エリアを入力していきます。
Facebookアプリ
まず、ページタブを入力します。
「ページタブ名」は、Facebookでアプリ利用した際に左メニューに表示される内容です。あまり長すぎると末尾が見えなくなるので注意が必要です。「Page Tab URL」に外部サーバに用意したファイルのURLを、その下の「Secure Page Tab URL」にはhttpsのURLを入力します。
ページタブに入力したドメインを「Facebbok上のアプリ」に入力します。最後に「/(スラッシュ)」が抜けていると怒られますのでご注意を。最後に変更を保存を押します。

■Facebookページに登録したアプリを追加する

https://www.facebook.com/dialog/pagetab?app_id=App_ID&display=popup&next=site_URL

URL内の「App_ID」に利用したいアプリのApp IDを入力し、「site_URL」に基本設定のページタブに追加した https のURLを入力しアクセスします。(App IDは、アプリ画面から確認ができます)
表示された画面で、追加したいFacebbokページ名を選択して追加します。これでアプリがFacebookページに追加されます。
Facebookアプリ

最後に管理者のみの権限にしている方は、設定を戻してオープンの状態にします。
先ほど登録したアプリの画面をFacebookページにアクセスしたユーザーに最初に見せたい場合は、ページの編集画面の「権限の管理」より、「デフォルトで表示するタブ」を先ほど登録したアプリに変更し、「変更を保存」とすると指定したアプリが最初に表示されるようになります。

以上で、一通りのアプリ登録は完了です。Facebookの管理ページは良く変わるので、もしかしたらそのうちまた変わってしまうかもしれませんが、ご容赦ください。(2012年2月2日現在)

最近になってFacebookページを作ってみようかなと思ったので、作り方をまとめてみました。

まずはFacebookページの登録を行う必要があります。
登録するために、以下のURLにアクセスします。
http://www.facebook.com/pages/create.php

表示されたページで、どんなFacebookページを作りたいのか、そのカテゴリを決定します。
Facebookページ
Facebookユーザーで無い方、またはログインしてない方は、この後でその旨を聞かれるので、会員登録を行うかログインしましょう。

後は、聞かれた内容を登録していきます。
・プロフィール写真(後で変更可能)
 → 写真サイズは最大 横180px×高さ540pxです。(無印さんのページで言うとこの部分です。)
facebookページ

ファンを獲得は中身が何もできていない状態で招待しても・・・なので、スキップして無視します。(事前告知などに利用したい方はご利用ください)
Facebookページ

最後に基本データを入力して(後で変更可能)完了です。
Facebookページ

これで、とりあえずFacebookページが出来ました。
ただ中身は何もない状態なので、今は誰もアクセスできない状態にします。
編集画面より「権限の管理」→「Facebbokページの公開範囲」で「管理人のみ」にチェックを入れると、管理人登録した人のみが見れる状態となります。
Facebookページ

これでとりあえずFacebookページの登録と、コンテンツ作成準備が整いました。
次回はFacebookのアプリ登録によるコンテンツ作成の方法をご紹介したいと思います。

色々デザインのまとめサイトがありますが、電車の中吊り広告をチェックできる珍しいサイトのご紹介です。

雑誌ネットという、雑誌周りの情報をまとめているサイトさんですが、その中に最新中吊りというメニューがあり、押すと色々な中吊り広告のデザインを見る事ができます。

これだけたくさん並んでいるので、普段はできない中吊り広告の比較をしてみるのもおもしろかもしれません。雑誌のターゲットなどで、カラーはもちろん情報量にも違いがあり、色々と勉強になります。

【雑誌ネット】雑誌の総合情報サイト・雑誌の定期購読ショップ

どっかの凄い人が作ったFlashゲームの紹介です。

凄まじい再現性を兼ね備えたスーパーマリオに、色々なキャラが選択できるおまけ付き。しかも、他のキャラもただグラフィックを変えただけでなく、個性があります。
キーボードでのゲームに慣れてない人にはきついかもしれませんが、普通におもろいです。

FlashMario
http://www.newgrounds.com/portal/view/534416