Desenvolvimento Desenvolvimento Web Javascript JQuery

Como criar um encurtador de link

Encurtador de link

Como criar um encurtador de link ensina como criar a sua própria ferramenta que encurta o link de uma URL para facilitar o compartilhamento de conteúdo.

Como criar um encurtador de link

Código de exemplo

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
function myFunction() {
  var valor = document.getElementById("flink").value;
  $.getJSON( "https://is.gd/create.php?callback=?", {
    url: valor,
    format: "json"
}).done(function( data ) {
    let novolink = data.shorturl;
	console.log(novolink);
	if(novolink!==undefined)
	document.getElementById("h2resp").innerHTML = novolink;
	else document.getElementById("h2resp").innerHTML = "Erro ao gerar link";
});
}
</script>

<style> 
.cinput {
  font-size: 24px;
}
</style>

</head>
<body>

<form id="myForm" >
  <input class="cinput" type="text" name="flink" id="flink" placeholder="Insira o link original">  
  <input class="cinput" type="button" onclick="myFunction()" value="Gerar Link">
</form>
<h2>Link Gerado</h2>
<h2 id="h2resp"></h2>
</body>
</html>

About the author

Danilo Filitto

Mestre em Ciência da Computação pela Universidade Estadual de Maringá - UEM, Pós-Graduado em Redes de Computadores e Comunicação de Dados pela Universidade do Estado do Paraná - UEL, Bacharel em Ciência da Computação pela Universidade do Oeste Paulista - UNOESTE.

Atuo na área acadêmica como professor desde 2006. Atualmente leciono na UNOESTE (Universidade do Oeste Paulista), no SENAC (Serviço Nacional de Aprendizagem Comercial) e possuo vários cursos na Udemy (https://www.udemy.com/user/danilo-filitto/).

Além disso, sou o CEO dos sites https:www.dfilitto.com.br e https:www.makeindiegames.com.br

Você também pode me encontrar no YouTube por meio do endereço https://www.youtube.com/danilofilittoppr

Inscreva-se para receber em seus e-mais as notícias do nosso site

Quer aprender a programar?