Facebook page follow not working when using facebook code directly

Facebook page follow not working when using facebook code directly

Hello,
I have an issue that confuses me.
I have set up a newsletter subscription form (you can test it here https://accademiainfinita.it/index.php? … sletter-4)

the form is set to display youtube and facebook page follow button after the user subscribes

I tried several solutions but the Facebook page follow button never shows up, only the Youtube button is being displaied

First I grabbed the facebook page follow code from facebook directly

the javascript

<div id="fb-root"></div>
<script>(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/it_IT/sdk.js#xfbml=1&version=v2.10&appId=468818456633207";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


and the html

<div class="fb-follow" data-href="https://www.facebook.com/accademiainfinita" data-layout="standard" data-size="small" data-show-faces="true"></div>

but the button was not showing up,
then I looked at the source page code and noticed this code right after the <body> tag

<script type="text/javascript">
 
  window.fbAsyncInit = function() {
    FB.init({version: 'v2.5',appId: '468818456633207', status: false, cookie: true, xfbml: true});
FB.Event.subscribe('comment.create', jfbc.social.facebook.comment.create);
FB.Event.subscribe('comment.remove', jfbc.social.facebook.comment.remove);
FB.Event.subscribe('edge.create', jfbc.social.facebook.like.create);
FB.Event.subscribe('edge.remove', jfbc.social.facebook.like.remove);
  };
  (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/it_IT/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>


I guess this is being inserted by JFBConnect, maybe it's conflicting with the code I grabbed from facebook directly?
I noticed also that the 2 javascripts are different (the one JFConnect is inserting automatically and the one I grabbed from here https://developers.facebook.com/docs/pl … ow-button)

Anyway... I tried to insert the html without the javascript, only

<div class="fb-follow" data-href="https://www.facebook.com/accademiainfinita" data-layout="standard" data-size="small" data-show-faces="true"></div>

Then I tried to insert the JFBConnect snippet instead
{SCFacebookFollow href=https://www.facebook.com/accademiainfinita layout=standard show_faces=true}
it does not work (I guess because this is not a Joomla article where I am trying to insert the code?)

If you could help me understand what I am doing wrong, that would be appreciated!

Thank you

fb_1580132693
Niccolò
useravatar
Offline
62 Posts
Active Subscriptions:

Administrator has disabled public posting. Please login or register in order to proceed.

Re: Facebook page follow not working when using facebook code directly

Sometimes if you have multiple insertions of the javascript, it can cause conflicts. You should not need to add it to the page, as JFBConnect is already adding it.

Then I tried to insert the JFBConnect snippet instead
{SCFacebookFollow href=https://www.facebook.com/accademiainfinita layout=standard show_faces=true}
it does not work (I guess because this is not a Joomla article where I am trying to insert the code?)



This easy-tag looks correct to me. You should be able to insert it on any page on your site. It does not need to be in a Joomla article to render. So a few questions to narrow down the problem:
* In the JFBConnect backend > Social > Misc tab, do you have anything set for the 'Social Tag Admin Key' setting? If so, this will need to be included on the easy-tag as well like

Code:

{SCFacebookFollow href=https://www.facebook.com/accademiainfinita layout=standard show_faces=true key=xyz}

* Does the easy-tag get stripped out or does it still remain on the page when you try to add it?
* Could you add it to the page again and temporarily disable the JFBCSystem plugin to make sure the easy-tag is present on that page? Sometimes it's hard to know which layout file to add it to?
* Are there any errors on the Javascript console?
* Could you try temporarily adding the SCSocialWidget module to the page with provider Facebook and widget Follow button to see if it renders properly or has the same error?

Let me know how these suggestions work for you and we'll go from there.

-Melissa

Want to stay up-to-date on new releases and development efforts?
Follow us on Twitter @sourcecoast and @mandreae

mel
Melissa
useravatar
Offline
3582 Posts
Website 
Support Specialist
Administrator has disabled public posting. Please login or register in order to proceed.

Re: Facebook page follow not working when using facebook code directly

Hi Melissa,
thank you for your help!

* In the JFBConnect backend > Social > Misc tab, do you have anything set for the 'Social Tag Admin Key' setting?
No, there's nothing there

* Does the easy-tag get stripped out or does it still remain on the page when you try to add it?
It remains on the page, you ca test it here https://accademiainfinita.it/index.php? … wsletter-4

* Are there any errors on the Javascript console?
Yes
Uncaught ReferenceError: chronoforms_validation_signs is not defined
    at Object.success (index.php?option=com_chronoforms5&chronoform=iscrizione-newsletter-4:381)
    at j (jquery.min.js?d11fda0f6295d848286b87c7e0232a9e:2)
    at Object.fireWith [as resolveWith] (jquery.min.js?d11fda0f6295d848286b87c7e0232a9e:2)
    at x (jquery.min.js?d11fda0f6295d848286b87c7e0232a9e:4)
    at XMLHttpRequest.<anonymous> (jquery.min.js?d11fda0f6295d848286b87c7e0232a9e:4)

https://www.sourcecoast.com/images/agorapro/attachments/1880/mini_jfbc-connect-errors.png

* Could you try temporarily adding the SCSocialWidget module to the page with provider Facebook and widget Follow button to see if it renders properly or has the same error?
I did and the module works just fine

fb_1580132693
Niccolò
useravatar
Offline
62 Posts
Active Subscriptions:

Administrator has disabled public posting. Please login or register in order to proceed.

Re: Facebook page follow not working when using facebook code directly

Looking at the page, there are extra spaces in the easytags around the = and : signs, so we're not parsing out the parameters correctly.

Can you edit the article in the backend again and toggle the editor to just see raw HTML? Then remove the spaces, save and refresh on the frontend to see if the problem is resolved.

Code:

{SCFacebookFollow href = https: //www.facebook.com/accademiainfinita layout = standard show_faces = true} 

should be

Code:

{SCFacebookFollow href=https://www.facebook.com/accademiainfinita layout=standard show_faces=true}

-Melissa

Want to stay up-to-date on new releases and development efforts?
Follow us on Twitter @sourcecoast and @mandreae

mel
Melissa
useravatar
Offline
3582 Posts
Website 
Support Specialist
Administrator has disabled public posting. Please login or register in order to proceed.

Re: Facebook page follow not working when using facebook code directly

mmmh... strange, looks fine to me even looking at the source code
anyway I reinserted the code, this is the html code that get displaied once a user subscribes using that form

<p>Perfetto! Seguici anche sui social per non perderti nulla.</p>
<script src="https://apis.google.com/js/platform.js"></script>
<p>{SCFacebookFollow href=https://www.facebook.com/accademiainfinita layout=standard show_faces=true}</p>
<div class="g-ytsubscribe" data-channelid="UCFA_MpTAXg1XuNuVXFbeEqQ" data-layout="default" data-count="default">&nbsp;</div>

still not working though,
Thank you

fb_1580132693
Niccolò
useravatar
Offline
62 Posts
Active Subscriptions:

Administrator has disabled public posting. Please login or register in order to proceed.

Re: Facebook page follow not working when using facebook code directly

Could you try adding another easy-tag to the page to see if it gets rendered: {JFBCLogin}?
* If it adds the social login buttons then I think there may still be weird characters in there.
* If not, could you try ordering the JFBCSystem plugin before other system plugins on your site? Sometimes the timing of other plugins may interfere with our parsing.

-Melissa

Want to stay up-to-date on new releases and development efforts?
Follow us on Twitter @sourcecoast and @mandreae

mel
Melissa
useravatar
Offline
3582 Posts
Website 
Support Specialist
Administrator has disabled public posting. Please login or register in order to proceed.

Re: Facebook page follow not working when using facebook code directly

mel wrote:


Could you try adding another easy-tag to the page to see if it gets rendered: {JFBCLogin}?
* If it adds the social login buttons then I think there may still be weird characters in there.
* If not, could you try ordering the JFBCSystem plugin before other system plugins on your site? Sometimes the timing of other plugins may interfere with our parsing.

-Melissa

{JFBCLogin} does not render as well, I also ordered the JFBCSystem plugin as first, but it doesn't solve the issue.
I can provide superadmin access if you want to try to debug yourself.
Thanks

Edited by: fb_1580132693 - Oct-21-17 07:19:50
fb_1580132693
Niccolò
useravatar
Offline
62 Posts
Active Subscriptions:

Administrator has disabled public posting. Please login or register in order to proceed.

Re: Facebook page follow not working when using facebook code directly

Sure, send me a private message with the credentials. To do that, click on the envelope icon under my avatar.

-Melissa

Want to stay up-to-date on new releases and development efforts?
Follow us on Twitter @sourcecoast and @mandreae

mel
Melissa
useravatar
Offline
3582 Posts
Website 
Support Specialist
Administrator has disabled public posting. Please login or register in order to proceed.

Re: Facebook page follow not working when using facebook code directly

Done,
thanks a lot Melissa.

fb_1580132693
Niccolò
useravatar
Offline
62 Posts
Active Subscriptions:

Administrator has disabled public posting. Please login or register in order to proceed.

Re: Facebook page follow not working when using facebook code directly

Hello,
my subscription just expired, is this the reason I am not receiveing any more updates on this issue?

Thank you

fb_1580132693
Niccolò
useravatar
Offline
62 Posts
Active Subscriptions:

Administrator has disabled public posting. Please login or register in order to proceed.

Re: Facebook page follow not working when using facebook code directly

Hello,
my subscription just expired, is this the reason I am not receiveing any more updates on this issue?

Thank you

Edited by: fb_1580132693 - Nov-03-17 06:56:51
fb_1580132693
Niccolò
useravatar
Offline
62 Posts
Active Subscriptions:

Administrator has disabled public posting. Please login or register in order to proceed.

Re: Facebook page follow not working when using facebook code directly

I'm sorry for the delay in response. If you look at the form now, the follow button should be loading properly.

I tried quite a few things but here are the changes that seemed to fix the issue:
1. I changed the SCFacebookFollow easy-tag to the html for the fb-follow instead. I think there's a timing issue on when things are rendered and the AJAX call that was not parsing this correctly. Even changing the system plugin order did not resolve it.
2. I added code to force the parsing of the FB plugin. Because the message is being inserted by AJAX, you have to call the Javascript functions to refresh the follow widget.
<script type="text/javascript">FB.XFBML.parse();</script>

You can see the Display message in the backend form to see the full changes.

Again, sorry for the delay and hope this gets you going again.
-Melissa

Want to stay up-to-date on new releases and development efforts?
Follow us on Twitter @sourcecoast and @mandreae

mel
Melissa
useravatar
Offline
3582 Posts
Website 
Support Specialist
Administrator has disabled public posting. Please login or register in order to proceed.

Re: Facebook page follow not working when using facebook code directly

Thank you Melissa!
I really appreciated your help

fb_1580132693
Niccolò
useravatar
Offline
62 Posts
Active Subscriptions:

Administrator has disabled public posting. Please login or register in order to proceed.

Re: Facebook page follow not working when using facebook code directly

Glad I could help. Let us know if you run into any other problems.

-Melissa

Want to stay up-to-date on new releases and development efforts?
Follow us on Twitter @sourcecoast and @mandreae

mel
Melissa
useravatar
Offline
3582 Posts
Website 
Support Specialist
Administrator has disabled public posting. Please login or register in order to proceed.
There are 0 guests also viewing this topic
There are 0 users also viewing this topic

Board Info

Board Stats
 
Total Topics:
11616
Total Polls:
0
Total Posts:
48806
Posts today:
3
User Info
 
Total Users:
47663
Newest User:
genesis678
Members Online:
2
Guests Online:
1035

Social Stream
SourceCoast Joomla Social Extensions
Friday, 25 May 2018
JFBConnect 8.0 Coming Soon! Stay tuned.
Refer and Earn

Like our extensions? You're not alone! That's why they're used on tens of thousands of websites. Now you can earn 20% of any sale you refer to SourceCoast.com.

We provide excellent documentation, well laid out sales pages and great support. All you need to do is spread the word and we'll take care of the rest.

Learn About Our Affiliate Program