Any idea why when I click the Twitter button the url is being ignored? Incidentally, this also doesn't work on the demo.

I do think this is an issue since Font Awesome is highly popular font to use on websites for icons. When using both SocialCount does not show correctly since using of classes with "icon-" prefix is same as Font Awesome is using. Has anyone found a quick fix (without having to fix the whole CSS)?

The content of socialcount-with-icons.css and socialcount.css is the same, so the icon definitions are missing from the -with-icons versions. The same with the minified versions.

Facebook now opens a popup similar to the share button when the action of the like button is set to recommend.
https://developers.facebook.com/docs/plugins/like-button/

This does not happen when the button is redered using SocialCount even if data-facebook-action is set to recommend.

Reported via https://twitter.com/stringy/status/580566470867959809
More at https://twitter.com/stringy/status/580602600803926017

Thanks!

As seen on http://flexxivelearning.bellevue.edu/

https://github.com/filamentgroup/shoestring

If socialcount.js is executed after jQuery.ready() has fired no plugins will work.

Since the plugins are added at the end of the file, and "$(function() { ..." on line 327 will execute immediately when $().ready() has already been fired, init() will be called with empty plugins.

In my case this is happening because I'm using https://github.com/Cerdic/jQl to load jQuery and dependent code asynchronously.

Howdy,

Just giving this a try. If I visit http://mydomain.com/socialcount/service/index.php?url=http://www.mydomain.com/articleid/

I get this back as a response:

{"twitter": "","facebook": "","googleplus": 0}

No matter what URL I try, the response is the same.

Thus, there are no counts displayed.

I'm thinking that I've missed something along the way. Any pointers appreciated.

Phillip.

In case someone else has the same problem. When locale is EL, the facebook like button does not work. Changeing the locale or removing it solves the problem.

Reported by email, not yet confirmed

1. Even though I've set the YOUR-URL to be specific to each Wordpress post, Facebook just see the main URL so it seems I've like the site, not specific pages.

2. Facebook like doesn't seem to use the "add comment" version of the like button. This type of like shows up in a users feed, not just activity. A little better for site promotion.

Change API URL for remote api ? not run.

Related: #21

https://developers.facebook.com/docs/plugins/follow-button
https://dev.twitter.com/docs/follow-button

When remote script fail to load or buttons don't initialize correctly, the bare links should still be clickable.

The native buttons of the google+, fb, twitter is not appearing and twitter is not accepting the text which we've provided.

Visit http://nettpals.in to see this error live

Chrome version 25.0.1364.97 isn't showing share functionality.

Looks like the mouse-enter/leave events aren't triggered,

Hi,

Thanks for this great module. I'm trying to make a drupal module for this and found that the images have "absolute" url in the css.

It's problematic when the library is included in another project. In this case the socialcount folder is placed in sites/all/libraries/.

So would it be to change /SocialCount/src/icon-hd-s9293bc9986.png to ./icon-hd-s9293bc9986.png ?

Hi,

I really like the social buttons in this way. I was wondering, though, if it would be possible to do the same for Twitter follow and maybe G+ 'add to circle'. For Facebook this is not really necessary, as - I believe - setting YOUR-URL as the FB page URL will like the page in question.

Thanks!

I've found that the javascript is not compatible with jQuery 1.4.4 (the version shipped with drupal 7).

The best solution for me would be to make the js compatible with this version but it would require to not depend on the deferred and promise. So if it's not possible there should be a note somewhere to tell the minimum version required.

socialcount-with-icons.css contains a reference to socialcount-icons.css.map although there is no such file in the dist.

I'm not seeing this option anywhere in the documentation, but I'm curious as to whether it's possible to display the counts without lazy loading the native widgets on hover. Thanks!

The demo page just shows some labels and nothing else at the moment.

Great code! Found a few issues before I can use it, though. Wanted to get them over to you to make sure they're on your radar...

First, when I click the twitter button after rollover and population of the "real" social plugin, the window created by the button is blocked by chrome's popup blocker (at least on your demo page). Seems like that's a bit detriment to use of those buttons.

The linked file here:
https://github.com/filamentgroup/SocialCount#download-socialcountzip
has an incorrect version of the socialcount-with-icons.css and socialcount-with-icons.min.css no icons are referenced.

On the demo page, after I click the "like" button for Facebook, I get something I've never seen before -- a "confirm" link which pops up a window asking me to confirm my like. I'm not sure why or how that happens, but seems like it defeats the point of one-click sharing.

Would be nice if github buttons were supported like: http://ghbtns.com/

If i subscribe to the facebook event "edge.create" this its not being called when clicked from Socialcount.

Using a standard like button the event is thrown without problem.

I had an issue with the facebook button not appearing on a french page.

The problem is that the html lang attribute follow the "BCP47" format, and facebook want something like "ISO language and country codes respectively, concatenated by an underscore".

The BCP format concatenate the language and country with a "-" if i'm right. At least, on a french wordpress the language attribute is "fr-FR".

Eventually simply replacing the "-" with an underscore is not really enough. In switzerland for instance there is a french part and the country code is CH. But I tried with "fr_CH" and facebook was still not showing up, changing it to "fr_FR" worked.

So one option would be to add a "data-locale" attribute to the social count container. This is not ideal but would be the most flexible solution.

Another option would be to have a function to convert BCP47 format to facebook format, but it may not be enough for some combination of language and country.

Sources:
https://developer.mozilla.org/en/docs/HTML/Global_attributes#attr-lang
https://developers.facebook.com/docs/internationalization/

edit: I'm not sure "fr-CH" is a valid BCP47 format and fr-FR is most common, so maybe just replacing the "-" with a "_" is a good solution"

On the demo page and on all of my installations, clicking on the gray button (the part surrounding the iframe or the entire button on the small version) for Facebook I am sent to https://www.facebook.com/sharer/sharer.php?u=http://www.google.com/ as expected.

On the larger buttons with the FB iframe, it loads a quick pop-up window which is there for a brief second and then disappears.

What is the expected behavior in this case?

Instead of having for the user to hover to show the loading.gif and then the actual clickable link, have a way to invoke that programatically. Maybe on document load, dom ready, etc.

In real world sites, hovering on icons and waiting for it to come will turn off users

Twitter button doesn't works with ie8, ie7 tested in your demo website: http://fgte.st/SocialCount/examples/index.html#generator and in local.

Implementation has a small line-height, which is truncating the buttons vertically: http://www.raymondcamden.com/index.cfm/2012/9/4/Mashups-of-CanIUsecom-data

Would it be possible to add LinkedIn please? :)

Let the facebook button flow, especially important for different locales.

This page, http://filamentgroup.com/lab/socialcount/, linked to at the top of the readme doesn't exist.

It's possible to get like counts quite trivially via JS:
http://codepen.io/andreasstorm/pen/iefKk/

Why is the server-side code required? Would like to understand if I may have overlooked something.

I've encoded the icons with the folowing online base64 converter:
http://webcodertools.com/imagetobase64converter/Create

So in socialcount-with-icons.css, line 237, instead of:

background: url('icon-s8df06ae4f6.png') no-repeat;

It's better to put this:

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAAARCAQAAAD3PnMmAAACR0lEQVR42p1V7VXCMBR9ntP/soHdwLBBmACcgHYCZILKBOAE1gnECSgTEDeoG2QDvXmN/UzbxMcB+vGS3Hfvy030Q3NxZ//nMz3zN3T+3/x/mZHz7YUkLUmNjI0pad0phmCe5J5V7fB5Iu2RucC8C2Tm+EoqaAK0QIIZ4I4jPVOJt9X7g2VtGwCaMP+FUicpt9bzBbIEX2W80iTo3cRyCUNeshoC9b/MwGs012A3pjWgCCbGwD47CLvRnk52LVHDJ3pskiKHJJsJEGtuCM2VfzCADfPwB/AwKEMzc5pe6Q2g2+t8OLJL5BxB2ytGLTpNmE6BTkYbo2GjAlP9liyb4InNov1QtOJ9cHPMu3aCJgben4X6oCWnl7x4Vm/GKnnZGfwOZmNwlvKYAmNy7mWTvZooNHNAztvsdQgZxvcQ9IWFpRrw+CRn5GVQI+Hr1HPjxdZdrqzLhQtOnRt3D0JccR6CDokXbJOE5bu2bGs/4xaq4xZmU7o5zUFJPHhauNojJGI0yKM1v4carJrx21WrQAW1jrg/OXPfHXr3KAkFnbB8BRY0vf1MX17unHeOkj2YF43rDpQsej4zcPQw0JIhV2elYSvBoeIDWnvPL+me6WhGOtw86tiKnrE72eovDSETr6NYentEAbi7GrKiTyjqKDiyh7EZUHBNMbtDI02fMYmmODGYLW/GuRDWPP0i91Eusn3Utvd01MpyHAcSbZGBBcn3c8f4YfRNSf+O6C4kW8MFhD3mr9BFeRikd/gjCbc85QE1EERo/AJ9OqeVrSSTMgAAAABJRU5ErkJggg==) no-repeat;

Same for all other icons.

The balloon popup that opens from the Facebook button on desktop devices is mostly hidden due to overflow:hidden on .socialcount.

This is currently reproducible on the demo page.

Hi,

I'm working on this : http://www.tedxhecmontreal.com/iWent/

As you can see, when you hover the Facebook button nothing is showing.
The link is working (you can catch it by hovering on the sides of the facebook button).

Thanks

In order to prevent users from accidentially activating a button it would be great if one would be able to define a timespan of continous hovering before a button activates.

A typical scenario where this would help is when a user moves the mouse accross the screen and then also passes accross the button. Longer hovering and/or a click would guarantee that it is the user's intention to activate it.

Background: Here in Germany sites are not allowed to activate social plugins without permission from the user, because of privacy reasons. Not complying with that can get very expensive.

When Social Count is configured to activate on click it should tell people when they click that they just activated the button and that they now need to click again to complete their action. Currently there is no indication of what is happening, so people think they have already shared the page with their first click.

For those of us who use something other than PHP (like Rails, Sinatra, Django, etc.) This plugin doesn't work. It appears to be calling for FB to send a PHP document which can't be rendered within any other environment.

The G+ and Twitter plugins work just fine...

thx, Art

Code needs to be changed to

<div class="g-plusone" data-size="medium" data-annotation="none" data-href="' + url + '"></div>

since otherwise the button is prepopulated with the wrong URL when your site is using hashbangs (or anchors).

I am looking for a widget that I can drop onto my web page with a textbox that allows comments to be shared on social networks? i.e. for visitors to be able to leave a comment about one of my products, which will then be uploaded to whichever social network they choose along with a recommendation or like. Have you got any suggestions? Can I do this using SocialCount? It seems to be limited to simple likes and recommendations at the moment.

thanks

Simon

I like the plugin, as it is simple and functional, but wouldn't it be possible to activate the social widgets only on 'click' instead of on 'mouseenter'.
With on 'mouseenter' a user may accidentaly activate the widget and therefor send data to facebook, google+ or twitter.
I know it is probably not the plugin's main intention, but changing the code a little, or implementing an option to do so, could easily make it a good option for social-share-privacy-issues.

The hover trigger doesn't fire on IE10, so when you hover over one of the elements it changes hover state but you don't see the "Loading" image and the native button for the service doesn't appear.

I've done this to address the issue for myself:
iaincollins@cf76fb0

I say workaround as it may not behave as expected on Windows tablet devices with this, but I suspect a lot of people are pretty indifferent to that.

This works:

http://www.facebook.com/plugins/like.php?href=http://www.google.com/&send=false&layout=button_count&width=100&show_faces=true&action=like&colorscheme=light&font=arial&height=21

Whereas this does not:

http://www.facebook.com/plugins/like.php?href=http://www.google.com/&locale=de&send=false&layout=button_count&width=100&show_faces=true&action=like&colorscheme=light&font=arial&height=21

The only difference being that the "locale" parameter is being set.

The Twitter API url used in SocialCount works when only minimal calls are made to the Twitter API. After throwing several hundred requests at it (probably 150, the logged-out API limit) I began to receive errors.

After checking out the dev documents, it was stated several times that using this method to get Tweet counts is not authorized and that developers should not use it.

They stated that the proper way is to set up an Application in your account and then use the Streaming API to get these counts.

Of course, that is all well and good, but it is considerably more difficult than currently so I'm not sure what a good solution to this is. Just wanted to open an issue to let others know about this, because it will begin to fail if you throw a lot of requests at it.

Been having a problem with the Google+ sharing popover — appears fine when you click/hover on the button, but disappears as soon as you mouseleave the containing <li>

The quickest hack I could do to fix it was getting rid of the binding on mouseleave — it leaves the official share button displayed forever (so not the default behaviour) but at least it lets you actually click the Google+ share button in the popover!

$a.closest('li').bind('mouseenter', function() {
    $( this ).closest( 'li' ).addClass( 'hover' );
});

Any other solutions?

On the demo page http://fgte.st/SocialCount/examples/index.html, if I click on default like the Facebook like button that appears is cut off. It only says 'Gefäl' instead of 'Gefällt mir' and the round corners on the right side are cut off.

Might be an internationalization issue.