将Friend Connect作为zblog博客的widget

Zblog独立博客上线一天，庆祝自己博客修改了传统主题成功，同时优化了标题关键字等基础的SEO步骤。总觉得边栏很空，当参考其它优秀博客时，看到左、右边栏有Google的Friend Connect，我感觉很不错，记得以前用Blogspot的时候，也发现了提供了两个html文件，提供给独立博客或网站的站长们使用，最后我自己摸索，成功创建Friend Connect，点击看我的博客nsoom.cn效果。Google Friend Connect 的社会化特性让我觉得它会是一个非常适合博客的 Widget，在某些方面让你的博客也具有一定的社会化的特性，让你的博客能够获得更多的用户。Friend Connect是互联网较好的社交工具之一，将它作为博客的widget，还可以扩展博客的趣味性和互动性。

下面以Z-blog为例，讲一下我的创建步骤：

第一步，当然自己得注册Friend Connect账户，建立新站点，填写自己的域名等信息。继续“将以下文件添加到您的站点中”，将rpc_relay.html和canvas.html下载下来，添加到自己的站点根目录。保存测试。点击左边生成的站点，点击“会员站点”。选择这个可以生成带头像的好友栏。点击右边“添加会员小工具”，宽度设置成188左右，具体可后来根据实际情况调整。点击右边下方生成代码。

第二步，桌面上新建一个txt文件，命名friend，把复制的代码粘贴到friend.txt文件，然后修改txt文件后缀名为asp。最后生成的文件是friend.asp。把friend文件上传到空间的根目录“INCLUDE”文件夹

/INCLUDE/friend.asp

第三步，进入zblog后台， 点击链接管理下的“文件管理”，可以看到空间里的文件夹和文件。依次打开THEMES\j-spring\TEMPLATE，我使用的主题名字是j-spring，如果你使用的是其他主题名字，请打开THEMES\你使用的主题名\TEMPLATE，可以看到default.html，点击default.html的编辑按钮，下拉找到形如：

 
<div class="function" id="div****">
<h3>“工具名称”</h3>
<ul>
<#CACHE_INCLUDE_FRIEND#>
</ul>
</div>
 
然后添加Friend Connect代码：
 
<div class="function" id="divFriend">
<h3>社交网络</h3>
<ul>
<#CACHE_INCLUDE_FRIEND#>
</ul>
</div>
 
到你选择的位置，比如我放在分类目录下，那我就把Friend Connect代码放到分类目录代码之下，工具命名为“社交网络”即：
 
<div class="function" id="divCatalog">
<h3>分类目录</h3>
<ul>
<#CACHE_INCLUDE_CATALOG#>
</ul>
</div>
 
<div class="function" id="divFriend">
<h3>社交网络</h3>
<ul>
<#CACHE_INCLUDE_FRIEND#>
</ul>
</div>
 

第四步：

点击提交，点击左边栏“主题样式管理”，再次激活你正在使用的主题，然后点击文件重建。

打开主页看看，是不是Friend Connect是不是已经显示了！

如果没有显示，检查friend.asp文件名和路径是否正确。Friend Connect工具栏的高度和宽度大家可以调整代码，以和其它工具栏对齐。

接下来你就把你Google里的好友添加到你的Friend Connect里吧，或者加入别人的Friend Connect，或者到相关的贴吧、小组、圈子之类的地方拉人。

可能大家还有比较好的其它办法，欢迎和我交流，共同学习。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有