I have to put facebook comment social plugin in my father's personal website.
Main problem is that website is in html (no asp or php).
Problem: I had to find a way to put the current page url in facebook plugin. i solved reading many solutions with jquery, but it seems to work only after the second page refresh (the first time comment box is loaded... but comments are not published on author timeline..)
this is my code:
in the head section:
<script>
$(document).ready(function() {
$('.fb-comments').attr("data-href", document.URL);
});
</script>
in body:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'MY_APP_ID',
xfbml : true,
version : 'v2.1'
});
};
<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/it_IT/sdk.js#xfbml=1&appId=MY_APP_ID&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<script>
FB.Event.subscribe('comment.create', function(response) {
alert('comment created: ' + response);
$(document).load('mail.php?response='+response);
});
</script>
at the end of the page, the comments box (it has not data-href because is pushed by jquery):
<div class="fb-comments" id="fb-comments" data-numposts="5" data-colorscheme="light"></div>
Why it's not working every time?
is code for async loading correct?
example url: http://www.lemiecime.it/cime/fancy.htm (it's a demo page.. you can put comments)
many thanks
Related
I would like, as a javascript newbie, update Facebook's customer chat plugin with some custom parameter in the ref field (actually cookie of the user to which I show the plugin). I cannot seem to be able to override the default that I set. Why is that? I've been stuck on this forever. I always receive the ref parameter default_ref.
Any help will be appreciated. Thanks
<!DOCTYPE html>
<head>
</head>
<script>
function updateRef(){
console.log("updating ref");
document.getElementById("chat").ref="update_ref";
console.log("tried to update ref;")
}
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxx',
autoLogAppEvents : true,
xfbml : true,
version : 'v3.0'
});
};
(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 = "https://connect.facebook.net/cs_CZ/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
console.log("customer chatloading");
document.getElementById("chat").ref = "test_work_please";
console.log("finished loading chat");
console.log("ref is " + document.getElementById("chat").ref);
</script>
<body>
<div id="chat" class="fb-customerchat"
messenger_app_id="xxxxxxxxxx"
logged_in_greeting="yyyyyyy
logged_out_greeting="zzzzz"
greeting_dialog_display="fade"
ref="default_ref"
page_id="xxxxxxxxxxxx">
</div>
</body>
In a process of hiding piece of content for people who didn't like our page yet. Using Facebook SDK for the first time. The idea is to have a call to action text and button. Once button is clicked, if user already likes our page- it shows a piece of content. If not- shows a like button and shows piece of content after it's clicked.
Here is connecting SDK
window.fbAsyncInit = function() {
FB.init({
appId : '348511868693215',
xfbml : true,
version : 'v2.8'
});
FB.AppEvents.logPageView();
};
(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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
And here is actual code for checking
FB.api({
method: "pages.isFan",
page_id: page_id,
}, function(response) {
console.log(response);
if(response){
//if liked
$(".show-poll").click(function(){
$(".actualpoll").show();
});
} else {
$(".show-poll").click(function(){
$(".likepage").show();
});
}
}
);
Your code "for checking" is executed before the SDK is loaded, i.e. before FB is available. Move the code inside the window.fbAsyncInit function. That function is called once the SDK is available.
I built module which displays FB like button on site. It works fine excepting when there is <script src="https://connect.facebook.net/en_US/all.js"></script> loaded before on the same page. If all.js is loaded before, fbAsyncIniti will never be triggered.
My code:
<div id="fb-root"></div>
<li class="fbLike">
<div data-share="false" data-show-faces="false" data-layout="box_count" data-href="<?php echo $share_url?>" data-action="like" class="fb-like"></div>
</li>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APP_ID',
xfbml : true,
version : 'v2.1'
});
};
(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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
It will work if I remove window.fbAsyncInit = function() { from the code. But this is not solution because I don't know if customer have all.js loaded before or not. I could check with jQuery if this script is already inside DOM, but this is still not proper solution because script can be inside DOM but not loaded yet.
What would be proper method to check if all.js was loaded before so I can remove window.fbAsyncInit = function() { only in such case? Or is there any other solution?
is there a way , I can track facebook like with help of event tracking in google analystics
ie. i want to use
ga('send', 'event', 'button', 'click', 'nav buttons', 4) ant not this code : ga('send', 'social', 'facebook', 'like', 'http://mycoolpage.com');
Ok ..this is how we can implement Google analystics in facebook
1) Facebook like is added via its social plugin and Facebook provide events to handle like button
for this put code like this in your jsp page .
2) Facebook provide window.fbAsyncInit method and any event provided by Facebook can be written into it .
3) more information can be obtained from
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Event.subscribe('edge.create',function(href,widget) {
ga('send', 'social', 'facebook', 'like', 'your facebook page link');
});
};
</script>
<script type="text/javascript">
(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&appId=0000000000000";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-like-box" data-href="http://www.facebook.com/xxxxxxxxxxxx"
data-width="450" data-height="590" data-show-faces="true"
data-stream="true" data-header="true"></div>
</div>
I am unable to inspect the "Like" button as I can't find it (assuming your site is mycoolpage.com), but you can do something like this, by attaching an onclick handler:
Facebook Like!
I'm trying to שמ IFRAME TAB on the Facebook page with fans gate page
The TAB works with link directly to the server, i put the button like plugin to when users clicked on the like the gate dropped and fans will place in the page. The problem is that when you click on the Like (of the Flagain), page does not get the command to refresh itself and nothing happens ... after searching several places on the net I found this function
<body class="body">
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId :'208195102528120',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
channelUrl : 'http://www.drinkin.co.il/ginger/coupon/coupon_ginger.html', // channel.html file
oauth : true // enable OAuth 2.0
});
</script>
<script>
FB.Event.subscribe('edge.create', function(href, widget) {
window.location.reload();
if (top.location!= self.location) {
top.window.location.href = "https://www.facebook.com/gingereilat/app_208195102528120";
}
});
</script>
<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>
<img src="https://www.drinkin.co.il/ginger/coupon/coupon_ginger_gate.jpg" width= "810" height= "1200" />
<div id="fb">
<div class="fb-like"><fb:like href="https://www.facebook.com/gingereilat" send="false" layout="button_count" width="200" show_faces="false"></fb:like></div>
</div>
</body>
</html>
It's good I think but it just does not work on FF & Chrome...
Try this:
window.top.location.replace("URL");
update:
<script>
FB.Event.subscribe('edge.create', function(href, widget) {
window.location.reload(); //Remove it
if (top.location!= self.location) {
window.top.location.replace("https://www.facebook.com/gingereilat/app_208195102528120");
}
});
</script>