2015年10月12日　　カテゴリー｜小ワザ

その場でいいね！されるFacebookのQRコードの作り方！

※記事内で使用を推奨していたDropboxの仕様変更により、2016年9月2日に追記、訂正がしてあります。ご注意ください。
※一部の機種でうまく動作しないと報告をいただいていますが、当方で不具合が再現できず解決出来ずにいます。申し訳ありません…。

こんちは。最近気づいたんですが天草IT部って意外と年齢層高めなんです。その中では若い方のエザキ（31歳）ですｗ

今回のテーマは「QRコード」です。

そうです。こんなやつですね↓

ちなみに上のQRコードはスマホなどで読み取ると、この天草IT部かたらんなブログのトップページにジャンプします。便利ですね！

こういったWebページなどのQRコードを作る場合は特に注意点などはないんですが、今回のタイトルにあるようにFacebookのQRコードを作る場合はちょっと注意が必要です。

※基本的なQRコードの作り方については既にご存知という認識でいきますので今回は触れません。
また、HTMLをいじったり、FacebookページのIDを調べたりと、多少知識が必要になりますが、これをやっておくとQRコードから「いいね！」を獲得できる確率は格段に上がりますので是非挑戦してみてください！

最近はイベントなんかでも見るようになってきましたね

最近はマルシェとかイベントの出店者さんって結構ご自分のお店の宣伝やお知らせ用にFacebookページを作っておられるので、そういったイベントの時に名刺代わりにFacebookページにアクセスできるQRコードの入ったカードやチラシを配って「いいね！」を獲得しようというのはとても良い試みだと思います！
ただし・・・

そのQRコードでは「いいね！」してもらえませんよ？

正確には「一部の人」は、いいね！したくても、すぐにはできません。
どれくらいの人が該当するかはちょっとわからないですが、少なからず機会損失になることは間違いないです。

何言ってんだこいつ・・・

そう言わずに続きを聞いて下さいねｗ

貴重な「インフルエンサー」を逃すな！

ウィルスの「インフルエンザ」とは違いますw
インフルエンサーとは、簡単に言うと「情報が広まるきっかけとなりうる人」の事です。

「あの人に知られたら次の日には地域全員に知られちゃう…」近所にそんなオバちゃんいませんか？w
FacebookなどのSNSにもそのような情報を意図的にしろ無意識にしろ拡散する中心人物というのが存在します。それがインフルエンサーです。

先ほど僕は「少なからず機会損失になる」と言いましたが、もし逃したのがこのインフルエンサーとなれば機会損失の規模はもう考えたくもありませんw
なので、趣味とかならばそれでもいいですが、商売としての集客、顧客獲得の手段としてFacebookページを運営し、イベントなどでQRコードを配布するのであれば是非この記事を参考にしていただきたいです！

スマホユーザーがターゲット！

イベントの会場でQRコードを配っている時点で完全にスマホユーザーがターゲットですよね！それに「あとからいいね！しときますねｗｗ」って人はだいたい家に帰る頃には忘れていいねしてくれないか、忘れたころにしかしてくれませんｗ

そのためにスマホでQRコードをその場で読み取ってその場で「いいね！」してほしいですよね！そのためにもこれから書くことを頭に入れておく必要があります！

2つのQRコードを用意しました。

実際に例をお見せした方が早いと思いますので下にQRコードを2つ用意しましたので、手元にスマホがある方はそれぞれを読み取ってみてください。
機種や個々の設定にもよりますが、おそらくこの2つのQRコードを読み取った時、それぞれの挙動の違いに気づいていただけるはずです。

ちなみに今回用意した2つのQRコードのジャンプ先は、どっちも僕が個人で運営管理する「天草市安心・安全メールサービス」の公認非公式Facebookページです。怪しいページではないので安心して読み取って下さい。（もちろん「いいね！」していただいても構いませんよ？ｗ）

①おそらく多くの方が作るであろうQRコード

②これから作っていただきたいQRコードの例

さて、この2つの違いわかりましたか？ｗ
それでは詳しく解説していきますね＾＾

①のQRコードはスマホのブラウザが開く

そりゃそうです。FacebookページのURLをQRコードにしてるので、それがブラウザで開くのは当然といえば当然ですよね。

ブラウザとは、パソコンで言うところのInternet ExplorerとかGoogle Chromeのようにインターネットを閲覧するソフトのことです。
Androidスマホだと標準「ブラウザ」やPCと同じくGoogleの「Chrome」、iPhoneだと「Safari」がそうですね。

そして、人によってはこの①のQRコードでも何の支障も感じない「何言ってんだ、全然大丈夫じゃないかｗｗ」っていう人も居たはずです。それは・・・

予めブラウザでFacebookにログイン済みの人

そうです。過去に何らかのキッカケや必要に迫られてブラウザでFacebookにログインしたことがあり、ログイン状態のままの人は、①のQRコードを読み取ってもなんら支障なくFacebookページが開き、すぐに「いいね！」ができると思います。

それではブラウザでFacebookにログインしていない人が①のQRコードを読み取ったとしたらどうでしょうか？
おそらくこのようになると思います↓（左がQRコードを読み取って表示された画面。右がこの状態で「いいね！」しようとしたら表示される画面。）
未ログインの人がアクセスした場合

さぁ、想像してみてください。
あなたは今イベント会場に居ます。いろんなブースを眺めていると、出店者さんから「よかったら、いいね！お願いします＾＾」とFacebookページのQRコードが付いたチラシを渡されました。
ちょっと気になった出店者さんだったので「いいね！」しようとスマホでQRコードを読み取りました。しかし出てきたのはこの画面です。いいねするためにはメールか電話番号とパスワードを入力してログインする必要があります。

はたして、この状況でこの場でログインして「いいね！」を押してくれる人が何人いるでしょうか？
他にも見たいブースはたくさんあります。お子さんや家族、友達と一緒に来ていて待たせているかもしれません。なにより「いいね！」しなくても死にはしませんｗ
そうなれば結果はこうです。

あとで家に帰ってからやればいいやｗ

はい！皆さん、これ絶対やらない流れですよおおおおおお！！！ｗｗｗｗ

何が問題だったのか

それは「普段どのような環境でFacebookをしているか」という点です。

おそらく多くの人は「パソコンではブラウザ」で、「スマホでは専用のアプリ」でFacebookをしているのではないでしょうか？
なのでQRコードはブラウザでFacebookにログインしていないスマホユーザーが居る事を前提に作る必要があります。

そこで②のようなQRコードの作り方をします。

ブラウザではなくFacebookアプリを起動する呪文を仕込む

この呪文、名前を「URLスキーム」といいますが、それを説明すると長くなるのでここでは「呪文」と覚えておいて下さいｗ

自動転送ページを挟む

本来ならこの呪文をQRコードに直接埋め込むところですが、この呪文をうまく読み込めないQRコードリーダーがあることと、Facebookのアプリをインストールせず、スマホのブラウザでやっている人が少なからず居るという可能性も考えないといけないので、

「自動でFacebookアプリが起動する」
「何らかの原因で自動で起動しなかった時のための手動起動リンク」
「アプリをインストールしてない人はブラウザで開く」

というページを1つ挟むことによってこれを解決します。

Webページを作る

あ、Webページを作るっていっても、テンプレート（HTMLファイル1個）のダウンロードリンク用意したんでそんなに構えなくていいですよ＾＾

▶テンプレートをダウンロード

テンプレートのHTMLの中身はこんな感じになっています。最小限必要な記述はたったこれだけです。
ダウンロードしたテンプレートを適当にメモ帳かなんかで開いてご自分に合った設定にいじっていきます。

<html>

<head>

<meta name="robots" content="noindex">

<!-- ↓の「URL=」のうしろにFacebookページをアプリで開く呪文を仕込みます。 -->

<meta http-equiv="refresh" content="0;URL=fb://profile/※※※FacebookページのID※※※">

<!-- ↑のFacebookページのIDの調べ方は「http://itbu.kataranna.com/e80540.html」を参考に。 -->

<title>Facebookアプリが起動します。</title>

</head>

<body>

Facebookアプリが起動します。<br>

自動で起動しない場合は<a href="fb://profile/※※※FacebookページのID※※※">こちらをタップ</a>してください。<br><br>

Facebookアプリをインストールしていない人は→<a href="※※※FacebookページのURL※※※">ブラウザで開く</a>。

</body>

</html>

これ見ただけで「ああ、なるほどね♪」って分かる人はご自分に合うようにいじって適当なサーバーかDropboxなんかにアップロードして、そのアップロード先のURLでQRコード作れば出来上がりなんでテキトーにやって下さい＾＾

見ただけでわからない人向けに解説していきます。といってもいじる場所は3箇所だけです。

Facebookアプリを開く呪文をいじる

まずこの2箇所ですね。

<meta http-equiv="refresh" content="0;URL=fb://profile/※※※FacebookページのID※※※">

自動で起動しない場合は<a href="fb://profile/※※※FacebookページのID※※※">こちらをタップ</a>してください。

この「※※※FacebookページのID※※※」の部分に、QRコードを読み取った時に表示したいFacebookページのIDを記述します。

ご自身のFacebookアカウントや、Facebookページには個々にIDが振り分けられています。
ちなみに天草市安心・安全メールサービスのFacebookページのIDは「1614121002160948」なので、Facebookアプリ起動の呪文は

<meta http-equiv="refresh" content="0;URL=fb://profile/1614121002160948">

となります。

FacebookのIDの確認方法については別に記事を書いてますのでこちらを参考にして下さい。

▶自分のFacebookやFacebookページのIDの調べ方

FacebookページのURLを入力

これはたぶん問題ないですね＾＾
「※※※FacebookページのURL※※※」の部分にFacebookページのURLを入力してください。

ここが、普段ブラウザでFacebookをやっている人、スマホにFacebookアプリをインストールしていない人向けのリンクになります。

あとはお好みで！

HTMLやCSSの知識のある人は文章を変えるなり、文字の大きさを変えるなり、色を変えるなり、画像を入れるなりお好みでカスタマイズしてみてください。
あとお好みついでに、テンプレートの「;URL」の前が「0」となっている部分を例えば「5」に変えると「5秒後」にFacebookアプリが起動するなんていう設定にもできますよ＾＾

<meta http-equiv="refresh" content="0;URL=fb://profile/※※※FacebookページのID※※※">

このページで何かメッセージを読ませたい場合にはそのような設定もありかもしれませんね＾＾

これでページができました。あとはこれを何処かにアップロードしてそのURLでQRコードを作れば完了です。

どこにアップロードしよう…(;´Д｀)

サーバーとか借りてホームページとか持たれてる人はそこにアップロードすればいいでしょうけど、中にはホームページの代わりにFacebookページを運用してる方もいますよね。
せっかくFacebookページが無料で作れるのにQRコードを作るだけのために有料のサーバーを借りてどうのこうのってのはナシでしょうｗ

「Dropbox（ドロップボックス）」を使いましょう。

オンラインストレージの代名詞といってもいいくらい有名なんで名前くらい聞いたことありますかね。実際に使っている人も多いと思います。
Dropboxは今回のようにファイルを「Public」フォルダにアップロードして、その公開URLをホームページのように使う事ができます。
すでに利用している人はDropboxの「Public」フォルダにアップロードして公開URLでQRコードを作りましょう。

【追記：2016年9月2日】
上記のようなDropboxの公開URLをホームページのように使用する方法は2017年9月1日から使用不可となります。
HTMLレンダリングのできる他のクラウドストレージを使用するか、サーバーを借りる必要があります。

まだDropboxを使っていない人へ

大変便利なサービスなのでこの機会に使ってみてはいかがでしょうか？
下のリンクからDropboxに登録すると500MBの招待ボーナス容量がもらえます。是非ご利用下さい。

▶Dropboxに登録（500MB招待ボーナス付き）

なんやかんやでURLができました。

今回は僕もDropboxのPublicフォルダにHTMLファイルをアップロードしましたので下のようなURLができました。
スマホでご覧の方は下のURLをタップすだけでここまで説明してきた挙動をするはずです。PCでご覧の方や、スマホにFacebookのアプリをインストールしていない方は「ブラウザで開く」をクリックするとブラウザでFacebookページが開くと思います。

▶https://dl.dropboxusercontent.com/u/11540862/facebook_page_redirect.html
※2017年9月1日より使用できなくなります。

んで、できたQRコードがこちら

読み取ってみると、スマホの機種や設定によっては開くブラウザやアプリを聞かれたり、「このページをFacebookアプリで開くけどいいかい？」的なメッセージがポップアップするかもしれませんが「開く」をタップするだけなので、ブラウザでFacebookにログインする手間を考えれば気にするまでの挙動ではないと思います。

この方法だと、もう一つ利点があります。

それは、先ほど作ったページのHTMLをどんなにいじっても、そのDropboxにアップロードしたページの公開URLは変わらないということです。

どういう事かというと、何かの事情で万が一Facebookページを新しく作りなおしたりした場合、当然同じFacebookページのURLは取得できませんのでURLが変わるということになります。
そうなると、QRコードも作りなおさなければなりません。そして、今まで配ったチラシやポスター、販促物に印刷したQRコードも全部無効になってしまいます。

しかし、今回のような作り方をしていると、HTML内のFacebookページのIDやURLを書き換えるだけで、Dropboxの公開URLは変わりません。っということは、今のQRコードがそのまま使えるということになりますよね＾＾

さいごに

いかがだったでしょうか？実はこのようなことを考えてQRコードを作っている方はIT従事者でも少ないです。むしろIT従事者の方がブラウザでのFacebookログイン率は高いでしょうからどうしても気づきにくい点です。

ちょっとした手間のかかる小ワザでしたが、あなたのFacebookページへの「いいね！」率をきっと高めてくれると思いますよ＾＾

それでは最後まで読んでいただきありがとうございました！
今回のような小ワザをもっと知りたいと思った方は是非「天草IT部」へ！！！
Facebookグループへの参加申請、お待ちしております！！！

ちなみにFacebookグループ「天草IT部」販促用のこのカードに記載されているQRコードも、今回の記事と同じ仕様になっています＾＾
天草IT部カード

Facebookグループ「天草IT部」

同じカテゴリー（小ワザ）の記事

ゴールデンウィーク中の休業、営業予定の告知はお済みですか？(2017-04-22 09:30)

『BASE（ベイス）』の商品ページにリンクが貼れるようになってた！これは神アップデート！(2017-04-21 14:22)

天草Webの駅の投稿をシェアされやすく、訪問されやすくする方法！【中・上級者向け／OGP画像設定】(2016-12-06 17:36)

【アクセスUP！】過去記事をテコ入れしてみませんか？【SEO対策】(2016-06-30 16:06)

自分のFacebookやFacebookページのIDの調べ方(2015-10-12 17:40)

│Comments(4)

この記事へのコメント

タイムラインが読み込めませんと表示されてしまいます。

サノ 2016年10月04日 09:37

サノさん、コメントと不具合のご報告ありがとうございます。

再度動作を検証したのですが、こちらの環境では「タイムラインが読み込めません」といった現象が再現できず、正常に動作している状態です。

もしよろしければお使いの携帯電話の「機種」「OS」「QRコード読み取りに使用しているアプリ」「ブラウザ」などの詳細な情報をご報告ください。

サノさんが使用されている環境をこちらで用意できない場合は検証が難しく、ご期待に添えない場合がありますのでその際はご容赦ください。

いずれにしてもそういった現象が起こりうるという事実は、検証後に記事の方にも追記する予定です。
この度はご報告ありがとうございました。

天草IT部の中の人

2016年10月06日 07:37