Lots of XFBML Facebook Like buttons are slow? - javascript

See http://running.ph/
It just hangs chrome for a while, while all the buttons load. I've read using IFrame avoids this but I really want to use XFBML JS for all the extra functionality you get with it like tracking Likes, comments, and the send button.
Does anyone have a solution to this?
I'm sure I'm not the only site with 10+ Like buttons on it.

ah I found the answer by checking what Techcrunch / AOL does.
You load the XFBML as the user scrolls.
1.) Don't Parse XFBML on FB.init or the loading of the JS SDK
FB.init({
appId : APP_ID,
xfbml : false
});
2.) Load jQuery and jquery.sonar.js - this contains scroll and scrollout custom events
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://artzstudio.com/files/jquery-boston-2010/jquery.sonar/jquery.sonar.js"></script>
3.) jQuery code to parse XFBML on scrollin event (stolen from Techcrunch)
jQuery(document).ready(function($) {
var $shareWidgets = $( '.share-widget' );
$shareWidgets.bind( 'scrollin', { distance: 500 }, function() {
var $share = $( this );
if (!$share.data( 'initFB' ) && window.FB) {
$share.data('initFB', 1);
$share.unbind( 'scrollin' );
FB.XFBML.parse( $share[0] );
}
});
});
4.) wrap your XFBML tags in a class called 'share-widget'
<span class="share-widget"><fb:like></fb:like></span>
and voila! no more dang XFBML slowing down your pages. Ofcourse this only helps when you have a lot of XFBML tags on your page. Which most blogs may have.
Thank you AOL!
See the SlideShare presentation of AOL using jQuery: http://www.slideshare.net/daveartz/jquery-in-the-aol-enterprise where they talk about this and other optimizations they use.

Sharrre loads your sharing buttons only when needed, you can use all like button features and it has built-in Google Analytics tracking.

I had problems with this, too.
It's Social network's API fault. If you look in Chrome to the NET tab, you'll see that there are 252 requests per page! (Facebook, g+, Twitter, your resources)
This is part of problem
loadScriptAsync('//connect.facebook.net/en_US/all.js');
it loads all scripts possible, maybe multiple times without caching. I think there's no chance to avoid this from your side
OT: Why do you require offline&SMS access when logging on your site? I think nobody wise would like to give you him/her phone number and/or offline access

Here a quick pure javascript snippet to aid with throttling of multiple like buttons:
https://stackoverflow.com/a/11002386/223002

Related

Embed Twitter User Timeline in Webpage

On my website, a user enters their Twitter username when they register and their timeline is embedded on their profile page. Until now, I've achieved this with the following JavaScript code:
<script type="text/javascript">
var twitterUsername = // read from database
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 30000,
width: 'auto',
height: 210,
features: {
scrollbar: true,
loop: false,
live: false,
behavior: 'all'
}
}).render().setUser(twitterUsername).start();
</script>
Recently I noticed the following messages appearing in the JavaScript console
TWITTER WIDGET: This widget is being deprecated, and will cease functioning soon. https://twitter.com/support/status/307211042121973760
TWITTER WIDGET: You can obtain a new, upgraded widget from https://twitter.com/settings/widgets/new/user?screen_name=electricpicnic
It seems that instead of using this widget I should use an embedded timeline. However, the docs seem to suggest that in order to embed a timeline in a page, you need to go to the widgets section of your settings page and setup a widget for each user whose timeline you wish to embed. Twitter gives you the code that will embed this timeline in your page, but this code contains an attribute data-widget-id="275025608696795138" which has a different value for each user.
Obviously this approach won't work for me, because it's not feasible for me to setup a widget for all my users (present and future) and store a data-widget-id for each of them. Is there some non-deprecated way that I can embed timelines, which allows me to provide the Twitter username at runtime?
Update
According to this post in the Twitter dev discussion group, this functionality is not available currently, but will be provided in a future version.
Twitter is deprecating their unauthenticated widgets. You will no longer be able to use those.
But Twitter has an API that you can call, and you can generate your own custom tweet timeline UI without having to use their widget. For an example of the UI, see http://tweet.seaofclouds.com/.
But you also have to know that you just can't call their API directly from Javascript, since their API has OAuth. You can call their API only from server-side code (I don't know what you're using now, PHP/Ruby/Python/Java?). Good news is, OAuth is an open standard and you can call their API using any language. Here is an example of the same widget, but it gets data by calling the API using PHP. This is a long term solution.
If the Twitter timeline is essential for your site - then you have to go the API way. You must register your site with Twitter, and then use OAuth to get a user's timeline data, and use that data to render the javascript widget.
With the new Twitter widgets, just create an authenticated twitter widget from your own account (e.g. YourName).
Then set the data-screen-name of the user (e.g. 'twitterUsername') you want to show and you end up with something like this:
<a class='twitter-timeline' href='https://twitter.com/YourName'
data-widget-id='your-widget-id'
data-screen-name='twitterUsername'>Tweets by #twitterUsername</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','twitter-wjs');</script>
Here is a bit of javascript that you can use to embed a user's timeline in a webpage
Add the script https://www.tweetjs.com/tweetjs.js
Then add the code:
TweetJs.ListTweetsOnUserTimeline("PetrucciMusic",
function (tweets) {
for(var i in tweets)
{
document.write(tweets[i].text + "<br>");
}
});
... Although I'd recommend using better styling than that :)
This is how I use it, feels pretty decent.
HTML:
<ul id="twitter_update_list">
</ul>
Script:
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="https://api.twitter.com/1/statuses/user_timeline.json?screen_name=theunexpected1&callback=twitterCallback2&count=10"></script>
Notice the "screen_name" variable sent out to the script.
You can customize your callback function (blogger.js), also you can save this file locally to avoid external request.
Hope this is useful.
For reference, I have created a jsfiddle here, you can take the CSS snippets too from there.
http://jsfiddle.net/rahulsv/8fRTD/
UPDATE:
This solution no longer works since Twitter updated to v1.2 - no unauthorized access to tweets.

Sending msg and post on own wall function no longer work

I created social feeds functions(sending msg to friends and posting on own wall) using javascript SDK and graph API in Facebook 2-3 months ago for my apps. It was working perfectly when I created but now, when I visit my app and try to use them again, it no longer works. It's so strange since I never touched that code after I implemented them. I even tried to copy and pasting exact sample javascript code given in Facebook document and it didn't work either. Even after I re-write my code, it still doesn't work either. I have no idea what is wrong. Anyone face similar problem with javascript SDK? Thanks in advance.
Hi,
The code is here: Sorry for late reply.
<script src='http://connect.facebook.net/en_US/all.js'></script>
<script>
FB.init({
appId : 'id',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
<script>
function share_wall() {
// calling the API ...
var obj = {
method: 'feed',
link: 'https://apps.facebook.com/id/',
name: 'test',
description: 'blalala'
};
FB.ui(obj);
}
</script>
I realized I actually have the same problem as you =\ Go to your app settings and make the additional configuration under Basic Settings.
If your domain is http://inspiration.nyp.edu.sg
If you are working on localhost
"Symptoms"
Previously, your JavaScript SDK functions were working fine. Now, executing your JavaScript SDK functions prompts you either an API Error Code 191 or an error.
Your PHP SDK functions are working fine.
Your JavaScript SDK functions work fine when you run your application as App on Facebook, but does not when you run your application as a Page Tab.
(For my case, the last date I checked was 7 August 2012 and my JavaScript SDK functions were working fine. It was until 3 September 2012 when I checked them again, then I encountered the errors mentioned above.)
I highly recommend everyone to check their Page Tab application's JavaScript SDK functions such as feed dialog, apprequests and etc.

When is ChannelUrl actually used?

Does anyone know when the ChannelUrl parameter, passed to FB.init, is actually used by the fb js sdk? I can see it getting hit in our nginx log files and it appears to be from IE8 users, but I cant seem to manually recreate it. I have a Fan Page iframe app, with like buttons and the comment plugins.
you can see this post. it is well explained.
https://developers.facebook.com/blog/post/2011/08/02/how-to--optimize-social-plugin-performance/
this post link may update in future. so I'm copy-paste-ing the whole post from the FB developer blog with giving the full credit to the author.
How-To: Optimize Social Plugin Performance
by Ankur Pansari - August 3, 2011 at 12:00am
Millions of websites use XFBML to render social plugins. We wanted to share some best practices that can improve the performance of these on your websites. Specifically, we offer custom channelUrl and asynchronous loading which, when used, will improve load times and reduce other issues such as double-counting of referral traffic from Facebook.
The custom channel URL is an optional parameter in the FB.init function called channelUrl. When you initialize the JavaScript library, add the channelUrl parameter in the FB.init function:
<div id="fb-root"></div>
<script src="//connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'YOUR APP ID',
status: true, // check login status
cookie: true, // enable cookies to allow server to access session,
xfbml: true, // enable XFBML and social plugins
oauth: true, // enable OAuth 2.0
channelUrl: 'http://www.yourdomain.com/channel.html' //custom channel
});
</script>
The channelUrl points to a file that you add to your local directory which helps improve communication speed in some older browsers. Without the channelUrl, we are forced to use workarounds such as loading a second copy of the webpage in a hidden iframe to properly load social plugins. The workarounds increase load times and inflate referral traffic from Facebook.
To create a channel.html file, add the following line to the file (located at http://www.yourdomain.com/channel.html):
<script src="//connect.facebook.net/en_US/all.js"></script>
If you have the ability to run PHP, we strongly advise setting a long cache for the channelUrl file to ensure optimal performance. Here is a sample PHP script that accomplishes this:
<?php
$cache_expire = 60*60*24*365;
header("Pragma: public");
header("Cache-Control: maxage=".$cache_expire);
header('Expires: '.gmdate('D, d M Y H:i:s', time()+$cache_expire).' GMT');
?>
<script src="//connect.facebook.net/en_US/all.js"></script>
In this case, you should also set the channelUrl file to the fully qualified URL such as http://www.yourdomain.com/channel.php.
In our testing, adding a custom channelUrl improves the performance in Internet Explorer and therefore its inclusion is advised for all of our developers. Internet Explorer yields statistically significant performance gains when including the parameter, where the load time of a test website with 5 XFBML plugins improves from 1.10 seconds to 0.43 seconds.
Asynchronous loading is another simple tactic that allows your page to load quickly without blocking the loading of other elements of your page. Upon successful loading of the JS SDK, we call the window.fbAsyncInit function. All front-end functions that depend on Facebook API calls should be separated and called via window.fbAsyncInit. This ensures that the Facebook features are loaded in a non-blocking fashion and will speed up its rendering, which has positive SEO benefits. When designing your social features, you should approach it with this mentality to start.
For example:
<html xmlns:fb="https://www.facebook.com/2008/fbml">
<body>
<div id="fb-root"></div>
<script>
/* All Facebook functions should be included
in this function, or at least initiated from here */
window.fbAsyncInit = function() {
FB.init({appId: 'your app id',
status: true,
cookie: true,
xfbml: true});
FB.api('/me', function(response) {
console.log(response.name);
});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
</body>
<html>
We’ve updated our documentation to reflect the importance of these options and changed the default sample code to include a channelUrl. We are continuing to update our docs as part of Operation Developer Love as well as share more best practices via “How-To” blog posts.

FB.ui permissions.request does not work properly

It became really annoying when discovered new bugs today.
Basicly what i'm trying to do is; showing a Facebook dialog box and getting needed permissions to app and run callback js function. But can not achieve this simple and the most important part of the app.
First, lets initialize it:
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function()
{
FB.init({appId: '135814169854494', status: true, cookie: true, xfbml: true, oauth: true });
FB.ui({method: "permissions.request", "perms": 'publish_stream,user_about_me,email,user_birthday,user_likes'} , function(response) { console.log(response); });
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/<?=$__FBLocal?>/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
Now Javascript popup displays but if you click Okay, Go to App button, it does not grant permissions or even popup does not go away. Nothing changes! weird
If you disable Enhanced Auth Dialog from Advanced Application Settings in Facebook Developers section,
PopUp Style changes:
When you click Allow button, a javascript error throws: FB.Auth.setSession incompatible with OAuth2.
It is really common bug. There are some tips to not to get this bug i could find but all of them is not working. ( Such as; remove any extensions to all.js url -which i don't have- or change oauth parameter in FB.init -does not solve anything anymore- )
So , the only workaround is -unfortunately- embeding the permissions dialog in to page by redirecting. If someone can achieve JS SDK permission dialog , please let me know. Really stuck with lack of documentation in Graph API pages.
First I would suggest creating another facebook application to get a new facebook ID and test with it. If it works, then something was corrupt within facebook's storagea of the original facebook application's data. If it doesn't work, then you have a reproducible bug which you can report to facebook via their bug tracking tool.
I'm pretty sure permissions.request is deprecated. Can you try using method: oauth instead of permissions.request? Also, the perms param needs to change to scope. See https://developers.facebook.com/docs/reference/dialogs/oauth/

Facebook Flash app cannot communicate with JavaScript

My index.php file loads the Facebook JavaScript SDK and the FBJS bridge:
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" src="FBJSBridge.js"></script>
It then inits the Facebook SDK:
<script type="text/javascript">
FB.init({
appId : '<?=$fbconfig['appid']?>',
session: <?php echo json_encode($session); ?>,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
And embeds the Flash file using swfobject:
swfobject.embedSWF("http://www.myserver.org/Facebook/app/app.swf", "holderDiv", "740", "616");
When I run this file on my server, I can communicate with Facebooks JavaScript SDK either indirectly through ExternalInterface calls, launching various Facebook UI dialogs etc. And I can also use the facebook-actionscript-api to launch the same dialogs directly from ActionScript.
When I however use this index file as my Facebook canvas url and load the swf in a Facebook iFrame, the communication crashes the application. I'm not sure how to debug this but I think it might have to do with crossdomain security. Any ideas on debugging and/or solutions are welcome.
The FBJSBridge.js has been replaced in the updated 1.5 of the API. It's now in the AS3 source.
It seems adding the parameter allowScriptAccess: "always" did the trick.
Strange this isn't mentioned in sample code applications ...
here u can find a tutorial with source coad ===
Communacation with Flash and javascript

Categories