[英]How to add Facebook Like and Comments box to image javascript
I want to add Facebook like button and comment box on my Blogger blog.Its a pictures blog which displays pictures using JavaScript. 我想在Blogger博客上添加按钮和评论框之类的Facebook。它是一个图片博客,使用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).
最近,我已经使用Facebook JavaScript sdk实现了共享按钮,并且它与我的图像脚本(共享图像缩略图和图像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)
我想知道是否可以通过某种方式修改此共享脚本,以将其用作“赞”按钮和注释框(仅显示当前正在查看的图像的注释)
This is the Share Button script 这是共享按钮脚本
<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>
The link to share above document.URL comes from the image script i am using on my Blog. 共享上述document.URL的链接来自我在Blog上使用的图像脚本。 And pics[a] is image links in the image script array.
pics [a]是图像脚本数组中的图像链接。
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.
如果滚动页面到最后,您将发现用户OptiTool的注释。 I used it to develop a possible way.
我用它来开发一种可能的方法。
What you have to do: 您要做的是:
First insert the following javascript code into your page: 首先,将以下javascript代码插入您的页面:
<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>
Make sure that you inserted it after you satement, where you import jquery.js
. 确保在插入
jquery.js
地点之后将其插入。
Second: 第二:
Insert your own like button into your page, whereever you want. 随时随地将自己的“喜欢”按钮插入页面。 Then add the attribute
id="facebook_like"
to him. 然后向他添加属性
id="facebook_like"
。
Important! 重要! Because I haven't an account at Facebook, I couldn't test it practically.
由于我没有在Facebook上开设帐户,因此无法进行实际测试。 So don't blame on me.
所以不要怪我
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.