I put a twitter button on my website to allow people to easily tweet pages.
The weird thing is the button says "Tweeten". Is this a language thing? I'm set to English NA on my computer. I'd like it to say "Tweet".
Here's an example: http://www.trainerroad.com/cycling/rides/41452
Here's the script/HTML on the page:
Tweet
<script> !function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = "//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); } } (document, "script", "twitter-wjs");</script>
Its because your html language is set to nl (i.e. Dutch).
See the first line of your markup.
<html lang="nl" xml:lang="nl" xmlns="http://www.w3.org/1999/xhtml">
Either change that to en (English) i.e.
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
or you can force twitter to display English (i.e. Twitter) by,
Tweeter
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
See the attribute data-lang
Related
After googling and analyzing DOM, i found out:
iframe dynamically replaces twitter's timeline a-link
jquery-ui effects force iframe to reload content
similar question
sample at jsfiddle
html
click here to start toggle
<div id="panel">
<a id="twitter-widget" class="twitter-timeline" href="https://twitter.com/search? q=%23Globallogic" data-widget-id="418408420543184896">#Globallogic</a>
</div>
css
#panel {
background:gray;
width:640px;
height:512px;
}
js
!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
$( window ).mousedown(function() {
$( "#panel" ).toggle( "slide", { direction: "left" }, 1000 );
});
Is it possible to configure jquery-ui to avoid iframe reload? and I'm appreciated for any other suggestions.
You can use the following code to reload the twitter widget's content:
twttr.widgets.load()
Be sure to run it after the widget has initially loaded as it will throw up an error otherwise.
I just encountered this issue and I resolved it by dynamically loading child elements to the panel
and ask twitter to load the widget. To do this , if below is you twitter div
then
<div id="panel">
<a id="twitter-widget" class="twitter-timeline" href="https://twitter.com/search?q=%23Globallogic"
data-widget-id="418408420543184896">#Globallogic</a>
</div>
Please place the below java script anywhere using the script tags.
window.twttr = (function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
t = window.twttr || {};
if (d.getElementById(id)) return t;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
t._e = [];
t.ready = function (f) {
t._e.push(f);
};return t;
}(document, "script", "twitter-wjs"));
Use setInterval() call the update function. In this function you can remove the existing twitter iframe ( created at the time of loading) , and replace it with your original link. after this is done simply call twttr.widgets.load() a standard event given by twitter
$(function(){
function updateStatus(){
var $twitter = $("#panel");
$twitter.append(" <a id='twitter-widget'
class='twitter-timeline' href='https://twitter.com/search?
q=%23Globallogic' data-widget- id='418408420543184896'>#Globallogic</a>");
twttr.widgets.load();
};
setInterval(function(){updateStatus()}, 1000);
});
Tweets that have images may take some time to load.
I am trying to use the Facebook Javascript SDK, and right now I am just pasting this code into my erb template that has the like button:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
However, in the Facebook developer docs, it is said that something like this is prefered direct right after the body open tag:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'YOUR_APP_ID', // App ID from the app dashboard
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms
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(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
So, my question is:
-> Where should I place this code? In my layout or in a Javascript file that using jQuery does all this logic?
put the code into bottom of your main templates eg application.html.erb or base.html.erb[if your have base controller that inherited from application controlller]
Im trying to load the twitter widget api in my ajax loaded page.
I have tryed to load the script in a couple of different ways and Im getting the alert to run each time but not the script itself.
So the first time I load the page, then the script is working, but if I go back to the menu and back to this page, then it doesnt load it?
This is the ajax loaded page.
<div id="twitterwid">
<a class="twitter-timeline" width="320" height="500" href="https://twitter.com/my account" data-widget-id="my widget id number">Loading tweets by #me</a>
<script>
alert("alert is working");
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>
<div>
Any input appreciated, thanks.
All you have to do is: invoke a re-render of the widget tags on the page by calling:
twttr.widgets.load()
Similar question on Twitter Dev Channel
Note: inline script is not executed upon AJAX Load.
See: this SO Q&A for the solution to that.
Add first :
<script>window.twttr = (function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
t = window.twttr || {};
if (d.getElementById(id)) return t;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
t._e = [];
t.ready = function(f) {
t._e.push(f);
};
return t;
}(document, "script", "twitter-wjs"));</script>
So you can use :
twttr.widgets.load()
I have implemented plupload using a ColdFusion backend script (available at https://gist.github.com/1116037).
The url attribute in the uploading page is url : '../upload.cfc?method=upload',
This simply calls a function within the cfc script. It works fine. This script also creates a variable called 'response' to hold information uploaded files.
The problem I am having is accessing the information held in the 'response' variable.
I would like to display that information in a table after the all the files have been uploaded to the server.
I am using the queue_widget for my needs’ think that an event (onComplete) needs to be triggered to call a function to process the information in variable, but I don't know how to do this.
I need to access the information held in the 'response' variable, preferably in ColdFusion code. Has anyone managed to get plupload working with ColdFusion yet?
Any help, guidance or coding would be appreciated.
Here is the full code I have used:
This is the main page - queue_widget.cfm
<!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" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Plupload - Queue widget example</title>
<link rel="stylesheet" href="../../js/jquery.plupload.queue/css/jquery.plupload.queue.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="../../js/plupload.js"></script>
<script type="text/javascript" src="../../js/plupload.flash.js"></script>
<script type="text/javascript" src="../../js/jquery.plupload.queue/jquery.plupload.queue.js"></script>
</head>
<body>
<h1>Queue widget example</h1>
<p>Shows the jQuery Plupload Queue widget and under different runtimes.</p>
<div style="float: left; margin-right: 20px">
<h3>Flash runtime</h3>
<div id="flash_uploader" style="width: 700px;">Your browser does not have Flash installed!</div>
</div>
<br style="clear: both" />
<cfoutput><cfset mnum=6></cfoutput>
<script type="text/javascript">
$(function() {
// Setup flash version
$("#flash_uploader").pluploadQueue({
// General settings
runtimes : 'flash',
url : '../upload.cfc?method=upload',
max_file_size : '1mb',
max_file_count: <cfoutput>#mnum#</cfoutput>, // You can limit the num of files that can be uploaded by manipulating the mnum variable above
unique_names : false,
multiple_queues : true,
multi_selection: true,
filters : [
{title : "Image files", extensions : "jpg,gif,png"}
],
init : {
FilesAdded: function(up, files) {
plupload.each(files, function(file) {
if (up.files.length > <cfoutput>#mnum#</cfoutput>) {
up.removeFile(file);
}
});
if (up.files.length >= <cfoutput>#mnum#</cfoutput>) {
$('#pickfiles').hide('slow');
}
},
FilesRemoved: function(up, files) {
if (up.files.length < 1) {
$('#pickfiles').fadeIn('slow');
}
}
},
resize : {width : 300, height : 10000, quality : 90}, // forces images to be resized to a width of 300px if wider than 300px
preinit: attachCallbacks,
UploadComplete: function(up, file, response) {
if ($("#result").length > 0){
$("#results").prepend(info.response);
} else {
$("#flash_uploader").after("<div id='results'>"+info.response+"</div>");
}
},
flash_swf_url : '../../js/plupload.flash.swf'
});
});
// Where should we go after upload
function attachCallbacks(Uploader){
Uploader.bind('FileUploaded', function(Up, File, response){
function IsJson(response) {
alert('Response from server: ' + response.file); // for testing only
counter++
var newRow = '<tr><td><input type="hidden" name="file_'+counter+'" value="'+response.file+'">'
newRow += 'Label the file: '+response.file+' <input type="text" name="filename_'+counter+'"></td></tr>'
$("#detail").append(newRow)
}});
};
</script>
<div id="results"></div>
<table id="detail">
</table>
<cfif IsDefined('response')><cfdump var="#response#"></cfif>
</body>
</html>
This the backend processing page - upload.cfc
<cfcomponent>
<cffunction name="upload" access="remote" returntype="struct" returnformat="json" output="false">
<cfscript>
var uploadDir = expandPath('/uploads/'); // should be a temp directory that you clear periodically to flush orphaned files
var uploadFile = uploadDir & arguments.NAME;
var response = {'result' = arguments.NAME, 'id' = 0};
var result = {};
</cfscript>
<!--- save file data from multi-part form.FILE --->
<cffile action="upload" result="result" filefield="FILE" destination="#uploadFile#" nameconflict="overwrite"/>
<cfscript>
// Example: you can return uploaded file data to client
response['size'] = result.fileSize;
response['type'] = result.contentType;
response['saved'] = result.fileWasSaved;
return response;
</cfscript>
</cffunction>
</cfcomponent>
You can try the above example here: [url] www.turn2cash.co.uk/plupload/examples/jquery/queue_widget.cfm [/url]
As mentioned above, the script works well with uploading (in this case) upto 6 images as determined by the mnum variable. What I need help with is with how to access the uploaded files (with page refresh) and be able to manipulate them.
I have setup an example (using cffileupload) of what I am after here [url] www turn2cash.co.uk/a/index.cfm [/url]
Although this works fine, it requires a page refresh, which is what I am trying to avoid.
Please provide any help you can.
Added 7 september 2012
I have tried both methods suggested by Miguel but did not achieve any positive outcomes. They actually caused the UI not to sow at all. However I found this and tried it:
preinit: attachCallbacks,
UploadComplete: function(up, file, response) {
if ($("#result").length > 0){
$("#results").prepend(info.response);
} else {
$("#flash_uploader").after("<div id='results'>"+info.response+"</div>");
}
},
flash_swf_url : '../../js/plupload.flash.swf'
});
});
// Where should we go after upload
function attachCallbacks(Uploader){
Uploader.bind('FileUploaded', function(Up, File, Response){
alert('Response from server: ' + Response.response);
});
};
</script>
I now get an alert displaying:
Response from server: {"saved":true,"result":"home.png","id":"0","size":"5988","type":"image"}
This at least prooves that the cfc script is working and the 'response' varialable is being returned. I still have no idea how to make use of this information as I have no knowledge of jquery, ajax or javascript. Please help if you can.
The link that I posted before has the example code. Sorry to post this as an answer but since I have no rep I cannot comment.
I think part of your confusion is in the request processing. You have this line of code at the bottom of your example.
<cfif IsDefined('response')><cfdump var="#response#"></cfif>
That will never fire because the coldfusion page is processed before you make the javascript ajax call to the server for the file upload. You will need to handle the response in javascript.
Are you seeing this alert from the attachCallbacks function?
alert('Response from server: ' + response.file); // for testing only
I have a Facebook connect site and am having issues with the Facebook login part on mobile browsers (ie: iPhone Safari, etc). Whenever I click the login button, it opens a new tab in Safari which takes me to a URL like this: https://s-static.ak.fbcdn.net/connect/xd_proxy.php... followed by a bunch of extra hashes.
The problem is, this page doesn't auto close and go back to my app. I have to manually close it and then go back. The login process works fine and the other page has already refreshed and loaded, but I can't figure out why it's not auto closing the XD Proxy page.
I've followed all the tutorials on Facebook for setting up the javascript code. I'm using FB.login() to actually login. It works flawlessly on the desktop. I'm wondering if this is a bug in Facebook's javascript or not, but I can't seem to figure it out. Any ideas would be very helpful.
Here is the code I'm using, for reference:
<script>
window.fbAsyncInit = function() {
FB.init({
appId: "APP_ID",
status: true,
cookie: true,
oauth: true,
xfbml: true
});
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<button onclick="loginToFB();" type="button" class="fb-login-button">Login with Facebook</button>
<script type="text/javascript">
function loginToFB(next) {
FB.login(function(response) {
if (response.authResponse) {
window.location = '/facebook';
}
}, {scope: 'SCOPE_STRING'});
}
</script>
Thanks!
Try first calling the getLoginStatus() function and don't do FB.login() if the user is already logged in.