I am trying to integrate bit.ly on my website in JS to short my url. All my url are too long, what will be the most straight foward way to use the bit.ly restful api for sharing button on a static website in HTML/javascript.
The result I want to get is when my user click share on my website the url is automatically shortened by bit.ly
here is the code I am currently using to share my pages dynamically on twitter:
<script type="text/javascript" charset="utf-8" src="http://bit.ly/javascript-api.js?version=latest&login=LOGINID&apiKey=APIKEY"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script>
function tweetCurrentPage()
{ window.open("https://twitter.com/share?url=" + escape(window.location.href) + "&text=" + document.title, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600'); return false; }
var TweetThisLink = {
shorten : function(e) {
e.preventDefault();
var url = this.href.substr(this.href.indexOf('http:',5))
BitlyClient.shorten(url, 'TweetThisLink.response');
},
response : function(data) {
var bitly_link = null;
for (var r in data.results) {
bitly_link = data.results[r]['shortUrl'];
break;
}
var tweet_text = "I am reading documentation of"
document.location = "http://twitter.com/share?url=" + encodeURIComponent(tweet_text + ' ' + bitly_link);
}
}
jQuery('.tweetlink').bind('click', TweetThisLink.shorten);
</script>
tweet this link
Not sure if this is on purposefully obfuscated for the sake of the question, but
In your script tag the src is:
"http://bit.ly/javascript-api.js?version=latest&login=LOGINID&apiKey=APIKEY".
LOGINID & apiKey are placeholders are in-place. You need to replace them with the appropriate keys you should receive from bitly.
if this is on purpose for the sake of the question please ignore this answer.
don't know why but my function "tweetCurrentPage()" for dynamic url won't work it's giving me a respond INVALID_URI from bit.ly, but if I hard code the href value like this twitter.com/share?url=+exemple.com"; it's working...
Related
I'm still new to Node.js, but I'll try to explain my problem as good as I can.
So I'm working on a movie site to practice my node.js/express skills a bit and I use the following elements (img) on basically every page of my website:
Header with stats and search input and a navigation bar (will be reused on every page)
The follow JS-code are two examples of actions on the client side that I use to navigate to other web pages, this then activates GET on the client side.
$(function () {
$('button').click(function (event) {
event.preventDefault()
// the value people enter in the search box
var search = $('.searchInput').val();
//replace spaces with _
var res = search.replace(/\s/g, "_");
//build the URL
var link = window.location.protocol + '//' + window.location.host + '/search/' + res;
// redirect to trigger GET in indexjs with specific search value
window.location.replace(link);
});
$('.lists').click(function (event) {
var link = window.location.protocol + '//' + window.location.host + '/lists/topAll';
window.location.replace(link);
})
});
I want this to be the same code on every page. I could type the same code every time, but that would be a waste of time.For HTML and CSS I am able to use templates (HTML) or import other CSS files to save time. Is there something similar for JS on the client side?
Put that code in a file, for example "navigator.js" and then load it in your html header in every page you want to use it
navigator.js:
$(function () {
$('button').click(function (event) {
event.preventDefault()
// the value people enter in the search box
var search = $('.searchInput').val();
//replace spaces with _
var res = search.replace(/\s/g, "_");
//build the URL
var link = window.location.protocol + '//' + window.location.host + '/search/' + res;
// redirect to trigger GET in indexjs with specific search value
window.location.replace(link);
});
$('.lists').click(function (event) {
var link = window.location.protocol + '//' + window.location.host + '/lists/topAll';
window.location.replace(link);
})
});
index.html
<script src="navigator.js"></script>
Finally i suggest you to assign an id to your button, for example "searchButton" instead only "button"
Hope this helps
I want to create a line chart similar below:
I just wonder if there are available framework or API available in ASP.NET MVC that generates chart images since my goal is to send this via email. I'm thinking if I can just put something like <img src="http://imageapi.com?date1=20170101&date=20170130" /> then api will be handling the chart image generation.
On searching, I found a lot of chart framework using javascript but I doubt it will properly work on different email clients.
Thanks a lot!
Google Image Charts will do that. Pass data and display settings via the URL, and it will return an image.
eg.
<img src="https://chart.googleapis.com/chart?cht=lc&chd=t:30,10,45,38,25|10,20,10,20,10&chls=2.0,0.0,0.0&chs=200x125&chg=0,20,3,3,10,20&chxt=x,y&chxl=0:|Week1|Week2|Week3|Week4|Week5|1:|0|20|40|60|80|100&chs=800x300&chm=o,ff9900,0,-1,10.0|d,ff0000,1,-1,10.0&chco=FFC6A5,DEBDDE&chdl=Click|GRU" />
produces this chart:
They provide a playground for testing: https://developers.google.com/chart/image/docs/chart_playground
Note however that Google are not maintaining it further, but have no plans to remove this functionality:
While the dynamic and interactive Google Charts are actively maintained, we officially deprecated the static Google Image Charts way back in 2012. This gives us the right to turn it off without notice, although we have no plans to do so.
What is your design ?
Your chart must be generated in web page,then it must be having html generated.
If no html is generated and only image is generated then this is best.
now you can send same content in.
If image is not generated then again you have 2 option here
i) Send complete html in email body along with concern js/css
ii) you can convert those html into image using(say c#) then send mail.
Please mention your complete scenario.
There are different types of chart API available in market, both open source and licensed, you can use any one to generate your chart/diagram in page and you can send that page as an email attachment using following code.
[HttpPost]
public ActionResult SendWebPageAsAttachment()
{
var subject = Request.Form["subject"]; // You can provide subject from page or code
var mailContent = Request.Form["bodyInnerHTML"]; // get the body inner HTML by form name
var Body = "<div style='background-color:white;'>" + Request.Form["mailContent"] + "</div>"; // Email Body
var attachmentName = DateTime.Now.ToString("yyyy/MM/dd").Replace("/", "-") + "_" +
DateTime.Now.ToLongTimeString().Replace(" ", "_") + ".html"; // Attachment Name
var baseUrl = HttpContext.Request.Url.Scheme + "://" + HttpContext.Request.Url.Authority +
HttpContext.Request.ApplicationPath.TrimEnd('/') + '/'; // Base URL
string src = #"src=""";
mailContent = mailContent.Replace(src, src + baseUrl.Remove(baseUrl.Length - 1));
mailContent = "<html><head><link href='" + baseUrl + "Themes/styles.css' rel='stylesheet' type='text/css' /><link href='" +
baseUrl + "Themes/style.css' rel='stylesheet' type='text/css' /></head><body>" + WebUtility.HtmlDecode(mailContent) +
"</body></html>";
try
{
SmtpClient smtpClient = new SmtpClient("mail.MyWebsiteDomainName.com", 25);
smtpClient.Credentials = new System.Net.NetworkCredential("info#MyWebsiteDomainName.com", "myIDPassword");
smtpClient.UseDefaultCredentials = true;
smtpClient.DeliveryMethod = SmtpDeliveryMethod.Network;
smtpClient.EnableSsl = true;
MailMessage mail = new MailMessage();
//Setting From , To and CC
mail.From = new MailAddress("info#MyWebsiteDomainName", "MyWeb Site");
mail.To.Add(new MailAddress("info#MyWebsiteDomainName"));
mail.CC.Add(new MailAddress("MyEmailID#gmail.com"));
mail.IsBodyHtml = true;
mail.Subject = subject;
mail.Body = Body;
var mailDataBytes = ASCIIEncoding.Default.GetBytes(mailContent);
var mailStream = new MemoryStream(mailDataBytes);
mail.Attachments.Add(new Attachment(mailStream, attachmentName));
smtpClient.Send(mail);
}
catch (Exception ex)
{
//catch
}
ViewBag.IsHttpPost = true;
return View("SendWebPageAsAttachment");
}
My current script uses the code below to download a CSV file to local drive,
function table2CSV() {
var dataURL = '',
fieldSeparator = ',',
textField = '"',
lineSeparator = '\n',
regExpTesto = /(")/g,
regExp = /[";]/;
$('table tr').each(function() {
var dataRow = '';
if ($('input:checkbox', this).is(':checked') || $(this).is(':first- child'))
{
$('td', this).not(':last').each(function() {
var value = $(this).text();
if (dataRow !== '') dataRow += fieldSeparator;
if (regExp.test(value)) {
value = textField + value.replace(regExpTesto, '$1$1') + textField;
}
dataRow += value;
});
if (dataURL !== '') dataURL += lineSeparator;
dataURL += dataRow;
}
});
window.location.href = 'data:text/csv;charset=utf-8;base64,' + btoa(dataURL);
}
The download is done bye this line as far as I can tell :
window.location.href = 'data:text/csv;charset=utf-8;base64,' + btoa(dataURL);
I would like to be able to have it download(upload/saved) to a shared google drive folder instead.
I have seen similar questions on the forum but can't seem to see how to point the download to a shared google-drive folder.
What must code must be added/changed in order to achieve this ?
Thank you
EDIT: Nevermind, just realised they say it does not support data URIs:
Data URIs and file:// URLs are not supported
I will keep this answer in case anyone else searches for non-data URI uploading
Having a quick look, I came upon Save to Drive
While this might not be exactly what you want, it looks like an easy way to add the ability to save the contents of any URI (hopefully a data URI too) to Google Drive, like so:
<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-savetodrive"
data-src="//example.com/path/to/myfile.pdf"
data-filename="My Statement.pdf"
data-sitename="My Company Name">
</div>
I'm developing a J2EE website with spring framework.
I want my website to share with Twitter but I couldn't succeed using bit.ly API. the function makes bit.ly link but in Twitter's share page I only see the full link.
How can I send the bit.ly link to Twitter?
The bit.ly response which I get from firebug:
BitlyCB.getBitlyUrl({"errorCode": 0, "errorMessage": "", "results": {"http://twitter.com/home?status=http://www.google.com": {"userHash": "dodUFu", "hash": "9KnUl2", "shortUrl": "http://bit.ly/dodUFu", "shortCNAMEUrl": "http://bit.ly/dodUFu", "shortKeywordUrl": ""}}, "statusCode": "OK"})
If you try http://twitter.com/home?status=http://www.google.com you can understand me.
My code is below:
<script type="text/javascript" charset="utf-8"
src="http://bit.ly/javascript-api.js?version=latest&login=mylogin&apiKey=mykey"></script>
<a class="_ffShare_"
onclick="onlyShortenUrl('http://twitter.com/home?status=http://mypage');">
<img src="http://yakup-laptop:8080/images/theme/default/twitter.png"></img>
</a>
function onlyShortenUrl(longUrl){
//single shortener
BitlyCB.getBitlyUrl = function(data) {
var shortUrl = extractShortUrl(data);
window.open(shortUrl,'_blank');
return shortUrl;
}
return BitlyClient.call('shorten', {'longUrl': longUrl}, 'BitlyCB.getBitlyUrl');
}
function extractShortUrl(data){
//bitly util method probably not useful standalone
var shortUrl = '';
var first_result;
// Results are keyed by longUrl, so we need to grab the first one.
for (var r in data.results) {
first_result = data.results[r]; break;
}
for (var key in first_result) {
shortUrl = r ;
}
return shortUrl;
}
Try changing:
for (var key in first_result) {
shortUrl = r ;
}
to
shortUrl = first_result.shortUrl;
If that doesn't work, please include the output (at that same point) of first_result:
console.log(first_result);
In my db I have saved every links in the form:
www.example.com or http://www.example.com
Is there a way to turn this text links into HTML links at the client side ( e.g. javascript ) with tag and parameter like this ?:
www.example.com
This would probably be smarter to do on the server side like cherouvim suggested, but here's a (naive) javascript function that does this for the specified formats (url with and without http://-prefix)
function makeLink(link) {
var url, desc;
if (link.match('^http://')) {
url = link;
desc = link.substr(7, link.length - 7);
} else {
url = 'http://' + link;
desc = link;
}
return '' + desc + '';
}
Please note it doesn't handle unexpected input (https...) very well, so please don't use as-is in production environment :)
I would try it like this:
text.replace(/([A-Za-z]+:\/\/)?[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/, function(url) {
return url.link(url);
})