FaceBook share button not rendering on mobile site

[Astro]

I hope this is the right place to ask this question. I've searched this issue all over the web and cannot find this exact problem.
I'm currently using WB11. I have both a standard site and a mobile version of the same site. I'm adding FaceBook share buttons to both but am having a problem with the mobile site. I added the codes that faceBook provided and it work great on the main site but the button won't render on the mobile site. What am I doing wrong?

Main site www.carbonscopetubes.com The share button renders and works fine.

Mobile site m.carbonscopetubes.com No share button, just a text link, but the link does work.

This is the code generated by the FaceBook Share Button Generator for my mobile site:

This code is placed after the < body> tag...

Code: Select all

<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 = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.10';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

And this is supposed to render the button and counter...

Code: Select all

<div class="fb-share-button" data-href="http://www.carbonscopetubes.com/" data-layout="button_count" data-size="large" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.carbonscopetubes.com%2F&amp;src=sdkpreparse">Share on FaceBook!</a></div>

Please help, ---Frank

[Pablo]

Ther4e are multiple references to jQuery, this will cause a conflict. Did you add these script yourself?

[Astro]

Yes, I added them trying to correct the problem. Obviously that didn't work. I'll delete now.

Ok, deleted the 2 extra references.

The FB button code starts at line 96.

[Pablo]

The Facebook code is not in a container, so it does not have a size.

[Astro]

I wrapped the code in a < div> with size and position but still no joy. I just picked a random size since I have no idea what the size should be.
I used the "Use < div> to set position and size of the HTML" option in the WB11 HTML properties to do this.

Besides, I thought position div's were not needed in mobile.

For the record, this is where I got the share button code. I used the code generator and have tried all button types and sizes.

https://developers.facebook.com/docs/pl ... re-button/

I would have thought there would be a million mobile sites built in WBx.x that have FB share buttons on them. It's strange to me that this question has never arisen before. Is there some other/better way of doing this that I'm not aware of? I tried adding the fb url to a regular button and it does work but not as intended. I don't know how/where to add the other parts of the code (besides linking the url) to a button.

[Pablo]

I'm sorry I cannot help you with third party code. For me it may also take several hours to figure out how to use this.
Howover in general you should be able to use the HTML object, as long as the added code does not conflict with other code on the page.

[BaconFries]

Are you sure this is correct? looking at it you have used url encoding on your url.

Code: Select all

<div class="fb-share-button" data-href="http://www.carbonscopetubes.com/" data-layout="button_count" data-size="large" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.carbonscopetubes.com%2F&amp;src=sdkpreparse">Share on FaceBook!</a></div>

Try

Code: Select all

<div class="fb-share-button" data-href="http://www.carbonscopetubes.com/" data-layout="button_count" data-size="large" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://www.carbonscopetubes.com/&amp;src=sdkpreparse">Share on FaceBook!</a></div>

[Astro]

Are you sure this is correct? looking at it you have used url encoding on your url.

BaconFries,
I tried your code and it does exactly the same thing the original FB code does. They both work but no button.
So...
I started adding code to my own button but something is not quite right. It seems to work but it opens in the same browser tab instead of a new one or an iframe. That makes a mess when trying to cancel the share. If I can figure out how to fix that, I'd be all set.

I have all 3 code sets on the page now and made them easy to differentiate. If you have a minute, can you take a look? http://m.carbonscopetubes.com

[Astro]

I'm sorry I cannot help you with third party code. For me it may also take several hours to figure out how to use this.
Hoover in general you should be able to use the HTML object, as long as the added code does not conflict with other code on the page.

That's understandable. Thanks.
Ps.
Seems to me that you could create a very popular plug-in if you can figure this out. (hint, hint)

[Astro]

I got it working with a work around.
I downloaded an image of a Facebook share button, added it to my page, and linked the image to the url facebook provided. By using an image, I could make the url open in a new window. Then I added a few of the facebook codes above the image and POW, it works!
The code ain't pretty but it seems to work fine.