Facebook messenger複選框插件隱藏

我試圖在窗體中實現新的Facebook複選框插件，但以一種奇怪的方式，我無法讓它顯示在屏幕上。所以我不會在客戶端出錯，但Iframe被隱藏。Facebook messenger複選框插件隱藏

下面的代碼的一個簡單的例子：

<html> 
<head> 
<script> 
    window.fbAsyncInit = function() { 
     FB.init({ 
      appId  : '1815704925309469', 
      xfbml  : true, 
      version : 'v2.6' 
     }); 

     FB.Event.subscribe('messenger_checkbox', function(e) { 
      console.log("messenger_checkbox event"); 
      console.log(e); 

      if (e.event == 'rendered') { 
       console.log("Plugin was rendered"); 
      } else if (e.event == 'checkbox') { 
       var checkboxState = e.state; 
       console.log("Checkbox state: " + checkboxState); 
      } else if (e.event == 'not_you') { 
       console.log("User clicked 'not you'"); 
      } else if (e.event == 'hidden') { 
       console.log("Plugin was hidden"); 
      } 
     }); 
    }; 

    (function(d, s, id){ 
     var js, fjs = d.getElementsByTagName(s)[0]; 
     if (d.getElementById(id)) {return;} 
     js = d.createElement(s); js.id = id; 
     js.src = "//connect.facebook.net/en_US/sdk.js"; 
     fjs.parentNode.insertBefore(js, fjs); 
    }(document, 'script', 'facebook-jssdk') 
    ); 

    function confirmOptIn() { 
     FB.AppEvents.logEvent('MessengerCheckboxUserConfirmation', null, { 
      'app_id':'1815704925309469', 
      'page_id':'1711063052543482', 
      'ref':'shopping-cart-company', 
      'user_ref':'1234' 
     }); 
    } 
</script>  

<div class="col-md-7"> 
    <div class="fb-messenger-checkbox" 
     origin=https://shopping-cart-company.herokuapp.com/index.html 
     page_id=1711063052543482 
     messenger_app_id=1815704925309469 
     user_ref="1234" 
     prechecked="true" 
     allow_login="true" 
     size="large"> 
    </div> 
</div> 

<body> 
    <input type="button" onclick="confirmOptIn()" value="Confirm Opt-in"/> 
</body>

有在開發者控制檯中沒有錯誤。僅記錄插件隱藏：

來源

2016-12-14 Stefanvdk

你看過瀏覽器開發者控制檯嗎？它說什麼？ – WizKid

開發控制檯中沒有錯誤。我添加了狀態日誌的屏幕截圖到帖子 – Stefanvdk

Facebook的更新他們的docs：

腹板插件需要其被用作對用戶的標識符的user_ref參數。當用戶完成流程時，我們會將此標識符傳回給您以標識用戶。該參數應該是唯一的，不僅適用於每個用戶，而且每次渲染插件時都是如此。如果該參數不唯一，那麼該插件可能無法呈現。

您必須爲複選框插件的每個渲染生成一個新的user_ref。

清單顯示覆選框插件

~~使用生產應用ID（未測試的）~~
總是再生user_ref
白名單中origin
使用正確的協議域在origin - http/https

來源

2017-07-04 15:42:04 zatziky

試着改變user_ref。我遇到了同樣的問題。然後我發現（偶然），一旦Facebook用戶選擇加入，複選框將被隱藏，直到您提交一個不同的user_ref。（順便說一句，這是無處可去的。）

來源

2016-12-20 14:40:13 Sskirch

謝謝，這似乎解決了問題！所以現在我遇到了渲染問題，因爲atm我無法在JS中生成一個隨機數，並且將它作爲插件元素中的user_ref屬性值。任何提示？ – Stefanvdk

我現在用PHP代替了JS。現在好了，謝謝你的回答！ – Stefanvdk

@Stefanvdk是否有可能分享您的PHP代碼段。 –

嗨我試圖實現這一點，並在控制檯中獲得相同的隱藏狀態。

直到用戶確認選擇加入網頁或者是網頁加載時可見的複選框，您的網頁纔會隱藏嗎？

謝謝，菲爾

來源

2017-01-11 11:52:08

當網頁加載時，該複選框可見。當你說你實施了這個，你究竟是什麼意思？你能分享代碼嗎？ – Stefanvdk

@Stefanvdk是的，這裏是我的代碼，不能發佈太久！ –

我認爲出現了問題，因爲我看不到代碼。你可以試着再分享一次嗎？ – Stefanvdk

下面的代碼@Stefanvdk

<script> 
window.fbAsyncInit = function() { 
    FB.init({ 
     appId  : '341168946244551', 
     xfbml  : true, 
     version : 'v2.6' 
    }); 

    FB.Event.subscribe('messenger_checkbox', function(e) { 
     console.log("messenger_checkbox event"); 
     console.log(e); 

     if (e.event == 'rendered') { 
      console.log("Plugin was rendered"); 
     } else if (e.event == 'checkbox') { 
      var checkboxState = e.state; 
      console.log("Checkbox state: " + checkboxState); 
     } else if (e.event == 'not_you') { 
      console.log("User clicked 'not you'"); 
     } else if (e.event == 'hidden') { 
      console.log("Plugin was hidden"); 
     } 
    }); 
}; 

(function(d, s, id){ 
    var js, fjs = d.getElementsByTagName(s)[0]; 
    if (d.getElementById(id)) {return;} 
    js = d.createElement(s); js.id = id; 
    js.src = "//connect.facebook.net/en_US/sdk.js"; 
    fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk') 
); 

function confirmOptIn() { 
    FB.AppEvents.logEvent('MessengerCheckboxUserConfirmation', null, { 
     'app_id':'341168946244551', 
     'page_id':'238619342849536', 
     'ref':'shopping-cart-company', 
     'user_ref':'<?=$random_val?>' 
    }); 
} 
</script>  

<?php $random_val=rand(100000,999999);?> 

<div class="fb-messenger-checkbox" 
origin=https://stablevehiclecontracts.co.uk/checkbox3.php 
page_id=238619342849536 
messenger_app_id=341168946244551 
user_ref="<?=$random_val?>" 
prechecked="true" 
allow_login="true" 
size="large"> </div>

來源

2017-01-18 11:14:59

感謝您的分享！我看着你的代碼，但無法找到問題所在。我訪問了你的網站，可以看到你的user_id每次都不一樣，所以不是我害怕的。 – Stefanvdk

我有同樣的問題，已經嘗試生成隨機用戶ID，但作爲菲爾，問題仍然存在。你有解決這個問題的其他解決方案嗎？謝謝 –

解決：問題Plugin was hidden是因爲messenger應用程序處於開發模式，這就是爲什麼當你從FB註銷時，複選框將不會顯示在頁面上，並且它將被隱藏，因爲沒有授權用戶會話。但是，作爲應用程序的開發人員，所有者和測試人員，您已經登錄FB，然後該複選框將顯示在頁面上，因爲那時存在授權會話。

來源

2017-12-20 12:07:49 callmejoejoe

Facebook messenger複選框插件隱藏

回答

相關問題