Facebook Like button extra width

Saturday, 04 January 2020 09:56 UTC

TheSDHotel

Hello,

In the past week it looks something odd started happening with the Facebook Like Button.

As you can see from the images below (before and after), now the Like Button has an extra width around it:

https://imgur.com/a/zzrIxYI

(PS: Your Attachment system don't work, I had to upload them to imgur because it said I had no permission to upload them as attachment)

By looking at the code, it looks like Facebook is now forcing a 225px width INSIDE the iframe. So not something that can be controlled externally by css styling.

Here is the part that I see:

<table class="uiGrid _51mz" cellspacing="0" cellpadding="0" id="u_0_0" style="width: 225px;">

So this is a screw up that Facebook has made. Is there any suggestion you have on how to put the like button style back to normal, or any change you can make on your end to fix this? Maybe have a custom button instead of using the default one (not sure if it's possible).

Let me know
Thanks
Andy

Monday, 06 January 2020 10:31 UTC

wb_weeblr

Hi

We just add a report of this this morning so yes, it looks like they have made some changes. I'm not sure if it's a bug or a decision. That change goes against their documentation which states that when using the "button_count" layout, minimal width is 90px.
It's only when using the "standard" layout (which we normally don't) that min width is 225px. However they seem to apply the min width on all layouts.

Using the latest FB code button does not show this issue but it requires updating the code used by sh404SEF to insert the buttons. Not all options (provided by current version of sh404SEF) are possible so this also requires changes in the user interface and documentation of the plugin.

We're working on it and some changes will be in next sh404SEF for that. In the mean time, a quick fix is to use template overrides for sh404SEF output of the buttons, like so:

- create a folder: /templates/your_template/html/layouts/com_sh404sef/social
- 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

- 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>

Again, as this goes contrary to their documentation, this might just be a temporary glitch but the above code seems to be working anyway.

Best regards

PS:

(PS: Your Attachment system don't work, I had to upload them to imgur because it said I had no permission to upload them as attachment)

it depends on the mime file type used by your browser when uploading the file; Akeeba Ticket system - which we use here - is really tight on that. Are you on a MAC using Safari?

Monday, 06 January 2020 11:53 UTC

wb_weeblr

Hi again

Just notice in the above instructions that I missed one bit: for the above to be taken into account, you must make sure to select "Use HTML 5 buttons" under the sh404SEF social plugin settings, on the Facebook tab.

Best regards

Monday, 06 January 2020 16:49 UTC

TheSDHotel

Hello, thanks a lot for the effort in trying to solve this.

I also think it's a glitch / error by Facebook, either that or a stupid decision on their part.

I followed your instructions exactly step by step (100% sure I followed them, also in your second post with the HTML5 buttons), but unfortunately that did not fix it for me.

See example:
https://www.xxxx.com/news/supercard/wwe-supercard-season-6-new-features-go-beyond-pro-bigger-teams-more

Still the same as before unfortunately.

it depends on the mime file type used by your browser when uploading the file; Akeeba Ticket system - which we use here - is really tight on that. Are you on a MAC using Safari?

Now, I'm from Windows 10 using Chrome. The file type of the image was PNG. I'll try again to upload one now.

Monday, 06 January 2020 16:50 UTC

TheSDHotel

Still got the error when uploading:

There were some errors uploading your attachments
Error while uploading file Cattura.PNG: Attachment upload error: Uploaded file is not an image file and you do not have permission.

Monday, 06 January 2020 18:29 UTC

wb_weeblr

Hi

That's odd, I have no problem uploading a png with brave on win 10.

OK, for now I'm pretty sure that's something wrong on their side. They seem to always include that 225px style inside the iframe for all elements, even those that can be - based on the doc, narrower.

I have started work on an alternate set of buttons, static ones, without all the social networks javascript and tracking. Will be much faster and lighter. Should be ready tomorrow I think.

Best regards

Wednesday, 08 January 2020 09:01 UTC

wb_weeblr

Hi

Just saw this morning that the problem seems to be gone on those 3 people who reported it yesterday. All for the best but like I said, 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 12:41 UTC

TheSDHotel

Hey man! Just seen this.

Yes, indeed, it seems like Facebook fixed the issue. So it was indeed a bug on their end.

But your new buttons look awesome! I will try them out today and will let you know if they work well, great stuff :)

Wednesday, 08 January 2020 12:43 UTC

TheSDHotel

I see no development version yet, though. Where can I try them out?

Wednesday, 08 January 2020 15:18 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, your 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

Thursday, 09 January 2020 10:34 UTC

TheSDHotel

Hey man, I will try these out today and give you feedback :)

Thursday, 09 January 2020 11:42 UTC

TheSDHotel

Hey there, I looked at and tested the new buttons.

First of all, great job, they look fantastic! I will definitely make the switch to these when they are implemented, as they look much better and cleaner.

Here's my feedback for issues or improvements:

1. In the dev version that you sent there is no button text customization. There is a "Show button text" setting Hide/Show, but it doesn't expand an input field to enter the text when you set it to "Show". It doesn't expand a text field input for any of the socials.

2. The Whatsapp icon touches the edges of the circle when using the "Rounded" style. Maybe the icon could be made a little bit smaller or have more padding around it so the image fits better within the circle?

3. And speaking of style, why is all the CSS loaded inline in the html of the page? Woudln't it be cleaner to instead include the CSS in a css file and call that instead?

Also a question: the Facebook static button can only be a "share button" and not a "like button" that automatically likes the page, right? I assume that's only possible with facebook's native button right?

Great job!
Andy

Thursday, 09 January 2020 11:43 UTC

TheSDHotel

PS: I also tested all the other settings, buttons size, button theme, colors, etc, and they all work great :)

Thursday, 09 January 2020 11:58 UTC

wb_weeblr

Hi

Glad you like, what you have is only a first step. We are nearing completion of the final version:

1 - I removed the text customization. It's a trade-off: text customization is easier if you have only one language but does not allow multilingual. So instead, any customization - and translation - is now done by adding a standard Joomla language override. This will be mentioned in the plugin and in the doc. Here are the language keys you can use to customize the text/translate:

PLG_SH404SEFCORE_SH404SEFSOCIAL_STATIC_BUTTON_TEXT_SHARE_FACEBOOKSHARE = "Share"
PLG_SH404SEFCORE_SH404SEFSOCIAL_STATIC_BUTTON_TEXT_SHARE_TWITTER = "Tweet"
PLG_SH404SEFCORE_SH404SEFSOCIAL_STATIC_BUTTON_TEXT_SHARE_PINTERESTPINIT = "Pin It"
PLG_SH404SEFCORE_SH404SEFSOCIAL_STATIC_BUTTON_TEXT_SHARE_LINKEDIN = "Share"
PLG_SH404SEFCORE_SH404SEFSOCIAL_STATIC_BUTTON_TEXT_SHARE_WHATSAPP = "Send"

Note that in current version (that you do not have yet) the default text are shorter, closer to what appears on native buttons.

2 - WhatsApp icon: yes, saw that, it's fixed.

3 -

3. And speaking of style, why is all the CSS loaded inline in the html of the page? Woudln't it be cleaner to instead include the CSS in a css file and call that instead?

Maybe cleaner but faster in many cases - although I agree it'd probably be hard to notice an actual performance difference.
There's another reason for that as well: it allows customization of the CSS on the fly: currently, this is how the button size is changed. The CSS has a tag in it and I can do a searc/replace with the desired font-size.
It also allows running a "filter": if you do not like the available font-size, you can add a line of code in a .php file and change that font-size value based on your own criteria, on the fly.
All that would be harder with actual files.

4 - What's cooking: currently the user experience when sharing is not that good: on most browsers, clicking on a button opens a new browser tab. User has to share, then close that tab somehow, etc On mobile, the experience varies with the social network: Facebook opens a new tab, Twitter opens the app if installed, etc

So I have unified that:

- on desktop, the sharing dialog is opened in a small, centered popup
- on mobile (optionally), all buttons are replaced by one single button and clicking it opens the mobile "Share" dialog

It should be ready today for testing

Best regards

Thursday, 09 January 2020 12:17 UTC

TheSDHotel

Very nice!

1. Nice thinking. Very nice idea, the language override is a much better approach, nicely done :)

2. Cool!

3. I see. No problem :)

4. Awesome ideas! Definitely a great improvement!

Also a question: the Facebook static button can only be a "share button" and not a "like button" that automatically likes the page, right? I assume that's only possible with facebook's native button right?

Asking this again just to make sure :)

Thursday, 09 January 2020 13:29 UTC

wb_weeblr

Hi

Also a question: the Facebook static button can only be a "share button" and not a "like button" that automatically likes the page, right? I assume that's only possible with facebook's native button right?

Correct. Basically You cannot do anything with the non-javascript sharer. Only open the dialog. This increases the friction for users obviously but the only alternative is lots of javascript and tracking by FB.

Best regards

Thursday, 09 January 2020 13:59 UTC

TheSDHotel

Makes sense. I look forward to try the updated version.

On an unrelated note, I wanted to let you know about something else. Just to inform you because there is really no solution to this, it seems.

An issue I reported a long time ago, still kinda creeps in from time to time. It's the issue where sometimes a duplicate URL (not rank 0) with seemingly no reason will change its rank and become rank 0 too, leading to having two main urls with rank 0. This seems to happen ONLY when dealing with custom URLs (that were customized manually to be consolidated under one main URL).

And this can of course "break" the url and show the wrong url instead of the intended main one.

You can refresh your memory of it in this thread: https://weeblr.com/helpdesk/sh404sef/3398-contact-urls-a-couple-of-questions

This happened again to me recently. For example see the Facebook comments at the bottom of this page:
https://www.xxxx.com/grand-theft-auto-v/vehicles/

When those two users commented, the issue had happened. The category blog version of the /vehicles/ url (which was consolidated under /vehicles/ as a duplicate) had on its own became rank 0 as well, leading to having two urls with rank 0, and the wrong one showing. This happened on its own during a night at like 3 am. And I fixed it in the morning when I saw those comments.

However, for the life of me, just like 3 years ago, I still can't find a way to reproduce it. It seems to happen randomly from time to time, but with no specific pattern or reason. Recently I thought I found a clue.

A few days ago I've put the site offline (via Global Configuration) to make some changes to other stuff on the website. When I put the site back online, I found out that A LOT of URLs had this issue happen. I found wrong main urls everywhere on the website, there were like 80 of them using the wrong URL. This means that for each of those URLs, there were now two URLS with rank 0 in the database: the supposed correct one (with thousands of views) and a wrong one (with just like 10 views).

So to fix it I had to put the site offline again, download the database table, open it in excel, filter by just the URLs that had a duplicate rank 0, change their rank back to another number, and re-upload it. But here is the kicker. The site was still offline, as I was testing if now everything was back to normal, and after a few minutes... here is the issue happening again! I had literally just fixed the rank numbers and here are some of them breaking again.

So here I thought: this can be a clue. Maybe this happens when these URLs are getting hits while the site are offline? (site offline means that users actually receive a "Site offline" page when trying to go to these URLs). So I decided to test this. I've made a copy of my site that only I can access. I've put the site offline. I tried to visit those URLs. No bug happening. I tried with cache on. I tried with cache off. I tried visiting the site, then putting it offline. I tried everything. I COULD NOT REPLICATE THE BUG.

So I guess the site offline clue had nothing to do with it and was just a coincidence.

So no matter what I tried I cannot find a way to replicate this bug. I still have no idea what can possibly cause this. So I don't have any pattern to give you to try and solve this because after 3 years I still can't find a pattern. So nothing really that you can do about it.

I just wanted to tell you this story just to vent my frustration to you about this hahaha

Andy

Thursday, 09 January 2020 17:27 UTC

wb_weeblr

Hi

OK, thanks for the detailed report. It'd be very helpful if you could open another ticket with that info. Won't be able to look at this new data right away, so it's better to have it in a separate ticket.

As for the sharing plugin, I've now uploaded to the temp folder the lates dev version. It has 2 main features added (aside from the minor issues mentioned above):

- there's some optional javascript added to the "static" buttons to improve the user experience (it's on by default): instead of the buttons opening a new tab, they open a popup windows, centered on the screen. User sees what they do and can close the popup afterwards

- there's also an option to enable the Share API (on by default). On compatible phones, this will remove all the static buttons and replace them with a single one, with the common "share" icon. Pressing it will open the phone sharing dialog, meaning you can share the page to each and every app on your phone that offer sharing: facebook, twitter, twitter DM, email, instagram, whatsapp, clipboard, skype, messenger, sms, slack, etc

it's live on this site, so if you look at https://weeblr.com/joomla-seo-analytics-security/sh404sef for instance,

- on a desktop you get this:

- on a phone, you get this:

When pressing the Share button, you get this:

Note that I only tested this on Android phones so far.

Best regards

Thursday, 09 January 2020 17:33 UTC

TheSDHotel

That looks AWESOME! Well done, really nice job.

I will try this out and let you know how it works :)

I have just one question: does the mobile "common" sharing means that from mobile you lose the ability to control the "via @TwitterAccountName" thing? So essentially what you have in your option "Tweet Via account" in the Twitter tab. I assume that gets lost?

But I will try this out.

Thursday, 09 January 2020 17:35 UTC

TheSDHotel

I opened a new ticket with the other stuff so you can delete my message about it from here

Thursday, 09 January 2020 17:46 UTC

TheSDHotel

An issue:

In some instances I have this specific code for just the Facebook Like button: {sh404sef_social_buttons type=facebooklike}

This doesn't seem to work with the static button. I tried changing it to {sh404sef_social_buttons type=facebook} but with that I get a PHP error.

Thursday, 09 January 2020 20:40 UTC

wb_weeblr

Hi

Thanks for the testing. I fixed both issues, you can download the updated version from the same online folder.

Funny is that it was triggering a PHP fatal on that very page here!

I have just one question: does the mobile "common" sharing means that from mobile you lose the ability to control the "via @TwitterAccountName" thing? So essentially what you have in your option "Tweet Via account" in the Twitter tab. I assume that gets lost?

At this point, I'm not passing the Via account when sharing so that is indeed lost. I have not yet researched and tested, it might still be possible to do that.

Best regards

Friday, 10 January 2020 08:08 UTC

TheSDHotel

Cool, either way, awesome job with it all!

One last thing I noticed while testing things: the Whatsapp icon, when used without Text, is not centered anymore.

Friday, 10 January 2020 09:04 UTC

wb_weeblr

Hi

I researched a bit more the Web Share API and unfortunately it seems the Via Account information cannot be passed along. I tried adding some more meta data to the page in such case but Twitter does not seem to use it (adding a rel=me link element). So at this point, that does not appear possible.

One last thing I noticed while testing things: the Whatsapp icon, when used without Text, is not centered anymore.

Thanks, fixed that in latest version. Also moved a bit the LinkedIn button, if you use that.

Best regards

Friday, 10 January 2020 09:09 UTC

wb_weeblr

BTW, I feel the plugin is now good enough to be tested by more people, so I put it up on the "Development versions" page. So from now on, please download any update from the [development versions download area].

Best regards

Friday, 10 January 2020 09:15 UTC

TheSDHotel

Awesome job :)

Yes, it's so good that it's already live and in-use in all my websites! :)
https://www.xxxx.com/news/wwe2k20/wwe-2k20-dlc-2k-originals-wasteland-wanderers-now-available

Friday, 10 January 2020 09:42 UTC

wb_weeblr

Excellent! I looked at that page and sharing on a phone is really a good experience now. On desktop, it's probably not as nice as the native buttons I'd guess, what with the direct Like button missing.
Also, do you track analytics on those social shares? analytics with those static button is likely not working, I don't think Google Analytics can grab the sharing in the same way.

Best regards

Friday, 10 January 2020 09:57 UTC

TheSDHotel

Not a big deal that the like button is missing, the new buttons look more clean, sleek and professional, so I like them :)

I used to have the tracking options enabled (by the way, what is the difference between the "Analytics Tracking" setting and the "Google Tracking" setting?), but I never really looked at them so indeed I decided to take this opportunity of the new buttons to disable the social tracking. Regardless of whether it works or not for the new buttons, I don't really care for it, so I just disabled it haha.

Friday, 10 January 2020 11:29 UTC

wb_weeblr

Hi

Some people like the sleek interaction, press the Like button and your visitors are done. However this mentality is - I hope - fading away as Likes are now seen as not really relevant. Sharing is much more important for SEO and that's why I liked and implemented the Share API, I think on mobile it can make a difference in sharing rates.

Google social tracking is actually, from recollection, some internal tracking that Google+ had. It should have been removed when Google+ disappeared, will do in next official version. Thanks for the heads up.

Please keep checking and report any issue here. It will be another week or so before the official version is released. I don't plan on adding feature, just reliability from now on. Thanks again for the help.

Best regards

Friday, 10 January 2020 20:27 UTC

TheSDHotel

No problem man, thank you for doing such an improvement!

#6852 – Facebook Like button extra width