2016-12-14 17 views
8

Próbuję zaimplementować nową wtyczkę Checkbox Facebooka w formularzu, ale w dziwny sposób nie mogę tego wyświetlić na ekranie. Nie dostaję błędów po stronie klienta, ale element iframe jest ukryty.plugin na klawiaturze Facebook messenger jest ukryty

Oto uproszczony przykład kodu:

<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> 

Brak błędów w konsoli dev. Tylko rejestruje, że wtyczka jest ukryta:

Screenshot of dev console message

+0

Czy przeglądałeś w konsoli programistów przeglądarki? Co to mówi? – WizKid

+0

Brak błędów w konsoli programisty.Dodałem zrzut ekranu dzienników stanu do posta. – Stefanvdk

Odpowiedz

3

Facebook updated ich docs:

Wtyczka internetowa przyjmuje parametr user_ref który jest używany jako identyfikator dla użytkownika . Kiedy użytkownik zakończy przepływ, przekażemy ten identyfikator z powrotem, aby zidentyfikować użytkownika. Ten parametr powinien być unikalny nie tylko dla każdego użytkownika, ale za każdym razem, gdy wtyczka jest renderowana. Jeśli parametr nie jest unikalny, wtyczka może się nie wyświetlać.

Musisz wygenerować nowy user_ref dla każdego pojedynczego renderowania wtyczki checkbox.

kontrolna wyświetlanie CheckBox wtyczki

  • użytku produkcyjnego identyfikator aplikacji (nie testu jeden)
  • zawsze ponownie user_ref
  • whitelist domena w origin
  • użycia właściwej Protokołu origin - http/https
0

Spróbuj zmienić user_ref. Miałem ten sam problem. Następnie odkryłem (przez przypadek), że po wybraniu użytkownika Facebooka pole wyboru będzie ukryte, dopóki nie prześlesz innego elementu user_ref. (Nawiasem mówiąc, to nie jest dokument.)

+0

Dzięki, wydaje się, że to rozwiązało problem! Teraz mam problemy z renderowaniem, ponieważ nie mogę wygenerować liczby losowej w JS i umieścić ją jako wartość atrybutu user_ref w elemencie wtyczki. Jakieś wskazówki? – Stefanvdk

+0

Mam to działa teraz z PHP zamiast JS. W porządku, teraz, dzięki za odpowiedź! – Stefanvdk

+0

@Stefanvdk to możliwe udostępnienie fragmentu kodu php. –

4

Witam Próbuję to zaimplementować i uzyskać ten sam stan Ukryty w konsoli.

Czy twój jest ukryty do momentu potwierdzenia przez użytkownika opcji Zezwalaj lub czy pole wyboru jest widoczne na stronie internetowej?

Dzięki, Phil

+0

To pole wyboru jest widoczne po załadowaniu strony. Kiedy mówisz, że to zaimplementowałeś, co masz na myśli? Czy mógłbyś udostępnić kod pls? – Stefanvdk

+0

@Stefanvdk Tak, oto mój kod, nie mogę publikować zbyt długo! –

+0

Myślę, że coś poszło nie tak, ponieważ nie widzę kodu. Czy możesz spróbować ponownie go udostępnić? – Stefanvdk

0

Oto kod @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> 
+0

Dzięki za udostępnienie! Sprawdziłem twój kod, ale nie mogę znaleźć, co jest nie tak. Odwiedziłem Twoją witrynę i mogłem zobaczyć, że identyfikator użytkownika jest inny za każdym razem, więc nie obawiam się. – Stefanvdk

+0

Mam ten sam problem, już próbował wygenerować losowy identyfikator użytkownika, ale jako Phil, problem nadal trwa. Czy masz jakieś inne rozwiązanie tego problemu? Dzięki –

1

Rozwiązany: Problem z Plugin was hidden jest spowodowany tym, że aplikacja komunikatora znajduje się w trybie programowania i dlatego po wylogowaniu z FB pole wyboru nie pojawi się na stronie i będzie ukryte, ponieważ nie ma autoryzowanego użytkownika sesja. Ale kiedy zalogowałeś się na FB jako programista, właściciel, tester aplikacji, to pole wyboru pojawi się na stronie, ponieważ istnieje autoryzowana sesja.

Powiązane problemy