サンキューページにFacebookの「いいね!」BOXを設置して、ファンを増やそう

スポンサーリンク

最近読んだ「1万円起業」という本の中で、こんなことが書かれていました。

サンキューページで、自社Facebookページへの『いいね!』をお願いしよう!

サンキューページとは、Welcartで言えば「購入完了ページ」のことです。

Welcartユーザーの皆さんも、デフォルトのままで「ありがとうございました」だけを素気なく表示させている場合が多いのではないでしょうか。

Welcartの購入完了ページ

サンキューページは、「買い物完了」ですから、そのままショップから離脱してしまう(他のサイトに行ってしまう)場合も少なからずあります。

しかし。サンキューページを見ているのは、たった今、購入して下さったお客様です。自社商品に興味を持って下さり、しかもお買い上げ下さった貴重なお客様です。

このページにFacebook等へのリンクを設置すれば、クリックして下さる可能性も非常に高いと言えます。

設置するのはいいね!BOX

この場合は、Facebookの小さなボタンではなく、「いいね!」BOXと呼ばれる以下のようなタイプが目を引きますのでベターです。

「いいね!」BOXの例

いいね!をしてくれた人の顔を見せるかどうかや、タイムラインを表示するかしないか等は、Facebookでコードを取得する際に自由に設定出来ます。

カスタマイズの概要

  1. wc_completion_page.phpを使用中のテーマに設置
  2. Facebookの開発者用ページで、「いいね!」BOXのコードを取得
  3. wc_completion_page.phpに、2のコードを挿入

1. wc_completion_page.phpを使用中のテーマに設置

Welcartでは、簡単な文言程度であれば[カートページ設定]>[カートページに挿入する注意書き]タブから、追加可能です。

しかし、Facebookのコードをここにそのまま入れても反映されません。

Welcartのカートページに挿入する注意書きの設定

そこで、「購入完了ページ(サンキューページ)」のテンプレートに直接記述します。

Welcartのテンプレートをカスタマイズする場合は、使用中のテーマ内に「wc_templates」というフォルダを作り、その中にカスタマイズしたいテンプレートをプラグイン内のwelcart_defaultフォルダからコピー&ペーストします。

今回は完了ページをカスタマイズしたいので、wc_completion_page.phpを使用中テーマの以下の位置に設置します。

  • 使用中のテーマ
    • wc_templates
      • cart
        • wc_completion_page.php ←ココ

この後の流れはこうです。

  • 2のステップでFacebookの「いいね!」BOXのコードを取得。
  • 3のステップで紹介するコード中の「ここに「いいね!」BOXのコードを挿入」と書かれている部分に、Facebookのコードを挿入。

2. Facebookの開発者用ページで、「いいね!」BOXのコードを取得

「いいね!BOX」は、Facebookの開発者用ページで取得出来ます。

https://developers.facebook.com/docs/plugins/like-box-for-pages/

いいね!BOXの設定画面

プレビューが出ますので、設定そのものは直観で出来、難しくありません。

Facebook Page URL Width
自社のFacebookページのアドレス 「いいね!」BOXの横幅(特に無ければ空欄)
Height Color Scheme
「いいね!」BOXの高さ(特に無ければ空欄) 色調(明るい色か暗い色か)
Show Friends’ Faces いいね!をした人たちの顔を表示 Show Header ヘッダーを表示
Show Posts Facobookの投稿を表示 Show Border 枠線を表示

設定が決まったら、「Get Code」からコードを取得します。

いくつかのコードが選べますが、ここでは「IFRAME」を選んでください。設置が簡単で、且つ読み込みが「HTML5」より早いようです(筆者のローカル環境での体感速度ですが)。

いいね!BOXのコードを取得

表示されたコードをコピーします。

3. wc_completion_page.phpに、2のコードを挿入

今回は、フッターの記述(カートページの設定で入れられる文言)の直後に入れることにします。

wc_completion_page.phpの31~33行目に、フッターの記述のタグがあります。

<div class="footer_explanation">
	<?php do_action('usces_action_cartcompletion_page_footer', $usces_entries, $usces_carts); ?>
</div><!-- footer_explanation -->

この直後(または</div>の直前でもOK)に、2.で取得したFacebookのコードを挿入します。

<div>
	<?php do_action('usces_action_cartcompletion_page_footer', $usces_entries, $usces_carts); ?>
</div><!-- footer_explanation -->
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FFacebookDevelopers&amp;width&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;header=true&amp;stream=false&amp;show_border=true&amp;appId=677263598971884" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:290px;" allowTransparency="true"></iframe>

※上記は例としてFacebookディベロッパーページの「いいね!」BOXのコードを入れていますので、そのままコピペしないで下さいね。

これで完成です。サンキューページ(購入完了ページ)に、いいね!BOXが表示されます。

サンキューページに「いいね!」BOX

もちろん、コードをアレンジすれば、ツイッターボタンなども表示させることが可能です。

お客様の離脱率を下げつつ、次のページに誘導して、1ページでも多くの自社サイトをご覧頂けたらいいですね。

コメントは受け付けていません。

Copyright© 2017 Welcart カスタマイズ ブログ All Rights Reserved.