Coder Social home page Coder Social logo

socialite's Introduction

Socialite v2

Because if you're selling your soul, you may as well do it asynchronously.

Socialite provides a very easy way to implement and activate a plethora of social sharing buttons — any time you wish. On document load, on article hover, on any event!

For a demo visit: socialitejs.com

Author: David Bushell http://dbushell.com @dbushell

Contributor: Tom Morton http://twmorton.com @tmort

Copyright © 2013

Changes from Version 1

Please be aware that class names used by Socialite have changed since version 1. All instances start with the class socialite, they gain the class socialite-instance once processed, and finally socialite-loaded once activated. Pinterest and Spotify extensions are no longer in the default build of socialite.js. See end of this README for full change log.

Using Socialite

Create an element with the class socialite and a class like twitter-share to specify the social network and type of widget. Best practice is to provide an accessible fallback URL like the example below. Style it however you like, though avoid using overflow: hidden in CSS as it will crop overlays. See http://socialitejs.com for demos.

<a class="socialite twitter-share" href="http://twitter.com/share" data-url="http://socialitejs.com">
	Share on Twitter
</a>

Use data-* attributes to configure your button. These configurations directly correlate to the individual network implementations, so while Twitter uses data-url, Facebook uses data-href. Not ideal but I'd rather keep this script very small!

Supported widgets are currently:

  • Facebook: facebook-like
  • Twitter: twitter-share, twitter-follow, twitter-mention, twitter-hashtag and twitter-embed (for individual tweets)
  • Google+: googleplus-one, googleplus-share, googleplus-badge
  • LinkedIn: linkedin-share, linkedin-recommend

Also available as extensions:

  • Pinterest: pinterest-pinit
  • Spotify: spotify-play
  • Hacker News: hackernews-share
  • GitHub: github-watch, github-fork, github-follow
  • DZone: dzone-submit

For all individual button configurations visit Twitter, Google+, Facebook, LinkedIn, Pinterest, and Spotify. Important: don't include the scripts provided by these networks, Socialite does that for you! Include socialite.js right at the end of your document and activate with the options below.

Please note: you can easily edit socialite.js to remove the social networks you don't need.

Making it Work

Load

Socialite.load();

The main Socialite function. load will search the document for elements with the class socialite and magically transform them into sharing buttons (based on a network class and data-* attributes).

Always wait for at least the DOMContentLoaded event — $(document).ready(function() { }); with jQuery.

Socialite.load(context);

Be kind! Provide a scope to search within using context (a containing element) rather than the whole document.

Activate

Socialite.activate(element, 'widget');

activate replaces a single element (or an array of) with the specific social widget.

Process (optional)

Socialite.process();

Run process only once when the document has loaded to prepare all Socialite instances. This may be necessary to avoid conflicts when multiple or unsupported widgets exist on the page (e.g. Pinterest buttons). Note that process removes all fallback content for some widgets. This optional will be implemented more intelligently in future versions of Socialite.

Setup (optional)

Socialite.setup({ /* settings */ });

setup allows you to specify settings for each network such as localisation (see below for all options).

Settings

Facebook

Socialite.setup({
	facebook: {
		lang     : 'en_GB',
		appId    : 123456789,
		onlike   : function(url) { /* ... */ },
		onunlike : function(url) { /* ... */ },
		onsend   : function(url) { /* ... */ }
	}
});

See Facebook's documentation on Internationalization for supported language codes.

Twitter

Socialite.setup({
	twitter: {
		lang       : 'en',
		onclick    : function(e) { /* ... */ },
		ontweet    : function(e) { /* ... */ },
		onretweet  : function(e) { /* ... */ },
		onfavorite : function(e) { /* ... */ },
		onfollow   : function(e) { /* ... */ }
	}
});

See Twitter's documentation for support on Web Intents Javascript Events and supported Languages.

Twitter share buttons can override the global language setting with a data-lang attribute.

Google+

Socialite.setup({
	googleplus: {
		lang               : 'en-GB',
		onstartinteraction : function(el, e) { /* ... */ },
		onendinteraction   : function(el, e) { /* ... */ },
		callback           : function(el, e) { /* ... */ }
	}
});

See Google's documentation for support on Events and Languages.

Contribute

Send me feedback and testing issues!

The main core of Socialite is built for extensibility. It's basically a fancy script loader designed for social widgets. They can be stripped out easily if not used and new ones added:

Socialite.network('network', params);
Socialite.widget('network', 'widget', params);

With these two functions you can add extended support. See the source code for examples (more guides to come here). I'm always working on support and settings for more networks, check back frequently!

WordPress Plugin

Tom Morton @tmort has also created a WordPress plugin that packages WPSocialite and makes it a one step installation into your WordPress powered website. Download it from here: http://wordpress.org/plugins/wpsocialite/.

Change Log

2.0.3 - 11th June 2012

  • added GitHub Buttons extension
  • Google+ window.gapi.render() now used on inner gplus div to avoid inline styles on the socialite element

2.0.2 - 10th June 2012

2.0.1 - 9th June 2012

  • added Google+ googleplus-badge widget
  • added a Buffer App extension
  • created an extensions folder in the repository
  • Pinterest and Spotify removed from the default socialite.js and socialite.min.js builds.

socialite's People

Contributors

14113 avatar adamaveray avatar alexzielonko avatar arturi avatar ay8s avatar bobthecow avatar brycedorn avatar cordoval avatar dbushell avatar develcuy avatar edubits avatar gwendolenlynch avatar idisposable avatar igrigorik avatar kkirsche avatar ostronom avatar rbubley avatar rhodimus avatar ryanneufeld avatar samaxes avatar tmort avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

socialite's Issues

Wrong URL is posted to Facebook.

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.

Pinterest-Button-Bug

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

Twitter conflict with Anywhere

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?

"Uncaught TypeError: Cannot call method 'removeChild' of null" with Pinterest

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?

Quora Follow Button

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.

"Execute any queued functions" Code to remove?

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]();
            }
        }
    }
})();

When using horizontal buttons,the position of buttons moves upwards

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

Feature request: Command line build tool

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.

Twitter replaced by Facebook on IE7/8

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.

Conflict with mootools.js

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. :)

Add Pinterest Pin It button and Count

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>

Where to append scripts?

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?

Sharing buttons not appearing in older IEs

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.

Pinterest not loading properly

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

Facebook button not shown

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.

iframes — explicit width needed?

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?

Loading Issues (Chrome, Canary)

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/

How to load the first Facebook like button?

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?

IE and Twitter Problems

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.

Pinterest lazy loading issues

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!

Default content texts

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!

ideas and China social

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

Possible performance improvement for Twitter

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.

Google Analytics social tracking

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.

Add Buffer App Button

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

Twitter conflict

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 !

Suggestion

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.

Facebook button is loading 0px width and height

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)

Feature request: Socialite on CDNJS

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

Google + button not displayed

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

Pinterest on Ajax pages

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

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

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.

Trying to refresh with new URL to share

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

Conflict with Facebook Comments

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.