I am trying to implement a "Check-In" button for my website. The main purpose: when the user clicks the button, a Facebook share dialog will be opened and the users will be checked in a custom place. The user post will not be automatically posted and the message will not be set so that it dont violate the Facebook policy.
As fas as I know, this can happen with the Facebook Open Graph stories. I have added a "Place" option as an Open Graph Object type. I know that to able to do this my app requires "publish_actions" permission and my app is in the developers mode, so thats not the problem. I use Facebook Javascript SDK. So the code goes like this:
This is the OG markup (given by facebook):
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# place: http://ogp.me/ns/place#">
<meta property="fb:app_id" content="my-app-id" />
<meta property="og:type" content="place" />
<meta property="og:url" content="my-url" />
<meta property="og:title" content="my-place-name" />
<meta property="og:image" content="sample-url-image" />
<meta property="place:location:latitude" content="Sample Location: Latitude" />
<meta property="place:location:longitude" content="Sample Location: Longitude" />
and this is the function that invokes the share dialog (also given by facebook):
function share()
{
FB.api(
'me/objects/place',
'post',
{'object': {
'og:url': 'my-url',
'og:title': 'my-place-name',
'og:type': 'place',
'og:image': 'sample-url-image',
'og:description': '',
'fb:app_id': 'my-app-id',
'place:location:latitude': 'Sample Location: Latitude',
'place:location:longitude': 'Sample Location: Longitude'
}},
function(response) {
// handle the response
// for example (using Jquery)
$('#element').append('shared');
}
);
}
and this is how the function is called:
<span onclick="share()">click to share</span>
<div id="element"></div>
The problem is that the code doesn't work and the share dialog won't open. Where is my mistake?
Finally I created it just as a share button. With option to check if it's really posted, not canceled after that.
FB.ui({
method: 'share',
mobile_iframe: true,
title: 'My title',
href: 'url to share',
picture: 'image URL',
description: 'The description'
}, function (response) {
if (response && !response.error_message) {
alert('Thank you for sharing!');
} else {
alert('You have cancelled the share.');
}
});
},{scope: 'email'});
Related
I have the express checkout button on my ASP.NET webforms webpage but can't seem to figure out how to pass the total variable (stored in a label on the page) to the PayPal popup when the button is clicked.
I know this question has been asked already (How Can pass order Total to (amount: { total: '0.01', currency: 'USD' } ) in paypal) but the answer makes little sense to me and doesn't go into as much detail as I need as a beginner programmer.
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<script>
paypal.Button.render({
env: 'sandbox', // sandbox | production
style: {
label: 'pay',
size: 'small', // small | medium | large | responsive
shape: 'rect', // pill | rect
color: 'gold' // gold | blue | silver | black
},
// PayPal Client IDs - replace with your own
// Create a PayPal app: https://developer.paypal.com/developer/applications/create
client: {
sandbox: 'AWDwdGr-KZK4jJi0WBUZmFowgG6oCtLpNDxtXuiOfAT1UdNUYeSlvoXYkrKW7SRdcYqqjHCo7IcYPmJf',
production: 'Production ClientID'
},
// payment() is called when the button is clicked
payment: function(data, actions) {
// Make a call to the REST api to create the payment
return actions.payment.create({
payment: {
transactions: [
{
amount: { total: '0.01' , currency: 'EUR' }
}
]
}
});
},
// onAuthorize() is called when the buyer approves the payment
onAuthorize: function(data, actions) {
// Make a call to the REST api to execute the payment
return actions.payment.execute().then(function() {
window.alert('Payment Complete!');
});
}
}, '#paypal-button-container');
</script>
Could someone please give me some guidance on how I can go about doing this?
The answer you linked does explain this pretty well but as you wanted more explanation, in WebForms you can use asp.net inline server tags to access elements from your page as long as they are on an aspx file. The syntax is as follows:
<%=ElementName.Property%>
This allows you to either access the value directly or assign it to a javascript variable. In your case either should work fine, for elements such as labels and things that contain text the property you are looking for will generally be innerHTML or innerText, so the following should give you the result you need:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<script>
paypal.Button.render({
env: 'sandbox', // sandbox | production
style: {
label: 'pay',
size: 'small', // small | medium | large | responsive
shape: 'rect', // pill | rect
color: 'gold' // gold | blue | silver | black
},
// PayPal Client IDs - replace with your own
// Create a PayPal app: https://developer.paypal.com/developer/applications/create
client: {
sandbox: 'AWDwdGr-KZK4jJi0WBUZmFowgG6oCtLpNDxtXuiOfAT1UdNUYeSlvoXYkrKW7SRdcYqqjHCo7IcYPmJf',
production: 'Production ClientID'
},
// payment() is called when the button is clicked
payment: function(data, actions) {
// Make a call to the REST api to create the payment
return actions.payment.create({
payment: {
transactions: [
{
amount: { total: '<%=TheNameOfYourLabel.innerText%>' , currency: 'EUR' }
}
]
}
});
},
// onAuthorize() is called when the buyer approves the payment
onAuthorize: function(data, actions) {
// Make a call to the REST api to execute the payment
return actions.payment.execute().then(function() {
window.alert('Payment Complete!');
});
}
}, '#paypal-button-container');
</script>
I want to integrate Shutterstock Image Editor in my simple HTML app. So I make a developer account in Shutterstock and create my API Key. Below is my API:
Now I am using above API Key (Consumer Key) in my HTML as describe here. Below is my HTML file code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="https://s.picdn.net/editor/image/assets/integration.js"></script>
<script>
window.editorInstance = window.Editor({
apiKey: 'e1818-c5e61-74ce1-7ee31-6c7f8-7fb6d',
language: 'en',
image: 'https://www2.shutterstock.com/blog/wp-content/uploads/sites/5/2015/05/volcano-header-1440x960.jpg',
excludeFeatures: ['filters'],
initialPanel: 'text',
logo: true,
logoUrl: 'https://www2.shutterstock.com/base/public/images/logos/logo-shutterstock-de64a370ef.png',
primaryActionText: 'Save and close',
container: document.querySelector('#editor'),
canvas: {
height: 500,
width: 500,
fill: 'rgb(62, 69, 79)'
},
presets: [{
name: 'Icon',
height: 128,
width: 128
}, {
name: 'Book Cover',
height: 1600,
width: 2400
}],
onPrimaryAction: function() {
window.editorInstance.getBase64({
format: 'jpg',
quality: .91
}).then(function(base64) {
// Handle base64 image data
window.editorInstance.hide();
});
}
});
// Launch instance of Editor
window.editorInstance.launch().then(function(editor) {
// Actions
}).catch(function(err) {
// Handle error
});
</script>
After running my above HTML page Editor doesn't render. Below is my console log showing:
Failed to load resource: the server responded with a status of 403 (Forbidden)
and below screen is showing.
Also I visit Fiddle to integrate editor in HTML but this API is using JSFiddle Client. My question is how I implement Shutterstock photo editor in my HTML app. Please let me know what I'm doing wrong in my above code.
You need to contact api [at] shutterstock.com in order to access the Editor - they'll need to manually enable your api key for it.
I need to display Analytics dashboard on my web site. Like export it from google's website to mine.
I already used Reporting API V4
But I only get the login button.
as you can see, the dashboard from analytics are not displayed.
I need to do it with javascript or C#.
My code (based on this link ):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Analytics Reporting </title>
<meta name="google-signin-client_id" content="472734728686-21tqq751d9mdpkopnjmc1dnctf9644qc.apps.googleusercontent.com">
<meta name="google-signin-scope" content="https://www.googleapis.com/auth/analytics.readonly">
</head>
<body>
<h1> Analytics Reporting</h1>
<p>
<div class="g-signin2" data-onsuccess="queryReports"></div>
</p>
<textarea cols="80" rows="20" id="query-output"></textarea>
<script>
var VIEW_ID = '130082935';
function queryReports() {
gapi.client.request({
path: '/v4/reports:batchGet',
root: 'https://analyticsreporting.googleapis.com/',
method: 'POST',
body: {
reportRequests: [
{
viewId: VIEW_ID,
dateRanges: [
{
startDate: '7daysAgo',
endDate: 'today'
}
],
metrics: [
{
expression: 'ga:sessions'
}
]
}
]
}
}).then(displayResults, console.error.bind(console));
}
function displayResults(response) {
var formattedJson = JSON.stringify(response.result, null, 2);
document.getElementById('query-output').value = formattedJson;
}
</script>
<script src="https://apis.google.com/js/client:platform.js"></script>
</body>
</html>
I would suggest you look at Google Analytics Embed API. It is much easier from a standpoint based on my experience.
Assuming the code below, which works correctly (IE: when the user presses the share button, the content is published to THEIR page), how would I also get it to publish to the Apps page also, ideally changing the message slightly. At the moment the text posted to the users wall is, for example, "I like xx on xx website". I would also like the event posting to my App page, with a different message along the lines of " just liked xxx on our website".
Just to clarify, this code works OK, but I would like to publish to my Apps page at the same time with a different message.
Thanks in advance.
<input type="button" onclick="share_prompt()" value="Share" />
<script src="http://connect.facebook.net/en_US/all.js" type="text/javascript" charset="utf-8"></script>
<div id="fb-root"></div>
<script type="text/javascript" charset="utf-8">
FB.init({
appId: 'YOUR_APP_ID',
status: true,
cookie: true,
xfbml: true
});
function share_prompt()
{
FB.ui(
{
method: 'feed',
name: 'Facebook Dialogs',
link: 'http://developers.facebook.com/docs/reference/dialogs/',
picture: 'http://fbrell.com/f8.jpg',
caption: 'Reference Documentation',
description: 'Dialogs provide a simple, consistent interface for applications to interface with users.',
message: 'Facebook Dialogs are easy!'
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);
}
</script>
I want to publish to my wall and send invites to friends stylishly.
It seems stream.publish has become depreated now.
Any other method to do this..
I would be obliged if I could have some sample codes as well.
You could use the Feed Dialog:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<title>My Feed Dialog Page</title>
</head>
<body>
<div id='fb-root'></div>
<script src='http://connect.facebook.net/en_US/all.js'></script>
<p><a onclick='postToFeed(); return false;'>Post to Feed</a></p>
<p id='msg'></p>
<script>
FB.init({appId: "YOUR_APP_ID", status: true, cookie: true});
function postToFeed() {
// calling the API ...
var obj = {
method: 'feed',
link: 'https://developers.facebook.com/docs/reference/dialogs/',
picture: 'http://fbrell.com/f8.jpg',
name: 'Facebook Dialogs',
caption: 'Reference Documentation',
description: 'Using Dialogs to interact with users.'
};
function callback(response) {
document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
}
FB.ui(obj, callback);
}
</script>
</body>
</html>
You can see it in action in the examples section of the Facebook JavaScript Test Console.