tmort / socialite Goto Github PK

A lot of you are familiar with Buffer App http://bufferapp.com if you aren't I explain it briefly.

Buffer let's you link your Facebook, Twitter, and LinkedIn accounts to the Buffer app, you then simply click a button to add a post to your buffer and then Buffer will post your post to your networks through out the day (you get to schedule a time frame). The great thing is not only can you add a bunch of things you want to post about to your Buffer which is basically a Que but when you click the button to Buffer an item, you can simply clikc a button to pick which of your networks you want to post it on, all 3 or simply 1 or 2 of them. In the future they will be adding more networks like Google Plus once they release there API.

So anyways I am trying to add the Buffer button located here http://bufferapp.com/extras/button with the extend() function but I am un-successful as I don't really know a whole lot about Javascript and it appears every network currently on Socialite is slightly different in the way it uses the extend() function.

Here is the code to do a Buffer button, it seems to be very similar to the Twitter button.
<a href="http://bufferapp.com/add" class="buffer-add-button" data-text="My body or subject text here" data-url="http://www.test.com" data-count="vertical" data-via="MyTwitterName">Buffer</a> <script type="text/javascript" src="http://static.bufferapp.com/js/button.js"></script>

If anyone could help add this or show me how to get it working I would be really grateful

http://www.ashrobbins.com/playground/socialite-testing.html

At the above URL I made a quick test page to try and replicate an issue I've been having on a build I'm working on at work (sorry can't share that particular page). The code used in the above page is the same as that which I'm having trouble with though.

Basically it works perfectly in Chrome, Firefox, Opera, Safari and IE9, but in IEs 8 and 7 I get really inconsistent results. Sometimes all three buttons appear, sometimes only one, sometimes only two. What I can say is that the Tweet button is the one that DOES always appear.

Sorry dude, I know you asked me to be specific! Don't know whether you can spot anything obvious I'm doing wrong in the code.

This can be done by configuring G+ as follows:

window.___gcfg = {
  lang: "en-US"
};

Related: #17

Sir,
When we hover over on horizontal social buttons,their position goes upwards.
for example
before hover
http://img.ctrlv.in/513214b50ce24.jpg

After hover
http://img.ctrlv.in/513214bed53ad.jpg

(example)
http://www.ilovetrolls.org/2013/02/parent-related-rage-comics.html

i tried many css tricks,but in vain.I went to stack overflow,again in vain

Is there any way to avoid letting go the elements upwards
http://jsfiddle.net/fnkpH/
before
img.ctrlv.in/5133081e9637f.jpg

after
img.ctrlv.in/513308486124d.jpg

Thanks a ton

oopss
got it
http://stackoverflow.com/questions/15183660/how-to-prevent-an-element-going-a-bit-up-onhover-changing-position-afterhover

On Chrome, http://socialitejs.com/ shows the pinterest share icon misaligned with the others:

Facebook Comments require the following code to be present on the page:

<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 = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

This seems to cause some sort of conflict with Socialite. If that code is already present on the page, the Facebook Like button will not display. Has anyone else run into this? I feel like I'm missing something simple here.

Please add support for the newer Pinterest "Pin It" button with count. http://pinterest.com/about/goodies/ Here is an example to add a Pin it button from that page

<a href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.codedevelopr.com%2F&media=http%3A%2F%2Fwww.codedevelopr.com%2Fimage.png&description=My%20Description%20for%20this%20website" class="pin-it-button" count-layout="vertical">Pin It</a>
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>

I know that the plugin setup and configuring social share buttons is quite easy at the moment, but it would be nice to have a command line tool to easily configure and select social services and build custom unmin/min versions of the plugin.

I have some instances where I need target="_blank" to be added to the social links. Problem is, attributes keep getting stripped out from the anchor tags once Socialite activates.

Is there a way to stop that from happening?

Line 397 would need a variable for the language (locale):

}, '//connect.facebook.net/en_US/all.js#xfbml=1');

See: FAQ > How do I display the Like button in different languages?

Hi there,

I have socialite working on my site, however I am noticing that on Ajax loaded pages, all like counters are working except for Pinit - I receive the following console message:

"TypeError: network.el.parentNode is null" - socialite.js (line 210).

Any chance you know what is happening here?

Thanks for the great work.

Mark

The following code appears at the bottom of socialite.js and does not appear to be referenced or used - can this code be removed?

/**
 * Execute any queued functions (don't enqueue before the document has loaded!)
 */
(function() {
    var s = window._socialite;
    if (/Array/.test(Object.prototype.toString.call(s))) {
        for (var i = 0, len = s.length; i < len; i++) {
            if (typeof s[i] === 'function') {
                s[i]();
            }
        }
    }
})();

I had a case where different twitter widget caused trouble because one included a global window.twttr without the .ready() method used in Socialite.

The problem is on this line
https://github.com/dbushell/Socialite/blob/master/socialite.js#L549

You test if window.twttr exist, and not if it contain the functions we need. To workaround this problem, I've been using jQuery extend method to make sure my object contain all the function I needed. Like so:

// Replace this
if (notwttr) {
    window.twttr = (t = { _e: [], ready: function(f) { t._e.push(f); } });
}

// By that
if (notwttr) {
    window.twttr = (t = { _e: [], ready: function(f) { t._e.push(f); } });
} else {
    window.twttr = (t = $.extend( { _e: [], ready: function(f) { t._e.push(f); } }, window.twttr ));
}

As socialite is dependencie free, I prefer not to commit any code as I'm not sure how you'd prefer to implement such solution.

Hope this help !

I have a page full of Facebook like buttons. I am using fake buttons (static images). When the user hovers them - the real one appears. All is working fine. However I also have Facebook Like box which does not appear until the user hovers a button.

How can I load the first Facebook like button? Or how can I load the like box separately?

Here's a strange one from IE 7/8. In some cases, the Twitter share button gets replaced by a Facebook like.

Here is an example, which has Facebook, Twitter and Google Plus buttons: http://demo.digisfera.pt/socialitejs-bug/problem.html
Everything works fine when the page is opened for the first time, but sometimes, after refreshing, the Twitter button gets replaced.

Switching the order of the Twitter and Facebook buttons seems to solve it: http://demo.digisfera.pt/socialitejs-bug/ok.html

As does removing the Google Plus button: http://demo.digisfera.pt/socialitejs-bug/ok2.html

I guess it must have something to do with the order in which the buttons get loaded. I'm using spoon.net to test the page on IE 7 and 8.

Hi David, et al —

It look like using the prescribed implementation, lazy loading isn't possible for Pin It buttons. See the demo.

When you activate any section, every Pin It button on the page is loaded. Even the last Pinterest link, which is class-less & independent from Socialite, is loaded as a Pin It button. It seems the Pin It script sniffs for matching hrefs, even if it doesn't have class pin-it-button (as you might expect from the the button code generator).

I'm not sure the best way to handle this... My first thought is, when Socialite is loaded change all Pin It link hrefs to data-hrefs so that the Pinterest script doesn't pick up & pre-load all the button stubs. This keeps the same developer implementation and it degrades for JS-less users.

Any thoughts on a better way?
—Matt Wondra

PS — Thanks for your work on this project, really looking forward to using it in production!

There seems to be an odd layout issue when setting Facebook button to box_count layout. The buttons gets rendered with a 300px x 150px container. Is this a known problem?

cdnJS is a Content Delivery Network which hosts "everything" (their word) in terms of cross-site Javascript libraries. cdnJS supports delivery over HTTP, HTTPS and the SPDY protocol.

Having Socialite on cdnJS would:

• Provide a canonical URL for Socialite, which aids client side caching.
• Speed up the web -- while cdnJS isn't blazingly fast, it's generally faster than low-end hosting.

Here is the how to: https://github.com/cdnjs/cdnjs#readme

This is printed in the console log on every page load - even on the demo site.

FB.getLoginStatus() called before calling FB.init().

I'm not sure the cause, some answers on StackOverflow suggest Facebook's API might have changed.

Hi David,

thanks for your awesome work!
I'm trying to call google analytics function to track tweets and likes.

I have no problem with facebook like thanks to window.fbAsyncInit that is called when all.js is loaded so i can do this wherever I want:

window.fbAsyncInit = function() {
  _ga.trackFacebook();
};

with twitter i should call _ga.trackTwitter after widget.js is loaded, usually i call it with the async js code like this:

!function(d,s,id){
var js, fjs=d.getElementsByTagName(s)[0];
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;
js.src="http://platform.twitter.com/widgets.js";
js.onload=_ga.trackTwitter;
fjs.parentNode.insertBefore(js,fjs);
}
}(document,"script","twitter-wjs");

but i don't know how get the same results when using socialite.js

Can you help me?

Thanks.

Hi David,

Well, it looks like Google has given us another toy...the Share button (https://developers.google.com/+/plugins/share/). Any chance of getting it integrated?

Cheers,
Matt

Is there a way i can get the button to display the likes of a certain facebook page, rather than likes for a URL?

Since last night I've been receiving the following error when initializing the pinterest buttons:

Uncaught TypeError: Cannot call method 'removeChild' of null

The first pinterest button initializes correctly, but the remaining buttons on the page throw the above error. The same error was thrown on the socialitejs example website.

I think pinterest has changed something with their script that is causing the buttons to render differently than the code expects, but I can't isolate the exact problem.

Has anyone else seen this error?

Great plugin, it's fantastic. Thank you for sharing it. I have some ideas for you possibly.

1. Integrate some Asia social networks as well. RenRen and Weibo are two very large ones in China.
   http://renren-inc.com/en/
   http://www.guardian.co.uk/technology/pda/2011/jul/15/weibo-twitter-china
2. With all these social networks but no one really wants them all at the same time, it would be cool to have an online builder like Twitter Bootstrap has which lets the user pick what he wants. I know this is deluxe but cool still.
   http://twitter.github.com/bootstrap/download.html

It may be useful to add an extra argument to the getElements method for a tag name. This would enable the use of the more performant .querySelectorAll().

E.G. context.querySelectorAll(tagName + '.' + className);

In my experience the fall back for this may also be faster.

JSPerf: http://jsperf.com/the-speed-of-selectors-with-tag-names/2

https://dev.twitter.com/docs/tweet-button#related

Hi,
i've been trying to change dynamically the URL to share, but even with removing the classes 'socialite-loaded' and 'socialite-instance', changing the properties i need, emptying each social sharing tool and relaunching the function load(), the laod function doesnt seem to work.

Your help would be greatly appreciated.

Thanks,
Valérie Michaud

Hi,
I am facing problem with pinterest button on my website,I can load only one pinterest button on my page with socialite.js,There are multiple pinterest buttons on my page.
Also my site is not working properly as I am getting this error in IE 9 'Unable to get value of the property 'removeChild': object is null or undefined'. When checked this function (removeNetwork) is related to the pinterest extension.
also in IE 8 a different error is shown on same line "el.parentNode" is null or not an object.

Can you please help me how can load multiple pinterest buttons on my site

Thanks

For some reason in my website facebook button is loading but 0px width and 0px height, the span inside of the .fb-like div and iframe inside of the span has style="height: 0px; width: 0px;";

I really don't know the reason because this is happening, is there a CSS problem (I've tested with CSS fixes but didn't work)

Past versions of Socialite.js appended scripts to the body element.

I've recently updated to insert before the first script (see Paul Irish's article on this technique).

What are the issues/benefits either way? From what I understand, and what Socialite is doing, it should be OK whatever choice is made here?

Implementing the Quora Follow Button in Socialite may be tricky.

The normal embed code looks like this:

<span class="quora-follow-button" data-name="David-Bushell">
    Follow <a href="http://www.quora.com/David-Bushell">David Bushell</a> on <a href="http://www.quora.com">Quora</a>
    <script type="text/javascript" src="http://www.quora.com/widgets/follow?embed_code=MikiaY7"></script>
</span>

This is awful (edit: that's a bit harsh! I mean "not ideal") for three reasons:

• The embed_code in the query string makes each script URL unique. From what I've tested it isn't actually needed, though in future this may change. Why it isn't a data attribute I don't know.
• To customise the widget colour a class of dark can be added. Not a data attribute, not even a namespaced class, just dark.
• Worst of all, the <script> element must be a child of the .quora-follow-button element. Therefore it must be duplicated for every instance. The suggested code doesn't even have async set.

All the script does is create an iframe. There is no API exposed to activate new instances. Socialite could very easily create the iframe itself but since none of this is documented we can't rely on the implementation remaining the same in future (the way we can with Facebook's documented iframe).

Socialite assumes each network (or group of widgets) requires one script element for all instances (the sensible way every other network works I've encountered). From what I can see we'll have to bypass this for Quora else it'll require a lot of changes in the core.

It would appear the new Tweet button iframe (at least for data-count="vertical") needs an explicit width otherwise it takes the width of the containing element. Other networks produce an iframe that's too big but the button doesn't scale to fit.

I was hoping to avoid specifying any iframe dimensions because it would mean hardcoding the various customisations.

Perhaps CSS is the better solution?

Hi I'm using a mootools.js drop down menu which works great until adding socialite, then the menus no longer drop down.

This is my script code:

<!-- Social Networks -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="socialite.js"></script>
<script>

$(document).ready(function()
{

    var articles = $('article.text'), socialised = { }, win = $(window), updateArticles, onUpdate, updateTimeout;

    updateArticles = function()
    {
        // viewport bounds
        var wT = win.scrollTop(),
            wL = win.scrollLeft(),
            wR = wL + win.width(),
            wB = wT + win.height();
        // check which articles are visible and socialise!
        for (var i = 0; i < articles.length; i++) {
            if (socialised[i]) {
                continue;
            }
            // article bounds
            var art = $(articles[i]),
                aT = art.offset().top,
                aL = art.offset().left,
                aR = aL + art.width(),
                aB = aT + art.height();
            // vertial point inside viewport
            if ((aT >= wT && aT <= wB) || (aB >= wT && aB <= wB)) {
                // horizontal point inside viewport
                if ((aL >= wL && aL <= wR) || (aR >= wL && aR <= wR)) {
                    socialised[i] = true;
                    Socialite.load(articles[i]);
                }
            }
        }
    };

    onUpdate = function()
    {
        if (updateTimeout) {
            clearTimeout(updateTimeout);
        }
        updateTimeout = setTimeout(updateArticles, 100);
    };

    win.on('resize', onUpdate).on('scroll', onUpdate);

    setTimeout(updateArticles, 100);

});

</script>

Can anyone please help get the two working together?

Thanks very much. :)

Hey David,
your Pinterest-extension has a little "bug". In my test I loaded the social-buttons on div-hover and I used fb, tw and pin. On the first div it all worked proper and normal (pinterest = div), but on all other divs, pinterest is now an iframe and not longer a div (I use pinterest without the counter (=43px width), the iframe has 90px width) now etc...

Demo: http://mnfw.de/i4

(The problem lies not in the same Pinterest URL.)

Cheers, Andi

First, I just want to say how awesome this script is. It definitely makes these social buttons easier to add and faster to load along with the site.

Not sure if anyone else notices this, but I just happen to browse my site where I'm using Socialitejs as well as the Socialitejs.com site and noticed that on first load in IE, the Tweet button doesn't load with the rest of the social media buttons until the event is initialized again.

It works perfectly in other browsers, just IE is being temperamental.

For me this issue isn't a big problem as I've only really used it on my site, but just putting it out there.

http://creative-le.com/temporary/screenshot.jpg

Just a temp screenshot of what happens whenever I go to the site. While in FF and other browsers, the Tweet button will load.

Surprisingly enough if I happen to click on that "Load Buttons" button, the tweet button above it will finally show up as well.

Parsing the attributes of an element with the getDataAttributes method could be improved (because everyone hates loops don't they?) by looking for the native .dataset property.

I can fork and do this later if you're interested.

Hi,

I've been experiencing that the facebook like button suddenly stopped to show up. I know it's there (I can see the iframe injection) - But yeah it's just 'hidden'.

Example: https://hosting4real.net/ scroll to the bottom of the page.

When someone likes a page on our site, which is hosted on Heroku, Facebook says "Billy Joe likes ourdomain.herokuapp.com" instead of "Billy Joe likes ourdomain.com". Any ideas / help would be appreciated.

I'm trying to use Socialite on a site that is still using Twitter's Anywhere. To makes things worse, the script is being loaded synchronously and there's no way I can change that.

Anyways, I was getting an error and I tracked it down https://github.com/dbushell/Socialite/issues/22[issue 22] - basically window.twttr exists, but the .ready() method isn't available. I tried your suggested workaround and the error stops - but the widget is not generated correctly (I get the socialite-loaded class, but instead of the iframe I just see the fallback link).

Weirdly enough, if I comment out the whole twttr check it works.

Any ideias?

window.twttr = (t = { _e: [], ready: function(f) { t._e.push(f); } });

t is never declared and therefore becomes a global variable.

Hey there,

Looks like there's some problems with displaying G+ using socialite at the moment on IE - the socialitejs.com homepage exhibits the same problems as I'm seeing on my own site - G+ button is just not being loaded at all.

Thanks!

Andrew

Twitter popup is occasionally blocked by Google Chrome. This only seems to happen when you click immediately after the Tweet button appears. You can observe this behavior on the socialitejs hover demo page.

http://socialitejs.com/demo/hover.html

Loading buttons results in failed GET requests, this is present everywhere in Chrome and Canary (works fine in Firefox, IE).

Seems like one of the newer Chrome updates messed something up here, it's almost as if the GET requests are being automatically denied (console shows a failed GET however clicking through takes you to the correct file).

The issue is visible on the socialie.js website, open your console and attempt to load buttons.

http://socialitejs.com/

right now the readme says that you can use extensions, but doesn't have a section that actually explains how to make that happen.

it is because the text that grabs both the image, title and description?!

The metas of FB have something to do? or is the first thing in the case of the picture??! Thanks to anyone who can explain!

The Twitter Web Intents JavaScript API specifically mentions the following call for Re-evaluating content:
twttr.widgets.load();

This is currently being used.

However more recently a parameter can now be passed to twttr.widgets.load();.

The specific comment by Twitter employee André Pinter (14 weeks and 1 day ago) on the discussion Cannot update tweet button with Ajax:

twttr.widgets.load now takes an optional root HTMLElement argument. You can start using this now!

Hopefully there is some performance gain from this.

Cheers,
Dean.

If you run a Twitter profile widget (https://twitter.com/about/resources/widgets/widget_profile) and Socialite.js on the same page, you run into the error:

"Uncaught TypeError: Cannot read property 'regexen' of undefined".

The Twitter widget shows but there are no tweets in it.

On https://developers.facebook.com/docs/reference/plugins/like/, I can choose an application for my like button to be related to.
It is simply appended after the JS URL :

  js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1&appId=<id>";

It would be great to have a way to specify it in the Socialite load call (or before it).

Facebook "Send" button not showing, is there a way to enable the XFBML as per http://developers.facebook.com/docs/reference/plugins/like/

How can I do this ?