Can someone explain to me why the following code isn't working? I have copied the code from Google and I need the "onshare" facility which I don't believe is available through the standard HTML. There are no JS errors - and nothing renedered:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="https://apis.google.com/js/platform.js" async defer></script>
</head>
<body>
<h1 style="font-family:arial;font-size:15px;">google_test</h1> <div id="sharePost"></div>
<script>
var options = {
contenturl: 'https://plus.google.com/pages/',
contentdeeplinkid: '/pages',
clientid: 'YOUR ID HERE',
cookiepolicy: 'single_host_origin',
prefilltext: 'Create your Google+ Page too!',
calltoactionlabel: 'CREATE',
calltoactionurl: 'http://plus.google.com/pages/create',
calltoactiondeeplinkid: '/pages/create',
onshare: function(response){
alert(response);
}
};
gapi.interactivepost.render('sharePost', options);
</script>
</body>
</html>
After some investigation (5/1/15) I discovered that in the response (net panel in firebug) I was getting an error back in a hidden text box. This was because my origin url was wrong, but now I get the following:
<input type="hidden" id="error" value="true" />
<input type="hidden" id="response-form-encoded" value="state=887621045%7C0.2365188186&error=immediate_failed&num_sessions=1&session_state=MY_SESSION_ID" />
Any idea what this might mean?
You load Google api with async defer. Therefore it is not ready when you create the share link.
Either you should render the share link only after the page is loaded ( using the domready event ), or remove the 'async defer' attributes.
The answer is so simple - thanks to http://wheresgus.com/iodemos/demotargetipost/ for helping me see it. In the example above,
<div id="sharePost"></div>
Simply needs a content such as this:
<div id="sharePost"><button>hello world</button></div>
In fact you don't even need the button!! Why on earth the documentation doesn't have this I don't know - so have reported the documentation as not being great. Additionally you should note that the callbackurl and calltoactionurl both need the same protocols - again their examples differ.
Related
I'm new to using Vue and am trying to build a simple search feature that takes an input query and returns all users that match the query.
I'm attempting to do this by following along to a video demonstration of it.
I have no clue where I am going wrong as there is no error in my console, however I am currently facing an issue where the page loads and I can see the content for a second and then it flashes white and the page goes blank.
The code for the page looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta id="X-CSRF-TOKEN" content="{{ csrf_token() }}">
<title>Laravel</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" />
</head>
<body>
<div class="container" id="searchPage">
<h1>Real Time Search</h1>
<form class="form-horizontal" v-on="submit: false">
<div class="form-group">
<label class="control-label">Search:</label>
<input type="text" class="form-control" v-model="query" v-on="keyup: search">
</div>
</form>
<pre>#{{ $data | json }}</pre>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.3/vue-resource.min.js"></script>
<script src="assets/app.js"></script>
</body>
</html>
And my app.js script looks like this:
Vue.http.headers.common['X-CSRF-TOKEN'] = document.getElementById('X-CSRF-TOKEN').getAttribute('content');
new Vue({
el: '#searchPage',
data: {
query: '',
users: [],
},
methods: {
search: function() {
this.$http.post('/', { query: this.query } ).then(function(response) {
console.log(response);
}, function(response) {
// error callback
});
}
}
});
Where am I going wrong? Or what is causing this?
There are a couple of things here. Firstly, you are using Vue 2.0. In vue 2.0 the v-on="submit:..."; syntax is deprecated (in fact it looks like this syntax is from 0.12). If you want to stop the form submitting, you now need to add v-on:submit.prevent:
<!--This will stop the form from submitting -->
<form class="form-horizontal" v-on:submit.prevent>
You have a similar issue for v-on="keyup: search" which should be v-on:keyup="search"
<!-- Call the search method on keyup -->
<input type="text" class="form-control" v-model="query" v-on:keyup="search">
It's worth taking a look at the docs at: https://vuejs.org/guide/ to get familiar with the basic 2.0 syntax.
OK, a different, much simpler answer. I've just spent a couple of hours trying to solve the same symptoms. It turns out my problem was this:
Yup, I'd put "=" not "==" on the second condition. Now in VB you'd never have had that problem ...
Quite why this stops the whole page appearing without any errors in the console, I'm not sure, but I have to say in general I'm loving Vue JS (for the first time I can actually write client applications productively).
My coding as below:
<!DOCTYPE>
<html>
<head>
<script src="https://connect.facebook.net/en_US/sdk.js"></script>
<meta property="fb:app_id" content="1665615247095212" />
<meta property="og:type" content="heppiheppi:shares" />
<meta property="og:url" content="http://mywebsite.com" />
<meta property="og:title" content="Walk-in" />
<meta property="og:image" content="http://mywebsite.com/images/intro.jpg" />
<meta property="og:description" content="Bring more customers" />
</head>
<body style='padding:0;margin:0;'>
<div id="fb-root"></div>
<script>
FB.init({
appId : '1665615247095212',
xfbml : true,
version : 'v2.7'
});
function LaunchDialog(){
FB.ui({
method: 'share_open_graph',
action_type: 'og.shares',
action_properties: JSON.stringify({
object:'http://mywebsite.com',
})
},
function(response) {
if (response && !response.error_message) {
alert('Posting completed.');
} else {
alert('Error while posting.');
}
});
}
</script>
Share now
</body>
</html>
If test on desktop browser, click "Share now", prompt the share dialog, click cancel/X, it will displays 'Error while posting.'
If test on mobile browser, click "Share now", prompt the share dialog, click cancel/X, it will displays 'Posting completed.'
Does anyone has any clue on this issue?
You set og:type to "heppiheppi:shares", have you created this Object type in your App !?? If it's not, set it back to "website".
Facebook team has confirmed this as a bug and assign this to the relevant team to investigate further.
Update from Facebook:
The sharing team have investigated in detail and determined that the discrepancy is due to the different code paths on our side for the mobile and desktop version of the dialog
When you receive a post ID or error message in the response object, it should be as documented if the user has logged into your app and/or has granted publish_actions permission
For all other cases, we don't document what the response will be, and the discrepancy you're encountering is that sometimes you receive an empty 'response' object and other times there's no response object at all
At this time it's not planned to make any changes to resolve this, and you cannot use the lack of response from the dialog to make any determination about whether a post was created
Apologies for the delay in getting a definite answer here, but you should assume that the current behaviour will remain in the short to medium term;
If long term changes are made, I think it's more likely that the response will be removed completely as that would be consistent with the other changes in this area to prevent share gating and other incentivization of users posts.
Okay, I should preface this by saying I'm pretty new to JS and HTML.
I am attempting to write a simple page that will take the value a user types into the form and use it to make a call to the Spotify api via my findArtist() function. I've set the project up with npm and have the proper dependencies in the node-modules directory and all of that stuff.
Here is my code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>My Title</title>
</head>
<body>
<header>
<h1>My Header</h1>
</header>
<section>
<form>
Search for an artist! <br/>
<input type="text" name="searchrequest" value="" onchange="findArtist()">
</form>
</section>
<script>
function findArtist () {
var artistName = document.getElementsByName("searchrequest")[0].value;
spotifyApi.searchArtists(artistName)
.then(function(data) {
console.log(data.body);
}, function(err) {
console.error(err);
});
}
</script>
</body>
</html>
When I type something in the search bar, I expect to see the call occur in my browsers console, where the JSON should be logged thanks to findArtist(), but nothing happens. Is this because I am attempting to use node when I should be using plain JS? Do I have to setup a server to make the call? I'm rather confused as to what my actual problem is.
I would like to add that I realize using onchange to call my function is going to put me over my api limit, so a suggestion on a better way to call the function would be appreciated as well.
Thanks for the help.
onchange detects changes only after you lose focus or blur from the textbox.
As this answer says oninput might just be the right method to look upto.
Trying to stream sound on page from soundcloud, as it said on API, but unfortunately there's no sound when I'm click on button.
Otherwise, when I "run" this code here or on jsfiddle - it works!
It must be problem that I'm trying to run it from local disc?
How can I solve it?
SC.initialize({
client_id: '53902af7a344bb0351898c47bc3d786f'
});
$("#stream").on("click", function(){
SC.stream("/tracks/49712607", function(sound){
sound.play();
});
});
<!DOCTYPE html>
<html>
<head>
<title>music</title>
<meta charset="windows-1251">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://connect.soundcloud.com/sdk-2.0.0.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id='player'>player
<input type="button" href="#" id="stream" class="big button" value="Stream It Again, Sam" />
</div>
</body>
</html>
You need to execute your call to the SDK while your files are hosted on a web server. But you can have the web server running form your local machine.
The problem is trying to run things from the filesystem. When doing so, you get the error:
NS_ERROR_DOM_BAD_URI: Access to restricted URI denied
To ensure you do have this error, please try the basic example from SoundCloud.
See also this question.
What technology to choose then depends on what you feel comfortable with...
For instance I do most of my local apps with Node.JS. Maybe the simplest way would be to use http-server as noted in your comment.
Launch it on the command line with: http-server <your-directory> -o. With -o your default browser will open and list the files in your-directory.
Notice that the SoundCloud docs are using the JQuery .live() function call but it is deprecated! That made their code work despite the DOM not being ready yet.
Here, you want to use the regular .on() function and have the binding of the click event handler done once the DOM is ready. For that you use $(document).ready(function() { ... });
Here's the code I used.
<!DOCTYPE html>
<html>
<head>
<title>music</title>
<meta charset="windows-1251">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//connect.soundcloud.com/sdk-2.0.0.js"></script>
<script>
SC.initialize({
client_id: "53902af7a344bb0351898c47bc3d786f"
});
$(document).ready(function() {
$("#stream").on("click", function(){
SC.stream("/tracks/49712607", function(sound){
sound.play();
});
});
});
</script>
</head>
<body>
<div id='player'>player
<input type="button" href="#" id="stream" class="big button" value="Stream It Again, Sam" />
</div>
</body>
</html>
Here's the scene:
The webpage doesn't have a google+ button.
User clicks a button.
AJAX request is sent which loads some text and the google+ button (<g:plusone href="http://www.website.com"></g:plusone>)
into a div.
I can see when I look at the code that it is there, but it is not rendering.
I've heard that this might be useful:
gapi.plusone.go();
But I'm not sure.
Any ideas?
Thanks
You're on the right track. gapi.plusone.go() is one way to explicitly render the +1 button. Here's a code snippet from the official docs that illustrates another method using gapi.plusone.render().
<html>
<head>
<title>+1 Demo: Explicit render</title>
<link rel="canonical" href="http://www.example.com" />
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{"parsetags": "explicit"}
</script>
<script type="text/javascript">
function renderPlusone() {
gapi.plusone.render("plusone-div");
}
</script>
</head>
<body>
Render the +1 button
<div id="plusone-div"></div>
</body>
</html>
The JavaScript API is further documented elsewhere on the previously linked page.