今回はClickFunnelsでFacebookオプトインを追加していきます。
今回お届けするノウハウはこちら
Facebookオプトインの利点
Facebookのオプトインはいろいろなサービスを登録するときにあるように、Facebookに登録されたEメールアドレスを使って登録を完了するという感じです。Eメールアドレスをいちいち入力してもらう必要がないので、簡単にオプトインしてもらえるのが利点です。では、追加していきます。
Step1. 「FACEBOOK OPTIN」を追加する
「ADD NEW ELEMENT」で「FORM」の「FACEBOOK OPTIN」をクリックすると追加されます。
- TOP MARGIN：エレメントの上の余白を変更できます。数値を上げると余白が広がります。
- EDIT ACTION：あらかじめ「FACEBOOK OPTIN」が選択されているので、これはこのままにしておきます。
- BUTTON TEXT：「Facebookで登録する」という感じで、ボタンのテキストを変更できます。
- SUB TEXT：ボタンの下に小さな文字を入れられます。例えば「今すぐに視聴できます」という感じでサブテキストを出すことができます。
- ARIA-LABEL：HTMLのaria-label属性で、それを指定するときに使うので大半の人はそれほど使わないかと思います。
- FONT FAMILY：フォントを選択できます。
- FONT SIZE：フォントサイズを自由に調整できます。
- MOBILE SIZE：モバイルのフォントサイズのことです。デフォルトの「MOBILE SIZE」はデスクトップのサイズとリンクされていて、「FONT SIZE」の数値を大きくすると「MOBILE SIZE」も大きくなるという感じですが、モバイル表示を最適化したい場合は「EDIT MOBILE SIZE」をクリックしてモバイルのフォントサイズを変更できます。もし戻したい場合は左のリンクのアイコンをクリックすると戻すことができます。
- SUB TEXT SIZE：サブテキストのサイズも変更できます。これもいろいろと試してみてください。
- MOBILE SUB SIZE：上記と同様にモバイル用のサブテキストのフォントサイズを変更できるようになっています。
- TEXT COLOR：ボタンの中のテキストの色をメインのテキストとサブテキストで変えることができます。
- BG COLOR：ボタンのバックグラウンドの色合いを変更できます。これはもともとのFacebookの紫色でいいと思います。
Step2. THEMESタブを設定する
次はTHEMESタブです。テーマに関してはボタンのエレメントのところでも説明しましたが、プリセットのような感じになっていて、今回はこの紫のボタンにすると思うので形を選ぶような感じになると思います。デザイン不要でいろいろな形を選ぶことができるので、すごく便利だと思います。
Step3. ADVANCEDタブを設定する
次はADVANCEDタブです。ADVANCEDタブでもボタンの設定ができます。
- BUTTON WIDTH：ボタンの幅のことです。「Fluid」は文字数に対してボタンの幅が決まるような感じです。「Fill Width」にするとRowやSectionの幅に対して目いっぱい広がるように設定することができます。今回は「Fluid」に戻しておきます。
- INLINE / BLOCK：HTMLのブロック要素とインライン要素を分けることができます。例えばこのボタンを複製して「INLINE / BLOCK」を「Display Inline」に変え、あえて文字数を減らしてコピーします。インライン要素であれば1行に複数入れられます。しかしブロック要素にすると1行に1つしか入らないようになります。このような感じで使い分けることができます。
- STYLE：「Line Flat」にしてもいいですし、もともとの「Custom」にしてもいいと思います。
- VERTICAL SPACE：ボタン内のテキストとボタンの枠までの幅を変更できます。「40px」にするとこれぐらい大きくなります。
- HORIZONTAL SPACE：テキストとボタンの枠の横幅を変更できます。
- CORNERS：ボタンの角の曲率を変更できます。数値を大きくするとより丸いデザインになります。
- BORDER：枠の太さを変更できます。「10px」にするとけっこう太い感じに見えます。
- BOX SHADOW：ボタンを含めた行全体に対して落とすシャドウを選択できます。
- TEXT SHADOW：ボタンの中のテキストのシャドウを変更できます。
- TEXT TRANSFORM：少しわかりにくいので、一旦「BUTTON TEXT」を元に戻します。「TEXT TRANSFORM」はボタンの大文字・小文字に関する設定ができます。全部大文字にしたい場合は「Uppercase」にします。「Lowercase」にすると全部小文字になります。「Capitalize」にすると各語の頭文字が大文字になります。
- LETTER SPACING：文字と文字の間隔を調整することができます。
- ICON PICKER：2種類あります。「ICON PICKER」は文字の前のアイコンを設定できます。「ICON PICKER (AFTER)」は文字の後のアイコンを設定できます。
- BUTTON EFFECT：「hover」と書いてあるものはマウスをホバーしたときのエフェクトで、「loop」と書いてあるものはマウスを当てなくてもかかるエフェクトです。
- BUTTON ALIGN：ボタンの位置を左・中央・右と変えることができます。
ANIMATIONタブに関しては他のエレメントとほぼ共通しているので重複してしまうかもしれませんが、「TIMED DELAY」と「TYPE」の「On Page Load」「On Page Scroll (becomes visible)」があります。
- TIMED DELAY：例えば30分後や45分後に登録ボタンを出したいという場合に使うことができる
- On Page Load：ページがロードされてから500ミリセカンドなどのすごく短いディレイを入れることができる
例えば「TIMED DELAY」で「Fade In」を選択して「MINUTES」を「10」にしたとすると、ページがロードされてから10分後にこのボタンが表示されることになります。これはウェビナーページなどでよく使います。
「TYPE」を「On Page Load」にした場合は、ページがロードされてから500ミリセカンドでふわっと表示されるというような感じです。JavaScriptでいうLazy Loadingのような感じです。「On Page Scroll (becomes visible)」に関してもページがスクロールされてボタンの場所まで来たときに500ミリセカンドのディレイが入ってふわっと表示されるという感じです。「STYLE」に関しても「Fade In」以外の効果を選択できるので、いろいろ試してみてください。今回は以上です。
