如何添加Facebook喜欢和评论框图像javascript [英] How to add Facebook Like and Comments box to image javascript
问题描述
我想在我的Blogger博客上添加Facebook的按钮和评论框。它是一个使用JavaScript显示图片的图片博客。最近我使用Facebook JavaScript sdk实现了分享按钮，并且与我的图像脚本完美配合（共享图像缩略图和图像URL）。我想知道这个共享脚本是否可以以某种方式修改为使用它像按钮和评论框（仅显示当前正在查看的图像的注释）
I want to add Facebook like button and comment box on my Blogger blog.Its a pictures blog which displays pictures using JavaScript. Recently I have implemented share button using Facebook JavaScript sdk and its working perfectly with my image script(sharing image thumbnail and image URL). I want to know if this sharing script can be modified in some way to use it as Like button and comment box(showing only comments for image currently being viewed)
这是共享按钮脚本
<script>
(function() {
SocialShare = function() {
var self = this;
//////////////////////////////////////////////////////////////
//
// Facebook Share
// @link - link to share
// @picture - Picture to share
// @name - Name for the share
// @caption - caption for share
// @description - description for share
//
//////////////////////////////////////////////////////////////
self.facebook_share = function(share_obj){
FB.init ({
appId: share_obj.app_id,
status: true,
cookie: true,
xfbml: true
});
// create facebook share object
facebook_obj = {
method: "feed",
link: share_obj.link,
picture: share_obj.picture,
name: share_obj.name,
caption: share_obj.caption,
description: share_obj.description
};
FB.ui(facebook_obj,self.share_success);
};
//////////////////////////////////////////////////////////////
//
// Twitter Share
// @link - Link to share
// @description - description for share
//
//////////////////////////////////////////////////////////////
self.twitter_share = function(share_obj){
var windowProperties = "toolbar=no,menubar=no,scrollbars=no,statusbar=no,height=" + 250 + ",width=" + 500 + ",left=" + 150 + ",top=" + 150;
var popwin = window.open("http://twitter.com/share?url=" + encodeURIComponent(share_obj.link) + "&text=" + encodeURIComponent(share_obj.description), 'newwin', windowProperties);
popwin.focus();
};
return self;
};
})();
</script>
<a href='#' id='facebook_share' name='fb_share' type='button_count'><img src="http://cool-igadgets.appspot.com/fbshare.png"></a>
<script type="text/javascript">
$(function(){
// Init social share with FB_ID
sharer = new SocialShare();
var share_obj = {
app_id: 490866674364389,
**link: document.URL,**
**picture: pics[a],**
name: "Funny Pictures - WoOf Hits",
caption: "",
description: "Best funny pictures on the Web !"
}
// CLICKS
$("#facebook_share").click(function(event){
event.preventDefault();
sharer.facebook_share(share_obj)
});
$("#twitter_share").click(function(event){
event.preventDefault();
sharer.twitter_share(share_obj)
});
})
</script>
<script>
// Load the Facebook SDK asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
以上分享的链接 document.URL 来自图像脚本i我在我的博客上使用
The link to share above document.URL comes from the image script i am using on my Blog. And pics[a] is image links in the image script array.
推荐答案
当我修改为你的其他帖子，我想我可以找到一个办法。基于此方面的方式。如果您滚动页面直到结束，您会发现用户OptiTool的评论。我使用它来开发一种可能的方法。
As I menthioned in your other post, I think I could found a way. The way based on this side. If you scroll the page until the end, you find comments from user OptiTool. I used it to develop a possible way.
你必须做的：
首先插入以下JavaScript代码到您的页面：
First insert the following javascript code into your page:
<script type="text/javascript">
jQuery(document).ready(function()
{
$('#facebook_like').on('click', function()
{
var fbURL = "http://www.facebook.com/plugins/like.php?href=";
fbUR = fbUR + encodeURIComponent(pics[a]);
fbUR = fbUR + "&send=false&layout=button_count&width=120&show_faces=false&action=like&colorscheme=light&font&height=21";
var container = $(this).parent();
var w = 120;
var h = 27;
fbFrame = document.createElement("IFRAME");
fbFrame.setAttribute("src", fbURL);
fbFrame.setAttribute("scrolling", "no");
fbFrame.setAttribute("frameBorder", 0);
fbFrame.setAttribute("allowTransparency", true);
fbFrame.style.border = "none";
fbFrame.style.overflow = "hidden";
fbFrame.style.width = w;
fbFrame.style.height = h;
$(this).parent().empty().html(fbFrame);
});
});
</script>
确保您在您进行评估之后插入，在其中导入 jquery。 js 。
Make sure that you inserted it after you satement, where you import jquery.js.
第二：
将自己的按钮插入您的页面，无论你想要什么然后向他添加属性 id =facebook_like。
Insert your own like button into your page, whereever you want. Then add the attribute id="facebook_like" to him.
重要！因为我在Facebook上没有帐号，实际上我无法测试。所以不要怪我。
Important! Because I haven't a n account at Facebook, I couldn't test it practically. So don't blame on me.
这篇关于如何添加Facebook喜欢和评论框图像javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
