Custom Facebook comment integration (JS SDK) - javascript

I have been tasked with implementing paragraph comments / annotations (like on Medium), however, the client's requirement is that all commenting is performed via Facebook's comment system, so that comments are published to peoples news feeds. Since it has to be "medium style commenting" I do not want to use the default Facebook comment injector - it's pretty ugly and does not meet the requirements.
I have found this great Facebook article on how to pull comments based off an url using the JS SDK, so now all I need is the ability to post new comments via the JS SDK. I have been trying to figure out their documentation, but I must admit that it is a bit overwhelming.
Is there anyone here who has experience with posting comments via the JS SDK, who can point me in the right direction?

I would suggest that you create a facebook object for each article, and keep that object id so you can "attach" comments to it, making pretty easy to also read the comments per each article.
Code wise, this would be the flow:
When you create an article, POST in your PAGE FEED as:
FB.api(
"/{page-id}",,
"POST",
{
"about": "Test about text",
"hours": "{'mon_1_open': '12:00'}",
"cover": "1234567890",
"offset_y": "45"
},
function (response) {
if (response && !response.error) {
/* response.id will have your post-id */
}
}
);
Then simple add comments to that POST ID like
FB.api(
"/{post-id}/comments",
"POST",
{
"message": "This is a test comment"
},
function (response) {
if (response && !response.error) {
/* handle the result */
}
}
);
to show all current comments, just call
FB.api(
"/{post-id}/comments",
function (response) {
if (response && !response.error) {
/* handle the result */
}
}
);
You can even have a new table where you can have internal_user_id / comment_id to bring all the user comments for your web application...

Related

MS Graph create onlineMeeting: "onlinemeeting cannot be null."

I'm currently trying to create online meetings using the Graph Explorer and facing a similiar problem like in this question: onlinemeeting-cannot-be-null-error-when-creating-new-meeting-with-beta-api.
Whenever I'm sending a Post request to https://graph.microsoft.com/v1.0/me/onlineMeetings the answer is a 400 Bad Request error with message: onlinemeeting cannot be null. The body looks like the example from the official documentation:
{
startDateTime:"2020-09-09T14:33:30.8546353-07:00",
endDateTime:"2020-009-09T15:03:30.8566356-07:00",
subject:"test"
}
No matter what, I can't get this to work. Other endpoints work well and the API permissions fit the requirements. Any thoughts on this?
The participants should be provided in the onlineMeeting resource, participants is one of properties in onlineMeeting object, you can also add other properties of onlineMeeting.
So you need to add it to your request body, here is a sample for your reference:
{
"startDateTime":"2019-09-09T14:33:30.8546353-07:00",
"endDateTime":"2019-09-09T15:03:30.8566356-07:00",
"subject":"Application Token Meeting",
"participants": {
"organizer": {
"identity": {
"user": {
"id": "550fae72-d251-43ec-868c-373732c2704f"
}
}
}
}
}

Paylike modal amount parameter

I'm currently testing the paylike's web sdk and I can use the sandbox easy. But how can I avoid the user can change the amount on the client side? The amount parameter is required, but how can I ensure about after a success callback about the amount? Can I get it from the server side?
The following code is fine, but I have problem with the amount parameter
<script src="//sdk.paylike.io/3.js"></script>
<script>
var paylike = Paylike('your key');
paylike.popup({
currency: 'DKK',
amount: 1000,
}, function( err, res ){
if (err)
return console.log(err);
console.log(res.transaction.id);
alert('Thank you!');
});
</script>
Two steps are important regarding transactions. The first step is authorization.
Authorization is done with the code you added here, on the frontend. The user can tamper with the amount, but this is merely a reservation and is not taking funds from the payer credit card.
The second step is called capture. You can only capture the funds from the Paylike dashboard, or via your server. When you do that, you generally send the same amount that you initially wanted the user to pay, and if the authorization were less, you would get an error. You can also fetch the transaction to inspect the amount that was authorized if you want to reject an order, for example. You can also send a custom parameter that you might use to validate on the server, similar to a checksum if you want to.
You have a private key, which users are not able to get, so that makes it safe. The 2 step approach is a validation on its own, but as I mentioned, you can also inspect the transaction.
You can check the API docs here: https://github.com/paylike/api-docs, where you will also find links to client-side SDKs.
If you are using PHP, using the PHP library (which I maintain) you can do this to inspect a transaction:
$paylike = new \Paylike\Paylike($private_api_key);
$transactions = $paylike->transactions();
$transaction = $transactions->fetch($transaction_id);
The transaction variable will look like this:
{
"id":"5da8272132aad2256xxxxxxx",
"test":true,
"merchantId":"594d3c455be12d547xxxxxx",
"created":"2019-10-17T08:32:34.362Z",
"amount":35,
"refundedAmount":0,
"capturedAmount":0,
"voidedAmount":0,
"pendingAmount":35,
"disputedAmount":0,
"card":{
"id":"5da82743735e61604xxxxxxx",
"bin":"410000",
"last4":"0000",
"expiry":"2023-11-30T22:59:59.999Z",
"code":{
"present":true
},
"scheme":"visa"
},
"tds":"none",
"currency":"JPY",
"custom":{
"email":"customer#example.com",
"orderId":"Could not be determined at this point",
"products":[
[
{
"ID":"48",
"name":"Hoodie with Pocket",
"quantity":"1"
}
]
],
"customer":{
"name":"John Doe",
"email":"customer#example.com",
"phoneNo":"020 91X XXXX",
"address":"123 Main Street, New York, NY 10030",
"IP":"10.0.2.2"
},
"platform":{
"name":"WordPress",
"version":"5.2.4"
},
"ecommerce":{
"name":"WooCommerce",
"version":"3.7.1"
},
"paylikePluginVersion":"1.7.2"
},
"recurring":false,
"successful":true,
"error":false,
"descriptor":"PHP API WRAPPER TEST",
"trail":[
]
}

Return all remote matches with typeahead without extra filtering

Can't seem to figure out a way to disable filtering with typeahead. Basically I just need the autocomplete (or rather drop-down search hint) functionality of it. I am doing a zip code search and resulting postal codes don't necessarily match the queried ones. How do I make it show all matches without doing extra filtering on those again?
Below is the code I have:
var dealers = new Bloodhound({
datumTokenizer: function (d) {
return Bloodhound.tokenizers.whitespace(d);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '/form/find-dealer?postalCode=',
prepare: function (query, settings) {
settings.url += encodeURIComponent(query);
settings.type = 'POST';
settings.contentType = "application/json; charset=UTF-8";
return settings;
}
}
});
$('input[name=postalCode]').typeahead({
minLength: 3
}, {
name: 'dealers',
display: function (data) {
return data.title;
},
source: dealers.ttAdapter()
});
Note: I know it seems a bit awkward to do a zip code search that way, but the purpose of the designer was for users to search interchangeably by dealer name and zip code.
Additional Info: typeahead.bundle.js - v0.11.1
It seems showing all without any (matching) query isn't possible:
https://github.com/twitter/typeahead.js/issues/1308
Though some are trying it with minlength=0 like this:
https://github.com/twitter/typeahead.js/issues/1251
And it looks it was possible in an older version:
https://github.com/twitter/typeahead.js/pull/719
Btw the plugin is no longer being developed and the manual is incomplete. An improved one can be found at this fork: https://github.com/corejavascript/typeahead.js/tree/master/doc
Having said that, you may be better off with another autosuggest, or a plugin like select2, which does show results by default and can use external sources.
If you want send a query to AJAX & get data from your database & add all JSON result for result of typehead (You have a data filter with database & send clean data with AJAX & JSON, But type head has extra filtering & don't show anything or some of your data), You must do it :
Open bootstrap-typeahead.js & find
item.toLowerCase().indexOf(this.query.toLowerCase())
And replace it to :
item.toLowerCase().indexOf(item.toLowerCase())
Will you can show all results from Ajax JSON ...
Not pretty, since the library has been forked and no longer oficially supported by the creator, but this fix did it for me https://github.com/twitter/typeahead.js/pull/1212 . Basically when in remote mode, it returns all matches, which is actually the proper behavior as I see it.
This SO thread helped twitter typeahead ajax results not all shown

google plus interactive post callback

I integrated Google+ Sign-In on my website, users can register on this site and when they share something via Google+ interactive posts, is attributed to their 1 point, so I need a callback from interactivepost otherwise not know if users cancel the sharing. Do you know how to get a callback from interactive post? The code is as follows:
<button id="gpShareBtn" class="g-interactivepost"
data-contenturl="<?php echo _PATHWEB; ?>"
data-clientid="<?php echo _GPCLIENTID ?>"
data-cookiepolicy="single_host_origin"
data-prefilltext="text"
data-calltoactionlabel="TRY_IT"
data-calltoactionurl="<?php echo _PATHWEB; ?>"
data-gapiscan="true"
data-onload="true"
data-gapiattached="true">gpshare</button>
Thanks in advance
You can actually get the status of each step of the sharing process with that plugin by adding an onshare key to the JSON (in this case a data attribute on the HTML tag) I made it using the render method of the JavaScript SDK as following:
var shareOptions = {
contenturl: "http://example.com",
clientid: "xxx.apps.googleusercontent.com",
cookiepolicy: "single_host_origin",
calltoactionlabel: "GO",
calltoactionurl: "http://example.com/go",
onshare: function(response){
// These are the objects returned by the platform
// When the sharing starts...
// Object {status: "started"}
// When sharing ends...
// Object {action: "shared", post_id: "xxx", status: "completed"}
}
};
gapi.interactivepost.render('some_div_id', shareOptions);
And I think you can do the same thing with the HTML tags as well.
Currently there is no callback available for interactive posts. There is an open feature request for this that you can star to show your interest and get updated:
https://code.google.com/p/google-plus-platform/issues/detail?id=521

How to render JSON response using latest typeahead.js library

I have got a search box in my application where in users can search for a patient details stored in the database. they would type in the name of the patient and server will respond back with JSON response with all the details. In order to facilitate such functionality, I am using the latest version typeahead.js.
Here is my javascript code:
$("#search-box").typeahead({
remote: 'searchPatient.do?q=%QUERY'
});
This code gives me following JSON response:
[
{
"id":1,
"surname":"Daniel",
"forename":"JOHN",
"address":
{
"id":23,
"houseNameOrNumber":"35",
"addressDetail":"Roman House",
"postCode":"NE1 2JS"
},
"gender":"M",
"age":27,
"dateOfBirth":"25/08/1985"
}
]
When typeahead library tries to render this response, I always see undefined in the drop down list. I want to show all the fields of this response in the auto suggest drop down list. I would appreciate if someone could guide me in doing so.
I want to display record like this in the drop down list:
John Daniel (M, 27)
35 Roman House, NE1 2JS
25/08/1985
Thanks in advance!
Your current code is too simple to achieve that, you need to use template and remote to achieve that:
$('#search-box').typeahead([{
name: 'Search',
valueKey: 'forename',
remote: {
url: 'searchPatient.do?q=%QUERY',
filter: function (parsedResponse) {
// parsedResponse is the array returned from your backend
console.log(parsedResponse);
// do whatever processing you need here
return parsedResponse;
}
},
template: [
'<p class="name">{{forename}} {{surname}} ({{gender}} {{age}})</p>',
'<p class="dob">{{dateOfBirth}}</p>'
].join(''),
engine: Hogan // download and include http://twitter.github.io/hogan.js/
}]);
Just to give you the basic idea, hope it helps.

Categories

Resources