StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>This could be inteteresting for me too so I just fixed the tutorial script:</p> <p><a href="http://jsfiddle.net/5Kme2/" rel="nofollow"><strong>JSFiddle</strong></a></p> <p>Of course you need to import jquery and the viewport plugin (if you want to use it).</p> <pre><code><script src="jquery.js"></script> <script src="jquery.viewport.js"></script> </code></pre> <p>Then include fbroot tag only once and give the holders an specific data-url attribute because loading one url multiple times doesn't seem to be possible. Late we will read out this data-attribute.</p> <pre><code><div id="fb-root"></div> <div class="facebookHolder" data-url="https://www.facebook.com/Google"></div> <p style="height: 500px;"></p> <div class="facebookHolder" data-url="https://www.facebook.com/yahoo"></div> <p style="height: 500px;"></p> <div class="facebookHolder" data-url="https://www.facebook.com/stackoverflowpage"></div> </code></pre> <p>Then use the following jQuery code:</p> <pre><code>$(document).ready(function() { jQuery.getScript('http://connect.facebook.net/en_US/all.js#xfbml=1', function() { // initiate like boxed already in viewport as soon as fb sdk loaded. checkScrollingForWidget(); }); function checkScrollingForWidget(event) { $('.facebookHolder:in-viewport').each(function(index, item) { if (!$(item).hasClass('fb_loaded')) { $(item).append('<fb:like-box href="' + $(item).attr('data-url') + '" width="300" show_faces="true" stream="false" header="false"></fb:like-box>'); $(item).addClass('fb_loaded'); FB.XFBML.parse(); } }); } $(window).bind('scroll', checkScrollingForWidget); }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload