Blocking FB sdk

Resolved humanify
(@humanify)

8 years, 4 months ago

Hello!

I’ve found that using autoptimize blocks the use of the Facebook SDK for Open Graph share dialog. Especially on iOS devices.

Apparently its the ‘optimize html code’ option that causes this problem.

For now i’ve turned this off. I wonder if there’s any way around this?

The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

Plugin Author Optimizing Matters
(@optimizingmatters)

8 years, 4 months ago

how does it block @humanify? what should it do and what does it do instead? do you see errors? do you know what specifically in the HTML causes the breaking?

Thread Starter humanify
(@humanify)

8 years, 4 months ago

Hi, thanks for quick response!

First off. I’m not a huge techie in this regard. I’ve added the Facebook SDK in my webpage header, and added a button in my content.php (part of my template). According to the example that I added in the first link above. I deviated from the example by chaning the href to window.location.href to call the actual page URL.

When I installed autoptimize, the share button stopped working. I’ve tried turning off each of the Autoptimize options to see what caused it. Turns out that only turning off HTML optimization made it appear again. Leaving CSS and JS on does not create problems.

What should it do?
It should open the facebook OpenGraph dialog to share the current page. Current behavior is that it loads the dialog in a new tab.

What does it do instead?
When HTML optimization is turned on: the button activates, but does not load anything.

I do not know what specifically cause the breaking. But I suspect its the facebook scripts paired with the button in the content.php which generates the html.

Thread Starter humanify
(@humanify)

8 years, 4 months ago

Quick follow up. I’ve now turned HTML optimization back ON, so you could maybe have a look. Here is a
page with the button.

Please note, to clarify. It does only NOT work on IOS devices, like my Iphone 7 or Ipad. It works fine on Chrome or Firefox
Plugin Author Optimizing Matters
(@optimizingmatters)

8 years, 4 months ago
OK, can you try to enclose the changes you made in your content.php in noptimize-tags, making sure the HTML output is something like this;
```

<your code goes here>
<and here>
<and whatnot>

```
frank
Thread Starter humanify
(@humanify)

8 years, 4 months ago
Hi Frank,

Thanks for the help! Using the noptimize tags for the Facebook SDK script in the header.php solved the problem.

(After some testing, the parts in the content.php work fine without.)

For your reference, this is the part, right after the body opening tag:
```
		
<script>
  window.fbAsyncInit = function() {
	FB.init({
	  appId            : '-----------',
	  autoLogAppEvents : true,
	  xfbml            : true,
	  version          : 'v2.11'
	});
	  FB.AppEvents.logPageView();
  };

  (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 = "https://connect.facebook.net/en_US/sdk.js";
	 fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

```
- This reply was modified 8 years, 4 months ago by humanify.
- This reply was modified 8 years, 4 months ago by humanify.
Plugin Author Optimizing Matters
(@optimizingmatters)

8 years, 4 months ago

super @humanify, fijn weekend gewenst! 🙂

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Blocking FB sdk’ is closed to new replies.