Facebookページにフォームを設置する。

この記事は1年以上前に投稿されました。
公開時の情報を元に記述してありますので、最新版に対しては内容が陳腐化している可能性があります。ご注意ください。

Facebookページに何らかのフォームを付けたいという要望は多いと思います。

先日お客様から、アンケートフォームの設置依頼が来たので、設置方法をまとめておきました。

 

やり方としてはHiveloSocialAppsの「Form」アプリを設置する形になります。

項目等もある程度自由に設定できるので、中々便利です。

fbform_0

 

手順

1.HiveloSocialAppsをFacebookへ導入。

前提条件として、どこかのFacebookページの管理人になっておいて下さい。

Facebookログイン状態で、こちらのURLにアクセスします。

https://apps.facebook.com/hivelosocialapps/fbform_1-1

Formを選択肢、インストールを押します。

fbform_1-2
れで該当ページに設置されました。fbform_1-3

次にフォームの中身を設定します。

 

2.タブに表示する名前を設定

該当するFacebookページに移動し、【設定】→【アプリ】と移動すると、

追加済みアプリケーションに【Form】がありますので、【設定を編集】を押すとタブに表示する名前を変更できます。fbform_2-1

空欄だとデフォルトの【Form】です。任意の名前を付けて保存して下さい。

fbform_2-2

 

3.フォームの各項目を設定

次に【アプリケーションに移動】から、フォームの各項目を設定する画面に入ります。

最初にフォームの見出しや、受け取り先のメールアドレスなど基本事項を設定します。

fbform_3-2

次に【質問内容の設定】で、お問い合わせフォームの内容を決めていきます。

fbform_3-3

参考に以下の内容で設定してみます。電話番号以外は必須にしておきます。

質問項目 回答タイプ ※必須
・お名前 テキスト チェック
・メールアドレス テキスト チェック
・電話番号 テキスト  
・メッセージ テキストエリア チェック

  

回答タイプは「テキスト」「テキストエリア」「チェックボックス」「セレクトボックス」「ラジオボタン」が選べますので、簡単なフォームであれば十分対応出来ると思います。必須項目も選択可能です。

 

追加が終わると、こんな感じになります。

fbform_3-4

この場面では、順番の入れ替えも可能です。

 

 

4.確認

実際にFacebookページを見てみると、タブの後ろの方に追加されています。

fbform_4-1

目立たせたいときは、【タブの管理】から、順番を前の方に変えましょう。

 

fbform_4-2

以上で設置は完了です。

 

 

 

 

5.投稿データを見る。

フォームページの下に、【管理画面】へのリンクボタンがありますので、そこからアプリの設定画面に入ります。【お問い合わせ内容を閲覧する】ボタンが出来てますので、ここから確認します。

fbform_5-1

送って頂いた内容は、メールで届くのと同時にこちらの管理画面内にも蓄積されます。

複数人で運用するなどFacebook上で管理を完結させたい場合は便利です。

fbform_5-2

フォームが設置できると、Facebookページの使い道が広がりますね。

お問い合わせ以外にも、アンケートフォームや、申込みフォームなどにも応用できます。

上手に使って、訪問者からのフィードバックを集めてみましょう。


新潟グラム x CSS Nite「Webで使うIllustrator」に参加してきました

先日11月6日に、新潟グラム x CSS Niteに参加してきました。

テーマは「Webで使うIllustrator」

「WebデザインといえばまずはPhotoshop!」って入口からきて、今までPhotoshopメインでデザインしてきました。
が、もとはIllustratorを使う方が多かった自分(パスいじっているのが好き…)。
できたら、IllustratorでもWebデザインするのに、もっと活用できたらいいなってことで、今回初めて参加してみました。

気になったこと・使っていきたい機能などを、忘れない内にメモします。

新潟グラム/CSS Niteについて

【新潟グラムとは】
新潟でデザイン業務に関わる方に向けたセミナーを主催されています。

【CSS Niteとは】
株式会社スイッチの鷹野雅弘さんが主催するセミナー。CSSに限らずweb制作に関する知識を発信するセミナーです。
今回は鷹野さんが講師もされていました。

 

Web制作の動向

いままでビットマップベースで行っていたパーツの作成を
SVGWebフォントアイコンフォントなどのベクター表現や、CSS3を活用することで
マルチデバイスに対応したWebデザインをしていく。

ベクター表現が得意なIllustratorでWeb制作

Illustratorの便利な機能

時間をかけずに、編集しやすいデータをつくれるIllustratorの機能をいくつか紹介されてましたので、その中でも特に気になったものをいくつかピックアップしました。

1 ライブカラーで再配色

ハーモニーカラーをリンク。あとはホイールをぐるぐるまわすだけで簡単にカラーバリエーションができます。
別々に配色する必要のあった「塗り」と「線」も、これで一度に変更が可能に!
配色に悩んでいるときも、これで気軽に別の雰囲気の色が試せますね。

2 文字タッチツール

文字のアウトライン化をすることなく、一文字単位で文字の移動・回転ができます。
今まで文字パレットの数値でいじっていたのを、感覚的にできるのでいいですね!
しかも下位バージョンでデータを開くこともできるそう。
でも残念ながら、こちらはCCのみ対応の機能となっています。

3 段組み設定を使ったgrid対応のワイヤーフレーム作成

段組み設定でグリッド分割し、さらにその分割したオブジェクトを段組み設定で結合。
結合したオブジェクトに、ダミーの画像やテキストをアピアランスで適応
…と、ものの数分でサクサクとワイヤーフレームができあがっていく様は圧巻でした…!
段組み設定にこんな使い方があったんだなーと、一番印象に残った項目でした。

6 Layer Exporterや画像アセット(Photoshop)を使ったPNG/SVG/JPEGの書き出し

スライスを使用せず、レイヤーやフォルダ単位で画像を書き出すことができます。
しかも、レイヤー名(フォルダ名)を対応する名前に変えると、それにあわせた形式や解像度で書き出してくれるそうです!
面倒だったスライス作業がなくなると、相当な時間短縮になるのではないでしょうか。

しかしこちら、CCから対応の機能です…。本当に残念です…。

参加してみての雑感

・Illustratorのこと以外にも、「Webデザイン」制作の動向も知れて、大変ためになりました。

・鷹野さんのスライドの構成・デザインもわかりやすく、かつ遊びがあって素敵でした。
・視点誘導に使用されていたスポットライト機能(Mouseposéというそうです)も、わかりやすかったです。

Mouseposé
人前でデモしたりするときにやっておくといいこと(Mac OS編) – DTP Transit(Mac OS X, セミナー, イベント, 展示会, プレゼンテーション, ユーティリティ)

・CCの機能っていろいろあるんだなーと、新機能を試すのが今から楽しみです。

・使い慣れているつもりになっているソフトでも、知らない機能・活用方法がたくさん。まだまだ勉強しないとですね。

・次回開催されるときには、またぜひとも参加したいです。


ショッピングサイトのまとめ4

寒いのがもっと嫌いなhaneです。
本当に、いろんな機能が低下してきます。

第4回目は月々の利用料はおさえつつ、しっかりとした機能を利用できる「ショップサーブ」です。

aaa

 

特徴

ショップサーブは、株式会社Eストアーが運営するネット通販システムです。
ネットショップ業界では老舗に入ります。
ショップサーブのホームページ内に他社との違いというページを掲載しているのですが、
これは自社と他社サービスの違いを項目ごとに分類してメリット・デメリットを比較できる内容で、
比較しやすく、好感が持てます。
 

メリット

●ネットショップ成功ノウハウが学べる無料セミナーが実施されています。
●オンラインで見られる図解入りのマニュアルが充実しています。
●HTML、CSSが直接編集でき、デザインをカスタマイズできる範囲が広いです。

 

デメリット

●機能が豊富なので、無料期間の2週間では物足りないです。
●一番下の料金プランでも、他社より高いようなイメージがあります。
●ライトプランのみロイヤリティー(売上の5%)が発生します。
●プランによってはスマートフォンサイトの最適化がオプション料金になっています。
●基本的なhtmlの作りがtableで作られているため、多少扱いづらいです。

 

<こんな店舗におすすめ>
●デザインにこだわりたい場合
●サービス提供元のサポート体制を重視する場合
●月々の利用料はおさえつつ、しっかりとした機能を利用したい場合

 


WORDPRESS 権限の違いと複数管理者対応

WORDPRESSの管理者権限には5つの種類があり、それぞれに投稿や編集に関する権限が違います。
今回は、その権限の違いと、それを踏まえて複数の管理者が居る場合の対応についてです。
 

管理者権限の種類として
『管理者』『編集者』『投稿者』『寄稿者』『購読者』の5つの権限があります。


『管理者』とは?
WORDPRESSの全てに対して編集・管理できる権限を持ちます。

『編集者』とは?
記事に対しては編集や公開・削除など全ての権限を持ち、カテゴリやリンクなどの編集が行えます。

『投稿者』とは?
投稿者本人の記事を公開・管理する権限は持ちますが、ファイルをアップロードする事ができません。

『寄稿者』とは?
記事の投稿や自分の記事の管理はできますが、記事の公開やファイルのアップロードはできません。

『購読者』とは?
コメントの読み書きやメールマガジンを受け取る事はできますが、コンテンツに関わる事は一切できません。

続きを読む WORDPRESS 権限の違いと複数管理者対応