Skip to content

建立IG QRCode或連結開啟後自動打開 APP或網頁

Tags:

公司最近參展要拓展市場想請客戶追蹤IG及FB,現場提供Qrcode給客戶進行掃描,掃描後都是開啟網頁後,客戶往往都沒有登入網頁版的IG或FB,需要再進行登入這使用體驗讓客戶都想放棄追蹤了。

對於事後檢討流程時,發現市面上的跳轉工具不是非常緩慢須等個5~15秒,不然就是跳轉過去後未安裝APP的就直接掛在那邊,對於行銷人員推廣或是使用者體驗都非常差勁。

決定直接寫一段專用的跳轉程式碼,來達成以下幾種況狀:

  • 手機掃描
    • 未安裝 Instagram APP 的 > 自動開啟 Instagram 網頁並帶向指定頁面。
    • 有安裝 Instagram APP> 自動開啟Instagram APP 並帶向指定頁面。
  • 電腦開啟連結或掃描
    • 自動開啟 Instagram 網頁並帶向指定頁面。

方案一、直接使用以下連結(推薦)

如果沒有網站的也沒關係,小編提供託管全球CDN上的跳轉頁面,免費協助各位在創業可以更快速的建立粉絲團及追蹤數喔。

https://www.cjkuo.net/q/ig.html?ig=<你的IG ID>

<!-- 範例-->
https://www.cjkuo.net/q/rd.html?ig=kuo4j

取得連結後可用 Qrcode 的產生網站,來建立適合企業的 QRcode 樣式,讓客戶不管是實際來訪或線上點選時都可以快速的產生互動喔!!

方案二、想自行託管程式碼並且有主機的人

請在主機上建立一個html檔案,這裡的範例取名為 ig.html,並把下列程式碼貼入檔案中。

<!DOCTYPE html>
<html>

<head>
  <title>自動跳轉IG頁面</title>
</head>

<body>
  <p><a class="list"></a></p>
  <p><a class="list2"></a></p>
  <p style="text-align:center">Power by <a href="https://www.cjkuo.net/">cjkuo.net</a></p>
  <script>
    let igURL = new URLSearchParams(document.location.search);
    var username = igURL.get("ig");
    var el = document.querySelector(".list");
    var el2 = document.querySelector(".list2");
    if (username !== null) {
      var beforeTime = Date.now();
      if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
        window.location = "instagram://user?username=" + username;
      } else if (/(Android)/i.test(navigator.userAgent)) {
        window.location = "instagram://user?username=" + username;
      } else {
        window.location = "https://instagram.com/" + username;
      }
      var link = "https://instagram.com/" + username;
      var text = '<img alt="IG" src="https://img.icons8.com/clouds/150/000000/instagram.png" style="display:block; margin:auto;" loading="lazy">';
      el.innerHTML = '<a href="' + link + '">' + text + "</a>";
      el2.innerHTML = '<h1 style="text-align:center">將自動開啟 Instagram</h1> <p style="text-align:center">如果沒有自動開啟請點擊透上方圖示開啟</p>'
      setTimeout(function() {
        var afterTime = Date.now();
        if (beforeTime - afterTime < 2000) {
          window.location = "https://instagram.com/" + username;
        }
      }, 100);
    } else {
      var link = "https://instagram.com/";
      var text = '<img alt="IGG" src="https://img.icons8.com/clouds/150/000000/instagram.png" style="display:block; margin:auto;" loading="lazy">';
      el.innerHTML = '<a href="' + link + '">' + text + "</a>";
      el2.innerHTML = '<h1 style="text-align:center">未帶入正確參數</h1> <p style="text-align:center">系統不會自動跳傳至指定頁面</p>'
    }
  </script>
</body>

</html>

接下來就是最簡單的部分了,把您的IG帳號填入下方連結中

https://你的網域/ig.html?ig=<你的IG ID>

<!-- 範例-->
https://www.cjkuo.net/ig.html?ig=kuo4j
## 上面連結僅供示範,此連結為無效連結
##如需使用請參考範例一

最後一樣可以根據需求前往產生 QRcode 的網站,建立專屬的QRcode喔

正常運作圖示

在運作正常的情形下進入跳轉頁面後,會在2秒內引導至正確頁面。

錯誤排除

如果URL中的參數輸入錯誤會顯示以下圖示,請修正後再嘗試一次。

工商時間

企業或個人用戶在使用腳本有需要提供以下客製化協助,如跳轉頁面增加Google Analytics強化追蹤數據、企業網域託管、客制化跳轉頁面及協助安裝腳本等等服務,都歡迎詢問及洽談。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。