In my page I've added Facebook Comments as well as Share button. Everything was done according to their instruction, so :
I've included loading script :
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '161771113844567', status: true, cookie: true, xfbml: true});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
and then on pages that use comments/share:
<div class="facebook-comments">
<fb:comments xid="{{star.uniq.id}}" url="" title="Test"></fb:comments>
</div>
and:
<a name="fb_share" type="box_count" share_url="url"
href="http://www.facebook.com/sharer.php">
Share
</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
but the comments are loaded only from time to time (otherwise a FB.provide is not a function error is shown) and share button shows 0 all the time. Is there a way to fix this ? I've tried downloading all.js but then comments where not loaded at all.
You are using both the old javascript SDK and the new one. The facebook sharer.php is no longer recommended an is being replaced by the like button. The solution is to remove the Facebook Share and replace it with a like button. This way you will only be using the new Javascript SDK http://connect.facebook.net/en_US/all.js. You cannot use both of these at the same time. static.ak.fbcdn.net/connect.php/js/ is the old SDK and is being deprecated.
Related
I am trying to install Customer.io to Yii but not sure the process so asking if anyone knows, how should I use the JavaScript code from http://customer.io/docs/api/javascript.html?
I tried to copy into my footer.php under views for main module but it gives me errors.
The simplest way to include JS tracking code in all pages of your site, is to insert it into the master layout.
Browse to protected/views/layouts/main.php, and insert the JS at the bottom of your page right before the closing <body> tag like this:
<script type="text/javascript">
var _cio = _cio || [];
(function() {
var a,b,c;a=function(f){return function(){_cio.push([f].
concat(Array.prototype.slice.call(arguments,0)))}};b=["identify",
"track"];for(c=0;c<b.length;c++){_cio[b[c]]=a(b[c])};
var t = document.createElement('script'),
s = document.getElementsByTagName('script')[0];
t.async = true;
t.id = 'cio-tracker';
t.setAttribute('data-site-id', 'YOUR SITE ID HERE');
t.src = 'https://assets.customer.io/assets/track.js';
s.parentNode.insertBefore(t, s);
})();
</script>
</body>
</html>
I currently have a site that includes the Google Share button (along with Facebook and Twitter) on a social networking widget that I'm creating. What I would like to do is to be able to type some text in a textarea field, and upon pressing a 'Send' button, the text is shared to a Google+ user's wall (I already have Facebook and Twitter posts working). Now I know there is a field for Google+'s share button called 'data-prefilltext', and this is the field that I'm trying to set with the message from the textarea. When I press the 'Send' button, I can see the 'data-prefilltext' field value change, but in the popup window, I do not see the text change. Below is the code:
HTML:
<div id="googleplus-selector" title="App is what's new! Share it with your circles in Google+"
class="social-networking-icons g-interactivepost"
data-contenturl="http://plus.google.com/pages/"
data-contentdeeplinkid="/pages"
data-clientid="clientid.apps.googleusercontent.com"
data-scope="https://www.googleapis.com/auth/youtube.readonly"
data-cookiepolicy="single_host_origin"
data-prefilltext="Share App with your circle of friends now!"
data-calltoactionlabel="TRY_IT"
data-calltoactionurl="http://plus.google.com/pages/"
data-calltoactiondeeplinkid="/pages/create"
data-href="http://mysiteurl">
<div class="widget-mask"></div>
</div>
Javascript/jQuery:
var textElement = $('#social-message-text');
var text = textElement.val();
$('#google-plus-share-button').attr('data-prefilltext', text);
Like I said, I can see the attribute's value change upon inspection the element within Firebug or Google's Developer Console, however that change in text isn't reflected when the Google Share popup window is opened.
Any help would be greatly appreciated as I'm a bit stumped at the moment. Thank everyone in advance.
I also have face the same problem.After long struggle i have found solution.I am sharing answer with u.
<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: 'xxxxxxxxxxxxx.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>
While you are getting response from ajax you have to call again google plus share js file after ajax response.
You could render the button with javascript, with the next code example:
var options = {
contenturl: 'https://dev.diesocialisten.at/google+/?v=5',
clientid: 'YOUR CLIENT ID',
cookiepolicy: 'single_host_origin',
prefilltext: 'Developers, you should check this out!',
calltoactionlabel: 'LEARN_MORE',
calltoactionurl: 'https://dev.diesocialisten.at/google+/?v=5'
};
gapi.interactivepost.render('share-button', options); //button with the ID share-button
I know this question is asked frequently, but I have not found the solution.
I use this code:
open the html tag with
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
in the index immediately after the opening tag I entered this
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'MY_APP_ID', // App ID from the app dashboard
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK asynchronously
(function(){
// If we've already installed the SDK, we're done
if (document.getElementById('facebook-jssdk')) {return;}
// Get the first script element, which we'll use to find the parent node
var firstScriptElement = document.getElementsByTagName('script')[0];
// Create a new script element and set its id
var facebookJS = document.createElement('script');
facebookJS.id = 'facebook-jssdk';
// Set the new script's source to the source of the Facebook JS SDK
facebookJS.src = '//connect.facebook.net/it_IT/all.js';
// Insert the Facebook JS SDK into the DOM
firstScriptElement.parentNode.insertBefore(facebookJS, firstScriptElement);
}());
</script>
finally, the button
<fb:like href="http://mydomain.it/" layout="button_count" action="like" show_faces="false" share="false"></fb:like>
<script>
FB.Event.subscribe('edge.create',
function(href, widget) {
alert('Ti piace ' + href);
});
</script>
the like works, but does not open the alert and I got this error in console.
Uncaught ReferenceError: FB is not defined
Any solutions?
See this thread: FB is not defined in Facebook Login.
You are trying to use FB right after your button, and it's not defined yet:
<fb:like href="http://mydomain.it/" layout="button_count" action="like" show_faces="false" share="false"></fb:like>
<script>
FB.Event.subscribe(...
^--- FB isn't defined yet!
Move that FB.Event.subscribe code inside your window.fbAsyncInit function, where you have that comment "Additional initialization code"
Another reason why you get this error is because you are missing ; after the fbAsyncInit definition bracket.
window.fbAsyncInit = function() {
};
I am trying to create a simple HTML Facebook tab for my page, but I can't seem to find a fix for how to change the max height of the tab.
I should mention that I'm a beginner in coding, I know very basic HTML, but I've tried to avoid JavaScript since I have no experience with that whatsoever.
Unfortunately it seems like I can't do this without JavaScript, so my problem is most likely me doing something wrong.
The code looks something like this (the rest of the codes, including closing HTML-tags comes after the JavaScript part, and is working fine).
<!DOCTYPE html>
<html>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '***********', // App ID
channelUrl : '//**********', // Channel File
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
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" charset="utf-8">
FB.Canvas.setAutoGrow();
</script>
I've pretty much copied the Javascript SDK from Facebook's developer pages and then found a small piece of code that should automatically set the height. I've googled for answers, but haven't been able to find anything that could fix this (or explain it in a way that an absolute newbie like me would understand).
Hope you can help me out.
//Frederik
Since You mentioned you know very basic html I assume you are not aware of the CSS possibilities as well, so I suggest you to replace this:
<div id="fb-root"></div>
with this:
<div id="fb-root" style="max-width: 100px;"></div>
Move this code FB.Canvas.setAutoGrow(); inside fbAsyncInit function, Example:
window.fbAsyncInit = function() {
FB.init({
appId : '***********', // App ID
channelUrl : '//**********', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Canvas.setAutoGrow();
};
If you want to set the size manually, you could do by using FB.Canvas.setSize() function:
FB.Canvas.setSize({height: 800});
Change the above number 800 to whatever size you want it to increase.
Question is: is it possible to pull in Jquery using Javascript.
Here is my code :
<html><head></head><body>
<div id="ttt">replace me!</div>
<div id="apxtoo"></div>
<script type="text/javascript">
var sc = document.createElement('script');
sc.src = 'http://code.jquery.com/jquery-1.5.js';
sc.type = 'text/javascript';
document.getElementById("apxtoo").appendChild(sc);
</script>
<script type="text/javascript">
$("#ttt").text = "Cancel";
</script>
</body></html>
But the Jquery section does not run...any ideas how I can fix it?
You need to wait for the script to load before executing any commands that are dependent on it.
http://jsfiddle.net/EZ8uL/
<div id="ttt">replace me!</div>
<div id="apxtoo"></div>
<script type="text/javascript">
var sc = document.createElement('script');
sc.src = 'http://code.jquery.com/jquery-1.5.js';
sc.type = 'text/javascript';
document.getElementById("apxtoo").appendChild(sc);
sc.onload = function(){ // this is quick and dirty, use attachEvent or addEventListener
$("#ttt").text("Cancel");
}
</script>
You could as well use document.write but it is controversial, check out this tread:
Why is document.write considered a "bad practice"?
Then again, you will come across it, so it is worth knowing how it works.
It is for example in the Html5 Boilerplate.
https://github.com/h5bp/html5-boilerplate/blob/master/index.html
Another informative read is here:
http://www.stevesouders.com/blog/2012/04/10/dont-docwrite-scripts/
I think Google Analytics had their snippet with document.write, but not anymore.