Social Sharing Buttions

Not really a bug, rather a useability issue.

THIS:

INSERT INTO `sys_objects_social_sharing` (`object`, `content`, `order`, `active`) VALUES
('facebook', '<iframe src="//www.facebook.com/plugins/like.php?href={url_encoded}&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&amp;locale={locale}" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100%; height:21px;" allowTransparency="true"></iframe>', 1, 1),
('googleplus', '<div style="height:21px;">\r\n<div class="g-plusone" data-size="medium" data-href="{url}"></div>\r\n<script type="text/javascript">\r\n  window.___gcfg = {lang: ''{lang}''};\r\n  (function() {\r\n    var po = document.createElement(''script''); po.type = ''text/javascript''; po.async = true;\r\n    po.src = ''https://apis.google.com/js/plusone.js'';\r\n    var s = document.getElementsByTagName(''script'')[0]; s.parentNode.insertBefore(po, s);\r\n  })();\r\n</script>\r\n</div>', 2, 1),
('twitter', '<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//platform.twitter.com/widgets/tweet_button.html?url={url_encoded}&amp;text={title_encoded}&amp;size=medium&amp;count=horizontal&amp;lang={lang}" style="width:100%;height:21px;"></iframe>', 3, 1),
('pinterest', '<a href="http://pinterest.com/pin/create/button/?url={url_encoded}&media={img_url_encoded}&description={title_encoded}" class="pin-it-button" count-layout="horizontal"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>\r\n\r\n<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>', 4, 1);

This makes cute little buttons on your PC browser, but on an iPhone they are microscopic.  Because of the iframe content, and remote styling, it's impossible to scale these tiny little buttons upwards, so that they are visible and useable on a mobile device.  The CSS Transform:scale() is of no use because it also scales padding, margins, and positions, and things basically go nuts.

Can these buttons be changed out with some jQuery version like this one: http://carrot.github.io/share-button/

so that mobile friendly templates can display usable sharing buttons?

HL what css have you tried so far?  Perhaps adding a class will help to style them?

 RE:

 Well I tried this, but it didn't work:

img {
width:makethefcknthingwider;
height:makethefcknthingtaller;
}

try font-size:

I did this on the page url you posted and it worked:

.entypo-export:before {

content: "\e715";

font-size: 50px;

}

I don't think you understand the problem

iOS uses specific css - is all other css you've applied in fact taking effect when you view on your iPhone?

If that didn't work try this:

What's a buttions ? : )

 RE:

 It's a French word meaning tiny little fckn buttons.

I've checked some responsive templates - social (likes) buttons looks fine there. 

When page isn't responsive then yes - everything is tiny, including these buttons.

If you have some custom template then it would be great if you can provide screenshots to see how it looks for you.

Also in custom template you can use your own way of presenting these buttons (BxTemplSocialSharing::getCode method)

Also you suggest to replace "like" buttons with sharing buttons, but like buttons and sharing buttons - these are different things and they look and work differently.

Alex, I was working on a custom template, and what I did was just replace the code in the template that pulls the code from the sys_objects_social_sharing table  because I didn't like them anyway.