I add FaceBook Likebutton, Google +1 button and Twitter button to MasterPage.master and let these
button to display on all my webpages.
My IPS block FaceBook, Google and Twitter, so default.aspx is very slow to display because the webpage have to wait for loading FaceBook, Google +1 button code completely.
Is these a way to delay loading FaceBook, Google +1 button code and display the content default.aspx first?
You can download the code at http://dl.dropbox.com/u/209352/WebSite2.zip
==============================Default.aspx====================
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
</asp:Content>
=========================MasterPage.master===================================
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div class="fb-like" data-href="http://www.myweb.com" data-send="false" data-layout="button_count"
data-width="120" data-show-faces="false" data-font="verdana">
</div>
<div>
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.supercoolbookmark.com/"
data-count="horizontal" data-via="mycwcgr">Tweet</a><script type="text/javascript"
src="//platform.twitter.com/widgets.js"></script>
</div>
<div>
<g:plusone size="medium"></g:plusone>
</div>
<div>
<p>Hello, the world!</p>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
<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>
<!-- Place this render call where appropriate -->
<script type="text/javascript">
(function () {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</body>
</html>
You could add js.async = true; to the Facebook javascript – it will (like the similar line in the Google+ javascript) help with some newer browsers.
If that doesn’t work, then the obvious option would be to use javascript to inject the three relevant divs after the page has finished loading. jQuery makes this very easy.