Google plus share using dynamic content not working - javascript

I am working vehicle tracking website, here I have to share some dynamic content in google plus share that is as prefilled text. Issue is the content I am sharing in google plus is shared,when first time I click google plus share, after the content get refresh automatically one minute once through ajax, the prefill text content getting updated, but i click share button in google plus share window the content not getting posted to anyone.
Here is the sample code
<html>
<head>
<title>Share Demo: Deferred execution with language code</title>
<link rel="canonical" href="http://www.example.com" />
</head>
<body>
<script type="text/javascript" src="https://apis.google.com/js/client:plusone.js"></script>
<div id ="sharePost" action="share">Share</div>
<script>
function add(){
var options = {
contenturl: 'https://plus.google.com/pages/',
contentdeeplinkid: '/pages',
clientid: 'xxx',
cookiepolicy: 'single_host_origin',
prefilltext: 'Hai happy friday'+Math.random(),
calltoactionlabel: 'CREATE',
calltoactionurl: 'http://plus.google.com/pages/create',
calltoactiondeeplinkid: '/pages/create'
};
// Call the render method when appropriate within your app to display
// the button.
gapi.interactivepost.render('sharePost', options);
}
setInterval(function(){
add();
},2000);
add();
</script>
</body>
</html>

I can able to share interactive post using java script render method.The main point we need to noted is, we need to use same url for contenturl and calltoactionurl.
<html>
<head>
<title>Share Demo: Deferred execution with language code</title>
<link rel="canonical" href="http://www.example.com" />
</head>
<body>
<script>
window.___gcfg = {
lang: 'en-US',
parsetags: 'explicit'
};
</script>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<div id ="sharePost">Share</div>
<script>
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'http://apis.google.com/js/client:plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
var options = {
contenturl: 'http://www.google.com',
contentdeeplinkid: '/pages',
clientid: 'xxxxxxxxxxx.apps.googleusercontent.com',
cookiepolicy: 'single_host_origin',
prefilltext: 'Hai happy friday',
calltoactionlabel: 'INVITE',
calltoactionurl: 'http://www.google.com'
};
// Call the render method when appropriate within your app to display
// the button.
gapi.interactivepost.render('sharePost', options);
</script>
</body>
</html>

Related

Recording State of iframe(url) from within an Office Add-in

So I am developing an office add in which will essentially contain an iframe which will be running an application we own.
The problem is, I want to contantly record the url of the iframe so that i can save this to the addin state, aloowing us to use that information to load the iframe to the correct url each time the addin is reopened.
I cant figure out a way to output the url from within the iframe each time it changes? here is a sample of what i have, this doesnt contain the application just a couple of sample pages:
Home.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title></title>
<script src="../Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="../Scripts/FabricUI/MessageBanner.js" type="text/javascript"></script>
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
<link href="Home.css" rel="stylesheet" type="text/css" />
<script src="Home.js" type="text/javascript"></script>
<!-- For the Office UI Fabric, go to https://aka.ms/office-ui-fabric to learn more. -->
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.1.0/fabric.min.css">
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.1.0/fabric.components.min.css">
</head>
<body>
</body>
</html>
Home.js
(function () {
"use strict";
// The initialize function must be run each time a new page is loaded
Office.initialize = function (reason) {
$(document).ready(function () {
var iframew = document.createElement('iframe');
iframew.src = '../SecondPage/SecondPage.html';
iframew.id = 'iframe1';
iframew.onload = iframeLoaded(this.contentWindow.location.href);
document.body.appendChild(iframew);
});
};
// Helper function for displaying notifications
function iframeLoaded(location) {
console.log("log", location);
}
})();
Cant understand why people are downvoting this question, it was a genuine issue
Anyway, for anyone interested I solved this by attaching a a function after the iframe loads which outputs the url of the iframe at set interval periods
var iframew = document.createElement('iframe');
iframew.id = 'iframe1';
var baseUrl = '#YOUR BASE URL#';
let openUrl = getProperty('openurl');
if (!openUrl) {
console.log('No saved url');
iframew.src = baseUrl;
}
else {
console.log('saved url');
console.log(openUrl);
iframew.src = openUrl;
}
//when iframe loads attach function to save at interval
iframew.addEventListener('load', function () { setInterval(function () { iframeLoaded(iframew.contentWindow.location.hash, iframew.contentWindow.location.href); }, 4000); });
document.body.appendChild(iframew);
here is the iframeLoaded Function which also does some manipulation of the url and calles another function which saves the url to the doocument settings of the add-in:
function iframeLoaded(hash, location) {
//if not in an analysis dont save
if (hash.indexOf('#/dataset/') !== -1 ) {
console.log("Same url")
return
}
//remove # from hash
hash = hash.substr(1);
//concatenate base and hash
let newUrl = baseUrl + hash;
console.log(hash)
console.log(newUrl);
//save
if (Office.context.document.settings) {
saveProperty('openurl', newUrl);
}
}

Getting song from Soundcloud using widget embedded in own website

I am developing an application that uses SoundCloud API.
I am using frames for having the soundcloud widget on my page.
I made a search bar where user can put an input (such as singer name) and based on that input I am trying to format a URL that will go and retrieve track or playlist from SoundCloud (anything that works)
Right now - it is unable to get the url due to invalid formatting - kindly suggest the best open ended url format so that users can search any singer/song to get back a the correct url (which then gets added to the player).
Code:
EJS file:
<html>
<head>
<title>MIX Mashup Page</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.0.min.js'></script>
<script type='text/javascript' src='./javascripts/form.js'></script>
<link rel='stylesheet' href='stylesheets/style2.css' />
<script type='text/javascript' src='http://connect.soundcloud.com/sdk.js'> </script>
<script type='text/javascript' src='https://w.soundcloud.com/player/api.js'></script>
<script src="https://w.soundcloud.com/player/api.js" type="text/javascript"></script>
</head>
<body>
<button id ='mixes'> MIXES </button>
<h1> MIX </h1>
Search Track to Play <input id = "searchbar" type="text" name="Search"/> <button id ='search'>Search</button>
<iframe id="sc-widget" src="https://w.soundcloud.com/player/?url=http://soundcloud.com/christineandthequeens/tilted&single_active=false" width="33%" height="365" scrolling="no" frameborder="yes"></iframe>
</body>
</html>
Javascript File:
$(document).ready(function() {
SC.initialize({
client_id:'3dcb8913f19ee91a5f6c203c56333d75'
});
$("#stream").click(function(){
SC.stream("/tracks/293", {autoPlay: true});
});
var iframeElement = document.querySelector('iframe');
var widget1 = SC.Widget(iframeElement);
(function(){
var widgetIframe = document.getElementById('sc-widget'),
widget = SC.Widget(widgetIframe);
widget.bind(SC.Widget.Events.READY, function(){
widget.bind(SC.Widget.Events.PLAY, function(){
// get information about currently playing sound
widget.getCurrentSound(function(currentSound){
console.log('sound ' + currentSound.get('') + 'began to play');
});
});
// get current level of volume
widget.getVolume(function(volume){
console.log('current volume value is ' + volume);
});
// set new volume level
widget.setVolume(50);
// get the value of the current position
});
}());
})
$(function() {
$("#search").click(function(){
//storing values from the url
var searchrequest = $("#searchbar").val();
result = "https://w.soundcloud.com/player/? url=http://soundcloud.com/"+searchrequest;
console.log(searchrequest);
//$('iframe src').html(result);
console.log(result);
$("#sc-widget").attr("src", result);
});
});
Your current code works as long as the user adds the exact artist username and a slash in the query. fiddle
I would suggest using the soundcloud tracks api to query and display a list of matching results which the user can choose from.
BTW: The widget api has a load(url, options) method for reloading the widget with a different resource.

Firefox addon - run script on page

Using Addon SDK I am trying to inject script to page on every page load. To test things, plugin is trying to add variable to window object and page should read it. When I run this, I can see "injecting" alert, but page gives me error "undefined property window.myVar". What am I doing wrong? Btw I don't want to use unsafeWindow.
main.js:
var data = require("sdk/self").data;
var pageMod = require("sdk/page-mod");
pageMod.PageMod({
include: "*",
contentScriptFile: data.url("inject.js"),
contentScriptWhen: "start",
onAttach: function(worker) {
worker.port.emit("inject", "unused param");
}
});
inject.js
function inject(arg) {
var script = document.createElement("script");
script.innerHTML = 'alert("injecting"); window.myVar=54564;';
document.head.appendChild(script);
}
self.port.on("inject", inject);
page.html
<html>
<head>
</head>
<body>
<script>
alert(window.myVar);
</script>
</body>
</html>
EDIT:
I tried canuckistani's code and it shows some weird behavior. Btw I am on Firefox 31. Here is my code
function inject(arg) {
var myVar = 123;
unsafeWindow.myVar = cloneInto(myVar, unsafeWindow);
}
self.port.on("inject", inject);
and page
<html>
<head>
</head>
<body>
<script>
alert(window.myVar); <!--This shows empty alert box-->
alert(window.myVar); <!--This shows alert box with right value (123)-->
</script>
</body>
</html>
Starting with Firefox 30 ( almost 2 versions ago! ) you can use some new apis to do this. This would look like:
let myVar = {1:2};
self.port.on("inject", function() {
unsafeWindow.myVar = cloneInto(myVar, unsafeWindow);
});
For more information, see this blog post:

Google+ Signin button not clickable

I'm following what is shown on the Google+ API documentation. For some reason, my button isn't clickable at all. Nothing shows up. Nothing happens. I'm running this from the url: file:///TestPage.html in Google Chrome.
<html>
<head>
<title>Test Page</title>
<script type="text/javascript">
function onSuccess() {
//called fine.
}
(function() {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/client:plusone.js?onload=onSuccess';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
function onSignInCallback(res) {
alert('callback'); //doesn't show up.
}
</script>
</head>
<!-- Not clickable -->
<button id='signInBtn' class="g-signin"
data-scope="https://www.googleapis.com/auth/plus.login"
data-clientid="1085488274737.apps.googleusercontent.com"
data-callback="onSignInCallback"
data-theme="dark"
data-approval-prompt="force"
data-cookiepolicy="single_host_origin"
data-requestvisibleactions="http://schemas.google.com/AddActivity"
data-width="wide">
</button>
</html>
Any ideas why nothing happens? Why is my button not even clickable?
As akonsu said, see the console of browser
Please access the page from a local web server, not a simple way like file:// URL.

Re-render Tweet button via JS

I used to use this snippet to re-render a Tweet button.
var tweetButton = new twttr.TweetButton(twitterScript);
twttr.render();
But it looks like widgets.js (http://platform.twitter.com/widgets.js) has been modified so twttr.TweetButton is no longer a constructor.
Can anyone help with this issue?
I found the answer on the web. The idea is to re-request the Twitter javascript file. As it is cached, there is no download overhead.
$.ajax({ url: 'http://platform.twitter.com/widgets.js', dataType: 'script', cache:true});
For anyone stumbling onto this, there's a new, easier way to do it (as of 5/28/12 if not before). A quick glance didn't find it in the documentation, but you can do twttr.widgets.load(). That'll [re]load all the widgets on the page.
EDIT: It is documented, after all. Check out this page's "Optimization" section (which you can't link to directly)
you just need to call twttr.widgets.load() after your ajax call. no need to reload a script that is already loaded.
Looks like the twttr.TweetButton constructor was never supported, and now no longer works after the last API update:
http://groups.google.com/group/twitter-development-talk/browse_thread/thread/bcda486acdf4ab42/6a557050f850ccf2?lnk=gst&q=+twttr.TweetButton#6a557050f850ccf2
The supported method is to create an iframe-based Tweet button dynamically:
http://dev.twitter.com/pages/tweet_button#using-an-iframe
Although note #Runningskull’s answer for updated information.
First, make sure you have jQuery included in your document's head:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
Then create a link that has the same URL as the eventual tweet button, along with an empty div where your button will be rendered:
<div id="tbutton"></div>
At the bottom of your page, right above the /body tag, include the javascript from Twitter and the function that will render the button, as well as the listener that will activate the function when the desired event takes place:
<script type="text/javascript">
//async script, twitter button fashiolista.com style
(function() {
var s = document.createElement('SCRIPT');
var c = document.getElementsByTagName('script')[0];
s.type = 'text/javascript';
s.defer = "defer";
s.async = true;
s.src = 'http://platform.twitter.com/widgets.js';
c.parentNode.insertBefore(s, c);
})();
function renderTweetButton(tbutton,tlink){
var href = $("#"+tlink).attr('href'),
$target = $("#"+tbutton),
qstring = $.param({ url: href, count: "vertical" }),
toinsert = '<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.html?'+qstring+'" style="width:57px; height:70px;"></iframe>';
$target.html(toinsert);
}
$("#hoverlink").mouseenter(function() {
renderTweetButton("tbutton","tlink");
});
</script>
Lastly, add a link to your page somewhere that will activate the function above based on some event:
Hover here to render a tweet button to div#tbutton.
That's it.
If you want the entire test HTML page to see how I've got it working, see here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Twitter Button Render Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<div id="tbutton"></div>
Hover here to render a tweet button to div#tbutton.
<script type="text/javascript">
//async script, twitter button fashiolista.com style
(function() {
var s = document.createElement('SCRIPT');
var c = document.getElementsByTagName('script')[0];
s.type = 'text/javascript';
s.defer = "defer";
s.async = true;
s.src = 'http://platform.twitter.com/widgets.js';
c.parentNode.insertBefore(s, c);
})();
function renderTweetButton(tbutton,tlink){
var href = $("#"+tlink).attr('href'),
$target = $("#"+tbutton),
qstring = $.param({ url: href, count: "vertical" }),
toinsert = '<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.html?'+qstring+'" style="width:57px; height:70px;"></iframe>';
$target.html(toinsert);
}
$("#hoverlink").mouseenter(function() {
renderTweetButton("tbutton","tlink");
});
</script>
</body>
</html>
I just had the same problem, this works in JQuery:
$.getScript('http://platform.twitter.com/widgets.js');
Try the #Anywhere library. Sample js code:
twttr.anywhere(function (T) {
T("#tweetbox").tweetBox({
counter: false,
defaultContent: "Default text in a Tweet box...",
label: "Share this page on Twitter"
});

Categories