将 Facebook Like 按钮添加到网站

• 下载源代码 - 4.58 KB

引言

将社交按钮（例如 Facebook Like 按钮）添加到网站的一个众所周知的问题是，它们会显著减慢网页的加载速度。 尽管通过使用异步加载技术在一定程度上解决了这个问题，但页面加载时间和响应速度仍然是一个大问题，尤其是在页面上有多个社交网络按钮时。

当我们将这些按钮添加到我们的 电子邮件营销软件 推广页面时，我们发现它增加了几秒钟的页面加载时间。 在互联网时代，几秒钟感觉就像永远一样。 

背景 

当 Facebook Like 按钮异步加载或在页面加载后加载时，页面的响应速度仍然会受到影响。 这是因为浏览器必须访问 Facebook 网站，查询其统计信息，例如总点赞数，然后使用这些信息呈现按钮。

如果您确实想在您的网站上的某个地方、某个时间点使用 Facebook Like 按钮，则必须呈现该按钮。 唯一的问题是什么时候。 这里介绍的技术是在鼠标悬停事件时加载该按钮，但它应该很容易适应其他情况。 

我们使用的技术是通过使用 JavaScript 来延迟按钮的实际加载。 Facebook Like 按钮最初只是作为图像加载，这避免了在页面加载期间查询 Facebook 网站； 只有当客户将鼠标放在按钮上时，才会执行按钮的实际加载和呈现。 

以下部分将详细解释如何将 Facebook Like 按钮添加到网站。 对于其他社交按钮，我们将在不同的文章中介绍该技术。 

获取您的 Facebook Like 按钮 

如果您尚未这样做，请单击此链接以获取您自己的 Facebook Like 按钮。 Like 按钮有不同的版本，一个使用 Facebook JavaScript SDK，另一个使用 iFrame。 在这里，我们选择 iframe 版本，因为它避免在当前页面上加载 JavaScript SDK。 Voicent 的 Facebook Like 按钮的 iFrame 版本的源代码如下所示

<iframe src="file://#/plugins/like.php?href=...></iframe> 

当您将此代码放在您的网页中时，它将显示一个带有右侧计数器的 Facebook Like 按钮。

延迟加载 Facebook Like 按钮

如果您尝试将 Like 按钮放在您自己的页面上，您会注意到页面加载和响应速度会受到影响。 正如我们之前解释的那样，为了呈现上面的 Facebook Like 按钮，您的浏览器必须访问 Facebook 网站。 嵌入的 iFrame 代码需要查询有多少人点赞了该项目，以及谁是当前的 Facebook 用户，然后将详细信息显示在按钮的右侧。 

一些网站在当前页面完全加载后延迟 iFrame 加载。 我们更进一步，将加载延迟到鼠标移动到按钮上方。 这将使页面尽早响应。

代替 iFrame，将其替换为简单的 img 标签，并定义 onMouseOver 如下

<div id="fblikediv">
   <img src="/images/fb-like-button.png"
        id="fblikeimg" 
        onMouseOver="return renderFbLike();">
</div>

renderFbLike() JavaScript 如下所示。 前三行只是删除 Facebook Like 按钮图像。 下一行实例化了 iFrame，进而加载了按钮。

function renderFbLike() {
        var parent = document.getElementById('fblikediv');
    var child = document.getElementById('fblikeimg');
    parent.removeChild(child);
        
    var html = "<iframe src=...></iframe>";
        document.getElementById('fblikediv').innerHTML = html;
}

由于我们无法在此 CodeProject 页面上添加 JavaScript， 我们将无法向您展示该按钮的实际行为。 但您可以访问我们的 测试 页面并进行测试。