FaceBook share button not rendering on mobile site

This section is for posting questions which are not directly related to WYSIWYG Web Builder.
Examples of off topics: web server configuration, hosting, programming related questions, third party scripts.

Note that these questions will generally not be answered by the administrators of this forum.
Post Reply
Astro
 
 
Posts: 61
Joined: Mon Jul 07, 2014 6:38 pm

FaceBook share button not rendering on mobile site

Post by 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
User avatar
Pablo
 
Posts: 21578
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: FaceBook share button not rendering on mobile site

Post by Pablo »

Ther4e are multiple references to jQuery, this will cause a conflict. Did you add these script yourself?
Astro
 
 
Posts: 61
Joined: Mon Jul 07, 2014 6:38 pm

Re: FaceBook share button not rendering on mobile site

Post by 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.
User avatar
Pablo
 
Posts: 21578
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: FaceBook share button not rendering on mobile site

Post by Pablo »

The Facebook code is not in a container, so it does not have a size.
Astro
 
 
Posts: 61
Joined: Mon Jul 07, 2014 6:38 pm

Re: FaceBook share button not rendering on mobile site

Post by 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.
User avatar
Pablo
 
Posts: 21578
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: FaceBook share button not rendering on mobile site

Post by 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.
User avatar
BaconFries
 
 
Posts: 5328
Joined: Thu Aug 16, 2007 7:32 pm

Re: FaceBook share button not rendering on mobile site

Post by 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
 
 
Posts: 61
Joined: Mon Jul 07, 2014 6:38 pm

Re: FaceBook share button not rendering on mobile site

Post by Astro »

BaconFries wrote: Sat Oct 28, 2017 9:04 pm 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
 
 
Posts: 61
Joined: Mon Jul 07, 2014 6:38 pm

Re: FaceBook share button not rendering on mobile site

Post by Astro »

Pablo wrote: Sat Oct 28, 2017 8:26 pm 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
 
 
Posts: 61
Joined: Mon Jul 07, 2014 6:38 pm

Re: FaceBook share button (SOLVED USING IMAGE LINK)

Post by 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.
Post Reply