On external website (not fb page) would like to put like button where once visitor click like button , it shows certain content.
Here is the code i might thinking it works if i'm not wrong but needs more help !
<div id="fb-root"></div>
<fb:like send="false" layout="button_count" width="100" show_faces="false"></fb:like>
<div id="hidden_content" style="display:none;">Thank You Dear</div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : '185373538XXXXXX', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
FB.Event.subscribe('edge.create', function() {
$('#hidden_content').show();
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
So any idea !
~Thanks a lot
Here's my idea (since you're looking for ideas and references).
edge.create will only fire when a user likes the link. You will need to account for what happens when a user comes to your page that previously liked it. I would suggest looking for a way to determine if the like has showed up.
Here's some documentation to read thru:
This might get you the graph id of your web page's url via the object_url table
SELECT url, id, type, site FROM object_url WHERE url = "http://developers.facebook.com/"
Then see if you can track it down in either a stream posting or in a like
Related
I know that there are various CTA cards that Facebook bot can use as seen here.
What I really need is a datepicker card that can be sent to the user where they can choose a date and send it back. Is this possible using Facebook bots?
Facebook messenger has not launched date and time picker in its templates.
But you can make you own with webview and Extensions help.
Follow these steps.
Create Button or Generic Template and put a button with
"buttons":[
{
"type":"web_url",
"url":"http://my_url_which_open_date_picker",
"title":"Select date",
"messenger_extensions": true,
"webview_height_ratio": "compact"
}
]
replace a url with your url.
NOTE: url should be in whitelist Your Domain
Now in that web page you can get userId of that particular user and couls easily map his actions for date picking.
On your page
<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.com/en_US/messenger.Extensions.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'Messenger'));
</script>
When the Messenger Extensions JS SDK is done loading, it will call window.extAsyncInit and you will get userId in that function.
<script>
window.extAsyncInit = function() {
// the Messenger Extensions JS SDK is done loading
MessengerExtensions.getUserID(function success(uids) {
var psid = uids.psid;
}, function error(err) {
});
};
</script>
uids is Object containing user ids
psid Page-scoped user ID
You may also want to close your calander page when user picks date.
This can be done via:
<script>
MessengerExtensions.requestCloseBrowser(function success() {
}, function error(err) {
});
</script>
In my code I have
FB.api('/me/friends', function(response) {
if(response.data) {
//TODO : what to do if no. of friends is more than 5000 (pagination by fb)
friends_data=response.data;
dijit.registry.byId("mainWidget_div").set_friends_data(friends_data);
} else {
alert("Error!");
}
});
And this gives an error. But, if I call this function manually(on the console), there's no error
FB.api('/me/friends', function(response){r=response;});
//wait a while
r
and now r.data is an array of my friends.
I checked the network panel and I gather that when I call this manually, an access token automatically gets inserted in the request url and when it is getting called via the code, the access token doesn't get inserted.
The full fb sdk loading code in my application is this:
<script type="text/javascript">
// You probably don't want to use globals, but this is just example code
var fbAppId = "{{facebook_app_id}}";
// This is boilerplate code that is used to initialize the Facebook
// JS SDK. You would normally set your App ID in this code.
// Additional JS functions here
window.fbAsyncInit = function() {
FB.init({
appId : fbAppId, // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse page for xfbml or html5 social plugins like login button below
});
// Put additional init code here
dojo.ready(function(){
FB.api('/me/friends', function(response) {
if(response.data) {
//TODO : what to do if no. of friends is more than 5000 (pagination by fb)
friends_data=response.data;
dijit.registry.byId("mainWidget_div").set_friends_data(friends_data);
} else {
alert("Error!");
}
});
});
};
// 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>
The answer from Brent Baisley and another answer to a different question, helped me figure out what was wrong.
You can't call FB.init() dependent methods right after FB.init() because it loads asynchronously. Even loading the data asynchronously like in dojo.ready() doesn't help. You have to wrap the code in FB.getLoginStatus().
My guess would be that you are trying to get the list of friends before the Facebook API is fully initialized. What is the error you are seeing?
You are registering the FB.api call to be run on DOM ready (dojo.ready). That might be causing it to load out of sync, even though it's all wrapped in fbAsyncInit. The friends API call itself has no dependency on the DOM, so I wouldn't wrap it in a dojo call. You're not doing that in the console and it's working.
I'm no javascript expert. If I made a possibly incorrect guess, the reason this happens could have to do with javascript hoisting.
I've been reading through other related questions here, but I think they are even too advanced for where I am at with Facebook's coding and such...
I want to have a Facebook Comment box on my website. That is no problem and it works fine. I also want to be notified, on Facebook, when someone leaves a comment. I've tried numerous different things with the comment.create but I really don't have a clue what I am doing.
Can someone take me through this step-by-step and help me understand what I need to do? Here is what I've got:
<body>
<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&appId=362160727158879";
fjs.parentNode.insertBefore(js, fjs);
}
</script>
<div class="fb-comments" data-href="{site name}" data-num-posts="10" data-width="650" notify="true"></div>
WX, I have a Classifieds app on Facebook. I needed to create some notification to the owner of the advertisement also. I solved that with a simple way, after a comment I manipulate the response from FB with Ajax and Jquery:
FB.Event.subscribe('comment.create', function(response) {
//Send an email with ajax
$.ajax({
type: "POST",
url: "sendcommentemail.php?",
data: "urlofpage=",
beforeSend: function() {
$('#loading').show();
},
success: function(html){
$('#loading').hide();
},
error: function(html){
}
});
});
good luck!
What you need is just add a friend in the app settings on the page as moderator.
He/she will get notification in their Facebook profile each time someone is commenting on your website.
Also, this tool is very handy and to be Favorited for people with developer accounts:
https://developers.facebook.com/tools/comments
I have an 'Add To Timeline' button and I can already add posts to the timeline using another function, but now I want to be able to obtain the requestID of an action so that I can delete it from another javascript function I have. I been searching everywhere but can't find a good example so that I can learn how to obtain the ID, I'm still confused on how to do it. This is the code:
<script type="text/javascript">
function deleteRead(requestId)
{
FB.api(
requestId,
'delete',
function(response) {
if (!response || response.error) {
alert('error...');
} else {
alert('Successfully Deleted!');
}
});
}</script>
Adding the Action ID number of a post directly works and I'm able to delete the post on my timeline. But I have to make it where it automatically obtains the id for each post.
Do I have to use the PHP SDK in order to obtain the requestID? This is the other code I am using:
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : 'I-have-my-app-ID-here', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk';
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
Even better, Is there a way where I can grab the requestID through PHP and pass it into a variable? depending on the post (if it's added to timeline), so that I can replace it with "requestID" to something like:
<?php echo $requestID; ?>
This way I can use the php code inside of my javascript where the requestID is and plus incase you want to use that same requestID that is obtained for something else in that same page. Example: if the post is added to Timeline it will show it's request ID number on that post page, incase you want to show the delete button only if its added to timeline, if it's not added, then don't show the delete button using a conditional statement.
There are two ways of doing this:
Store the IDs in a database for each action. This is not ideas as actions can be deleted from Facebook and can make it out of sync with your database.
Query the user's actions in real-time and use that to show a list of actions to delete. This is preferred.
Sample code:
// get activity from Facebook
$actions = $facebook->api('/me/' . $action_id );
// get ID of last action
echo $actions[0]['id'] );
You can then grab the ID of the post from above (e.g. $actions[0]['id']) and pass it to your JavaScript function or create a PHP function to delete the action. Optionally, you can loop through $actions to search if a particular action already exists, matching by URL, e.g.
if ( $actions[0]['data']['article']['url'] == $current_url ) {
...
}
I am building facebook iframe app. My application is loaded once (I receive signed_request once) and then I navigate through the pages in the iframe using internal domain links. I noticed that I see these strange messages both in Chrome and Firefox
FB.init has already been called - this could indicate a problem
I am pretty sure that this method is called only once and it seems Facebook wants me to call it once per application load (not once per page).
window.fbAsyncInit = function() {
FB.init({
appId: param('facebook_app_id'),
frictionlessRequests: true,
oauth: true,
channelUrl: site_url('/channel.html')
})
}
What error (if any) am I making here?
From the moment you pass parameters to the js.src like #xfbml=1&appId=X, FB SDK will auto init itself and thus FB.init will try to reinit..
So in your code, you don't have to remove the FB.init function, just make sure you don't pass parameters in the code that loads asynchronously the JS SDK.
Replace this:
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=X";
With :
js.src = "//connect.facebook.net/en_US/sdk.js";
If you really need to call init more than once you can do this:
FB._initialized = false;
FB.init();
but it makes no sense to me, I have a little bit different problem, but it is also related to FB.init has already been called - this could indicate a problem message.
I have AJAX-based website where after each page load I need to render XFBML from HTML that I get from AJAX request (comments, like button and other):
<div class="fb-comments" data-href="{REMOVED}" data-num-posts="5" data-width="760" colorscheme="dark"></div>
To do this, you can run this when you need to render XFBML:
FB.XFBML.parse();
I've also had this problem. I simply removed FB.init({...}) part and it started to work with following code:
window.fbAsyncInit = function () {
FB.Event.subscribe('auth.logout', function () {
// subscribe parts
});
// here is where fb.init() code was
};
(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=X";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
I guess it now auto inits code, so there is no need to do it manually. Now my code works again. I hope this helps.