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

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

posted:   updated: 2016-7-4 0 Comment

スポンサーリンク

最近読んだ「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© 2024 Welcart カスタマイズ ブログ All Rights Reserved.