指定臉書頁面掃描 QR Code 導向問題

臉書 id qrcode

ddovwmk 2024-10-05 13:11:53 ‧ 917 瀏覽

分享至

請問一下，因個人使用網路上工具邦工具，QR Code 產生器，製作QR Code圖示後，掃QR Code時後，它會自動導向手機那個app軟體可以開啟臉書，但問題來了，每次掃描時，都會有「工具邦技術提供字眼，請問有什麼辦法說，可以有這樣的功能然後，不要有不相關字眼。

之前有一位老師幫我處理後，但現在就是說，若我現有要特定臉書頁面，我有辦法查詢臉書頁面的ID，然後如上說明情形，如何克服這樣的狀況？
https://www.facebook.com/freedisabled2.0/posts/pfbid02ak9uMH9ihMrPgy4RFSfFentBbJv4B5wwwd4UoyxZCDcWgLo3svo9CaAmpLDzu4AUl
這是如上網址ID：61559621064110

如下網址是之前那位網址幫我製作的好指令，套用如下指令，好像行不通，指令好像只有指定臉書而以，指令不能指定臉書特定頁面。
https://github.com/yycking/FacebookLink/blob/main/index.html

看更多先前的討論...收起先前的討論...

hanktw iT邦新手 5 級 ‧ 2024-10-06 09:18:23 檢舉

你可以使用 Facebook URL schemes

假設你要打開特定頁面的特定貼文，貼文的 URL 是：
https://www.facebook.com/freedisabled2.0/posts/pfbid02ak9uMH9ihMrPgy4RFSfFentBbJv4B5wwwd4UoyxZCDcWgLo3svo9CaAmpLDzu4AUl

你可以將它轉換成：
fb://facewebmodal/f?href=https://www.facebook.com/freedisabled2.0/posts/pfbid02ak9uMH9ihMrPgy4RFSfFentBbJv4B5wwwd4UoyxZCDcWgLo3svo9CaAmpLDzu4AUl

ddovwmk iT邦新手 4 級 ‧ 2024-10-06 14:03:54 檢舉

請問一下，要如何轉換成？

hanktw iT邦新手 5 級 ‧ 2024-10-20 09:54:02 檢舉

要修改程式碼 function openFacebook() 內容
```
if (isIOS) {
window.location = 'fb://page/?id=' + id
}

const isAndroid = osPattern('Android');
if (isAndroid) {
window.location = 'fb://page/' + id
}
```
這段要調整
可以設計網址用 url para 去放指定貼文
ex. https://your_url?href={{post_url}}

如果是手機就把使用者導向
fb://facewebmodal/f?href={{post_url}}

ddovwmk iT邦新手 4 級 ‧ 2024-10-20 13:56:09 檢舉

大師，您可以製作一個範本給我參考嗎？

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

hanktw

iT邦新手 5 級 ‧ 2024-10-22 08:51:50

完整範例程式碼如下網址
https://gist.github.com/HankKuTW/fb6f55bcb8abc0c3571e2909cce01b73

根據使用者的設備（iOS、Android 或桌面）自動將其導向到指定的 Facebook 貼文。

功能

使用 URL 中的 href 參數來動態指定要導向的 Facebook 貼文 URL。
iOS 和 Android 手機用戶會被導向到 Facebook App
其他設備會導向到 Facebook 的網頁版貼文。

使用方法

部署這個 HTML 檔案到你的網站。
在瀏覽器中使用以下格式的 URL：
```
https://your_url?href={{post_url}}
```
- {{post_url}} 需替換為 Facebook 貼文的實際 URL。

邏輯

應用會從網址的 href 參數中讀取 Facebook 貼文的 URL。
如果使用者是 iOS 或 Android 設備，會使用 fb://facewebmodal/f?href={{post_url}} 做為導向網址
如果是桌面瀏覽器，將使用者導向到 post_url
若未提供 href 參數，顯示錯誤訊息提示。

程式碼

getUrlParameter(name)：從網址中取得指定的參數。
osPattern(pattern)：檢查使用者的設備是 iOS、Android 還是桌面。
openFacebook()：根據設備類型執行導向。

回應 2
分享
檢舉

ddovwmk iT邦新手 4 級 ‧ 2024-10-22 19:33:56 檢舉

     function getUrlParameter(name) {
       const urlParams = new URLSearchParams(window.location.search);
       return urlParams.get(name);
     }
     
     function openFacebook() {
       const postUrl = getUrlParameter('href');
       if (!postUrl) {
         alert('No post URL provided');
         return;
       }
       
       const isIOS = osPattern('\\biPhone.*Mobile|\\biPod|\\biPad|AppleCoreMedia');
       if (isIOS) {
         window.location = 'fb://facewebmodal/f?href=' + encodeURIComponent(postUrl);
       }
     
       const isAndroid = osPattern('Android');
       if (isAndroid) {
         window.location = 'fb://facewebmodal/f?href=' + encodeURIComponent(postUrl);
       }
     
       setTimeout(function () {
         window.location = postUrl;
       }, 1);
     }
     
     (function () {
        setTimeout(function () {
         openFacebook();
       }, 1);
     })();
  </script>

<html>
   <head>
https://your_url?href={{https://www.facebook.com/freedisabled2.0/posts/pfbid0258BN2HVGzHSqVPuXZmoUCQdQbNksSQYF1pW8HqXufKr1rG9V8RLruYPWypqTnm6sl}}
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Facebook Post Link</title>
      <style>
         body {
         display: flex;
         flex-direction: column;
         justify-content: center;
         min-height: 100vh;
         }
         a {
         margin: auto;
         }
         svg {
         height: 300px;
         }
         .logo {
         animation: appear 1s ease-out forwards;
         }
         @keyframes appear {
         0% {
         transform: scale(0) rotate(-180deg);
         opacity: 0;
         }
         60% {
         transform: scale(1.2) rotate(10deg);
         opacity: 1;
         }
         80% {
         transform: scale(0.9) rotate(-10deg);
         }
         100% {
         transform: scale(1) rotate(0deg);
         }
         }
      </style>
      <script>
         function osPattern(pattern) {
           return new RegExp(pattern, 'i').test(navigator.userAgent) ? true : false;
         }
         
         function getUrlParameter(name) {
           const urlParams = new URLSearchParams(window.location.search);
           return urlParams.get(name);
         }
         
         function openFacebook() {
           const postUrl = getUrlParameter('href');
           if (!postUrl) {
             alert('No post URL provided');
             return;
           }
           
           const isIOS = osPattern('\\biPhone.*Mobile|\\biPod|\\biPad|AppleCoreMedia');
           if (isIOS) {
             window.location = 'fb://facewebmodal/f?href=' + encodeURIComponent(postUrl);
           }
         
           const isAndroid = osPattern('Android');
           if (isAndroid) {
             window.location = 'fb://facewebmodal/f?href=' + encodeURIComponent(postUrl);
           }
         
           setTimeout(function () {
             window.location = postUrl;
           }, 1);
         }
         
         (function () {
            setTimeout(function () {
             openFacebook();
           }, 1);
         })();
      </script>
   </head>
   <body>
      <a href="javascript:openFacebook()">
         <svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#1877F2" role="img" aria-label="Facebook logo">
            <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
         </svg>
      </a>
   </body>
</html>

修改

hanktw iT邦新手 5 級 ‧ 2024-10-23 09:29:28 檢舉

實際執行可參考以下連結喔

https://poku1010.github.io/fb-share/index.html?href=https://www.facebook.com/freedisabled2.0/posts/pfbid0258BN2HVGzHSqVPuXZmoUCQdQbNksSQYF1pW8HqXufKr1rG9V8RLruYPWypqTnm6sl

登入發表回應