集客できる美容室・サロンのサイト【WordPressとインスタグラムの連携】

美容室・サロン

この記事では、美容室・サロンのWordPressサイトに会員機能を導入して、インスタグラムでフォローした会員にポイントを付与するという仕組みで、集客していく方法を解説しています。

ホームページをお持ちでない方も、WordPressを利用すれば簡単に作成することができるますので、ぜひこの機会にお店のホームページをWordPressで自作してみてください。

WordPressでホームページの作成

ホームページを作成するには、インターネットに公開するためのサーバーが必要です。
ご自身でサーバーを用意していただくこともできますが、メンテナンスが大変ですし費用が高くなります。

ですので、レンタルサーバーと契約してお店のサイトを作成していきましょう。ワードプレスが簡単に導入できるレンタルサーバーエックスサーバーがおすすめです。

WordPressのテーマを選択

レンタルサーバーと契約してWordPressがインストールできたら、ホームページが閲覧できるようになりますが、デフォルトではデザインテーマがWordPress標準のテーマになっています。

デザインテーマの選択は、ホームページを運営していく上で重要です。web検索で上位表示されるためにもSEO、高速化、モバイルフレンドリーに最適化しているテーマを選択しましょう。おすすめの無料テーマは「Cocoon」です。

パーマリンクの設定

ワードプレス管理画面の設定>パーマリンク(①)>投稿名を選択(②)>変更を保存(③)をクリックしてください。

会員機能を導入できるプラグイン「Simple Membership」

ワードプレスはブログ記事やページを作成する以外にも、プラグインをインストールすることによりさまざまなコンテンツが導入できます。

冒頭の会員機能の導入にはワードプレスプラグインの「Simple Membership」をインストールします。

Simple Membershipのインストールと設定方法

インストールして有効化が完了すると、自動的に下記の固定ページが作成されます。

  1. 登録ページ:(スラッグ)membership-registration
  2. プロフィールページ:(スラッグ)membership-profile
  3. パスワードのリセットページ:(スラッグ)password-reset
  4. Join Usページ:(スラッグ)membership-join
  5. ログインページ:(スラッグ)membership-login

1,2,3については設定されている親ページをなしに変更します。

ワードプレス管理画面の固定ページ>固定ページ一覧で該当するページのクイック編集をクリック>メインページ(親ページなし)(①)に設定>更新(②)をクリックしてください。

つづいてSimple Membershipにおけるページの設定をおこないます。

ワードプレス管理画面のWP Membership>設定(①)>ページ設定②で線引き箇所を削除>変更を保存(③)をクリックしてください。

「myCred」プラグインでポイントを付与

つづいて、会員にポイントを付与する機能の導入にはワードプレスプラグインの「myCred」をインストールします。

myCredのインストールと設定方法

instagramフォロワーポイント付与プラグインのインストール

会員がインスタグラムのフォロワーなのかを判別してポイントを付与するプラグインです。

下記ボタンをクリックでファイルを無料でダウンロードできます。

[download id=”3415″]

つづいてダウンロードした「instagram_point.zip」をインストールします。

ワードプレス管理画面のプラグインの新規追加(①)>プラグインのアップロード(②)>ファイルを選択(③)>今すぐインストール(④)をクリックして下さい。

インストール完了後、有効化をクリックしてください。

会員ログインフォームをサイドバーに追加

会員ログインフォームと新規会員登録ボタンをサイドバーにウィジェットで追加します。

ワードプレス管理画面の外観>ウィジェット(①)>サイドバーにテキストウィジェットを追加していただき任意の管理タイトルを入力(②)>テキスト/HTMLに下記のショートコードを入力>保存(④)をクリックしてください。

swpm_login_formを半角の[]で括ってください。

insta file=buttonを半角の[]で括ってください。

インスタグラムアカウント入力フォームとポイント履歴を表示

プロフィールページに下記のショートコードを入力していただくと、会員が入力するインスタグラムアカウント入力フォームと会員のポイント履歴直近100件分が表示されます。

insta file=insta_editを半角の[]で括ってください。

付与ポイントとフォロワーの設定

付与したいポイントの設定はワードプレス管理画面のポイント付与>instagram-pointに付与したいポイント数を入力して変更を保存をクリックしてください。

つづいて会員がインスタグラムのフォロワーであるか判定するために、フォロワー情報をデータベースに登録します。

インスタグラムにログインした状態で、フォロワー一覧を表示します。ブラウザのurlの最後に「/followers」を追記すれば簡単に表示できます。(①)
【例:https://instagram.com/jisaku_hp/followers】

フォロワーのインジケーターを最下部まで移動してフォロワー情報を全て表示させます。(②)

キーボードで「F12」を押していただき検証ツールの③の箇所をクリックしてコピーします。

コピーしたコードを下記のテキストボックスに貼り付けて変換ボタンをクリックするとフォロワー情報を<>で括って抽出して表示します。

抽出したフォロワー情報をデータベースに登録します。

ワードプレス管理画面のポイント付与>フォロワー情報更新のテキストボックスに抽出したフォロワー情報をコピペ(①)>変更を保存(②)をクリックでデータベースに登録されます。

フォロワー情報はポイント付与するタイミングで更新をしていけばよいかと思います。

最後にポイント付与をクリックするとインスタグラムでフォローしてくれている会員にポイントが付与されます。

タイトルとURLをコピーしました