I have a problem with a facebook like button.
In the facebook developer, facebook give us 3 differents methods to integrate the like button in our app. In this example I use all the 3 methods.
I have created 3 buttons in sencha architect touch (Ext.Button). After I have created a basic function where I pass to the HTML buttons config the 3 methods:
var me = this,
htmlStrBase,
htmlStr,
htmlStrBase1,
htmlStr1,
htmlStrBase2,
htmlStr2;
htmlStrBase = '<div class="fb-like" data-href="https://www.facebook.com/tecnitalia?ref=ts&fref=ts" data-layout="button" data-action="like" data-show-faces="false" data-share="false"></div>';
htmlStrBase1 = '<iframe src="//www.facebook.com/plugins/like.php?href=https://www.facebook.com/tecnitalia?ref=ts&fref=ts&width&layout=button&action=like&show_faces=false&share=false&height=35&appId=838403862859130" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:35px;" allowTransparency="true"></iframe>';
htmlStrBase2 = '<html xmlns:fb="http://ogp.me/ns/fb#"><fb:like href="https://www.facebook.com/tecnitalia?ref=ts&fref=ts" layout="button" action="like" show_faces="false" share="false"></fb:like>';
me.getLikebutton().setHtml(htmlStrBase);
me.getLikebutton1().setHtml(htm
lStrBase1);
me.getLikebutton2().setHtml(htmlStrBase2);
naturally first I have launched the FB.Init (for the desktop and for the App):
if(Ext.os.is.Android || Ext.os.is.iOS) {
FB.init({
appId : 'xxxxxxxxxxxxx',
status : true,
nativeInterface: CDV.FB,
useCachedDialog: false,
xfbml : true
});
//alert('dopo FB.init');
FB.Event.subscribe('auth.statusChange', function(response) {
//alert('status changed');
});
(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=XXXXXXXXX&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
}
//Otherwise let's use the the web version
else
{
//Wait for sdk to load
//alert('eseguo fbAsyncInit');
window.fbAsyncInit = function() {
FB.init({
appId : 'XXXXXXXXXX',
status : true,
xfbml : true
});
FB.Event.subscribe('auth.statusChange', function(response) {
//alert('status changed');
});
};
//alert(' after fbAsyncInit e now include SDK');
//Include SDK
(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
}
the final result is that on the desktop, it functions perfectly but on my android App not yet...I Don't see any like button.
I say you last thing....if I copy one of this 3 methods directly in the html button config I can see the like button on my App. But I cannot copy directly this methods in the HTML config button because I need to change the facebook address each time a user logged in my App.
Somebody can help me and knows a method to integrate in my app the like button dinamically?
thank you
Carlo
Hi Guillard. Thank's. It's function but I have another problem. in android After the Like Login It show me a blank page!!!! No with mozilla or Firefox on desktop.
Thank you
Carlo
One thing that made a difference for me was adding the Facebook Scripts after my panel with fb-root id was already in place.
Here I created a Container with a bottom toolbar and a another container (fb-root) that has a Like button for the Sencha page.
Ext.create('Ext.Container', {
fullscreen: true,
html : 'My Sencha touch panel',
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'Sencha Touch',
},{
docked: 'bottom',
xtype: 'toolbar',
ui: 'light',
items: [{
xtype: 'container',
id: 'fb-root',
width: 50,
height: 20
}]
}
],
listeners: {
initialize : function (container) {
(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#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
var html = '<div class="fb-like" data-href="https://www.facebook.com/senchainc" data-layout="button" data-action="like" data-show-faces="false" data-share="false"></div>';
container.query('toolbar container')[0].setHtml(html);
}
}
});
Fiddle: https://fiddle.sencha.com/#fiddle/cmm
Related
I'm trying to add regular messenger plugin to the website: https://outrainer.pl
I have added standard code:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '1957690761027872',
autoLogAppEvents : true,
xfbml : true,
version : 'v7.0'
});
};
</script>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
<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 = "https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//FB.CustomerChat.showDialog();
</script>
and required div:
<div class="fb-customerchat"
page_id="100751868404123">
</div>
However I can not see a plugin. Moreover when I try to run "FB.CustomerChat" from webcsonsole, it returns "undefined". What am I missing?
https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin/ or use the code generated via the setup tool in your page settings. The Customer Chat Plugin doesn't use the regular SDK anymore.
Am trying to implement Facebook customer chat plugin(which is generated by facebook) in JSF project, but when I insert the code snippet ... I don't get anything, no errors, no chat bubble, yet I can see a generated div with it's data
<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
xfbml : true,
version : 'v3.3'
});
};
(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/en_US/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Your customer chat code -->
<div class="fb-customerchat"
attribution="setup_tool"
page_id="*********"
theme_color="#44bec7"
logged_in_greeting="Hello, speak with us"
logged_out_greeting="Hello, speak with us">
</div>
it should be noted that I had to add double quotes for setup_tool as JSF was throwing error attribution="setup_tool"
It's working after adding
appId: '*****',
autoLogAppEvents : true
to FB.init
I want to show facebook like button. When a user clicks on the button it should make a callback after a user successfully likes that page.
Here is my code:
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-width="200" data-layout="box_count" data-action="like" data-size="large" data-show-faces="false" data-share="false"></div>
<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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '510679165797120',
xfbml : true,
version : 'v2.6'
});
FB.Event.subscribe('edge.create', function(response) {
console.log('hello');
});
};
</script>
But it is not working. When you click on the like button it shows an error.
Can someone please tell me how to solve this issue?
It could be worth changing the js.src line. To me I see it as though this line is looking for a local file.
js.src = "https://connect.facebook.net/en_US/sdk.js";
I previously used the following line, but I'm not sure of the difference to be truthful:
js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1"
You can get the code to like a Facebook page built for you directly by Facebook at this site --> https://developers.facebook.com/docs/plugins/like-button
That way you avoid deprecation issues, etc.
Just go there, enter the pertinent info, grab the code they spit out and place it on your site.
good luck!
demo : http://so.devilmaycode.it/facebook-like-button-showing-error-when-clicked/
The error happen because you are on localhost or not in the same domain you specidied in the app settings
also in order to work, your callback function should be at the top like below
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '#############',
xfbml : true,
version : 'v2.6'
});
FB.Event.subscribe('edge.create', function(response) {
console.log('hello');
});
};
(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>
I added Facebook Comment on my site.
window.fbAsyncInit = function() {
FB.init({
appId : appId,
xfbml : true,
version : 'v2.5'
});
FB.Event.subscribe('comment.create', addedComment);
};
(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/ru_RU/sdk.js#xfbml=1&version=v2.5appId=appId;
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
appId - number my application on facebook.
On page add next code:
echo "\n<div class=\"fb-comments\" data-href=".the_permalink()." data-num-posts=\"7\" data-width=\"470\"></div>";
(I using Wordpress) Commentbox show on site, comments show in moderation tools, but on refresh page commentbox is empty.Why?
(sorry for my English)
I added Facebook Comment Box to my site manually. I created an app and pasted the code on my template files.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '730627806953221', // App ID from the app dashboard
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK asynchronously
(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Then I added this:
<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-width="430" style="max-width: 100%;"></div>
It seems to work, when a user comments it displays correctly. However when I try to reply to someone who left a comment it doesn´t stay there. I´m trying to reply as a brand not as myself.
Why could this be?