• Home
  • Get help
  • Ask a question
Last post 6 hours 16 min ago
Posts last week 141
Average response time last week 4 hours 42 min
All time posts 67777
All time tickets 10473
All time avg. posts per day 21

Helpdesk is open from Monday through Friday CET

Please create an (free) account to post any question in the support area.
Please check the development versions area. Look at the changelog, maybe your specific problem has been resolved already!
All tickets are private and they cannot be viewed by anyone. We have made public only a few tickets that we found helpful, after removing private information from them.

#6849 – Facebook button alignment incorrect

Posted in ‘sh404SEF’
This is a public ticket. Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.
Saturday, 04 January 2020 00:45 UTC
chrisgdclarke
 Dear team

There appears to be excess padding of somesort on the Facebook like button on both the module and social button plugin (bottom of the article) which makes the links look messy.

How can I fix this?

Here is an example page:

https://www.xxxx.com/radiology-trainees/frcr-physics-notes

Kind regards

Chris
Monday, 06 January 2020 09:50 UTC
wb_weeblr
Hi

I don't see any excessive padding on the sh404SEF generated buttons (but there's no Like button in those locations):





I do see some not-so-good styling on FB like button in a module, is this the one you're talking about ? They don't look like sh404SEF-generated buttons (they do not have sh404SEF and "<!-- Facebook like button -->" comments around them like the one at the top and the bottom



Please confirm.

Best regards
 
Monday, 06 January 2020 11:04 UTC
chrisgdclarke
Thanks

Apologies - I turned likes off as it looked bad - I have turned it on again - if you have another look the issue should be there...

Chris
Monday, 06 January 2020 11:55 UTC
wb_weeblr
Hi Chris,

In the mean time, more information has been coming in. It appears this is a change in Facebook code. They have added this min-width: 225px to the Like button iframe.

As this is contrary to their documentation (which states that like button can be as low as 90px in width), we do not know yet if this is just a temporary bug on their side (looks like it) or a permanent change, which requires and update in the code we use.

In the mean time, we've done a workaround which you can set up on your site:

1 - make sure "Use HTML 5 button" is set to "yes" on the sh404SEF social plugin settings, under the Facebook tab
2 - create a folder: /templates/your_template/html/layouts/com_sh404sef/social
3 - in that folder, create a file: fb-like-html5.php. with this content:

<?php
// Security check to ensure this file is being included by a parent file.
if (!defined('_JEXEC')) die('Direct Access to this location is not allowed.');

?>
<!-- HTML5 Facebook like button override -->
<div class="fb-like" data-href="<?php echo $displayData['url']; ?>" data-width="" data-layout="button_count" data-action="like" data-size="small" data-share="true"></div>
<!-- End of HTML5 Facebook like button -->


NB: remove the data-share="true" bit if you only want Like button, without a share button

4 - in that folder, create a file: fb_sdk.php with this content:

<?php
// Security check to ensure this file is being included by a parent file.
if (!defined('_JEXEC'))
{
	die('Direct Access to this location is not allowed.');
}
?>
<!-- Facebook SDK -->
<div id='fb-root'></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/<?php echo $displayData['languageTag']; ?>/sdk.js#xfbml=1&version=v5.0&appId=<?php echo $displayData['appId']; ?>&autoLogAppEvents=1"></script>


We'll keep you posted as we learn more on this.

Best regards
 
Tuesday, 07 January 2020 19:02 UTC
chrisgdclarke
Many thanks!

It looks like Facebook fixed their error yesterday so the problem is resolved. I have saved this just incase it happens again! Thanks again for your support! Very good service.

Kind regards

Chris
Wednesday, 08 January 2020 09:01 UTC
wb_weeblr
Hi

Yes, I was about to ask, just saw this morning that the problem seems to be gone on those 3 people who reported it yesterday. All for the best but it pushed us on completing an alternate version of the buttons, without any javascript and social networks tracking and of course without the associated several hundreds KB of js.

Looks like this:







There are 4 themes and 2 styles, and the text is customizable from the settings. Care to try when ready, today or tomorrow?

Best regards
 
Wednesday, 08 January 2020 09:25 UTC
chrisgdclarke
Yes Lets see what they look like...

How do I install these / use these buttons?

Chris
Wednesday, 08 January 2020 15:20 UTC
wb_weeblr
Hi

I have not uploaded to the "public" latest dev version as I want to have some feedback on UI and customization. I have now a proper version (with no documentation) that has been tested on a few sites. You can download it from [this online folder].

Upon installation, you current buttons should be preserved (ie full native buttons). If you go to the Social buttons plugin settings, the first option is now a choice between "Native" and "Static" buttons.

Switch to "Static" for the new buttons, you can revert at any time to get the native buttons.

You also have a new "Static buttons" options tab to select: buttons styles, color theme and buttons size.

Then on each of the networks options tab, you have a single input field for Static buttons, where you can enter a free text to show on the button. If empty, only the social network icon is shown. All other settings, dedicated to Native buttons, are unchanged.

Finally, there's a new button for WhatsApp sharing. Note that even if enabled, it is hidden on desktop and will only show at "phone" width.

Let me know.

Cheers
 
Wednesday, 08 January 2020 20:23 UTC
chrisgdclarke
Thanks - good work looks good.
I may use this if the native goes down again.
My only comment would be that the text is too long when this option is selected. Maybe changing the wording to simply 'share' would be better to save space and make them more like the native buttons.
Thanks again for all your help.
Chris
Thursday, 09 January 2020 08:28 UTC
wb_weeblr
Hi

You are right with the text, I'll change that. Thanks for the feedback. Working now on improving the user experience when sharing. For instance on mobile, using the universal sharing button.

Best regards

 
Friday, 24 January 2020 05:34 UTC
system
This ticket has been automatically closed. All tickets which have been inactive for a long time are automatically closed. If you believe that this ticket was closed in error, please contact us.
This ticket is closed, therefore read-only. You can no longer reply to it. If you need to provide more information, please open a new ticket and mention this ticket's number.