できる!自作の短縮URLの作り方 - Short URL

短縮URL(Short URL)を作るには、外部の短縮URL生成サービスを使う方法もありますが、自分HPのドメイン名を使って、自作の分かりやすい名前の短縮URLを作る方法がります。
このページでは、HTMLで短いURLを作る2つ方法について説明します。

 自作の短縮URL デモ

・本来の長いURL http://urbanqee.com/webutil/shorturl/test/shorturl-test.html
・短縮URL http://urbanqee.com/SHTURL(REFRESH方式)

 短縮URL作成手順

短縮URLを置くドメインはこのページと同じドメイン名urbanqee.comを使用します。従い、短縮URLは、http://urbanqee.com/XXXXX となります。

(1) 短縮URLの名前の決定

短縮URLの名前は、英数字の4~5桁が良いでしょう。このページのサンプルでは、SHTURLとします。 よって、短縮URLはhttp://urbanqee.com/SHTURL となります。

(2) 短縮URLの名前と同じフォルダを作成

短縮URLの名前と同じフォルダをサーバの public_htmlフォルダの中に作成します。例えば、SHTURLとします。

(3) 本来の長いURLのページへリダイレクト用index.htmlの作成

例では、本来の長いURLを、http://urbanqee.com/webutil/shorturl/test/shorturl-test.htmlとします。
作成したindex.htmlをフォルダ名SHTURLにアプロードします。

index.html例


<!DOCTYPE html>
<head>
<title>短縮URL リダイレクト</title>
<meta http-equiv="cache-control" content="no-cache" /> <!--ページキャッシュ制御-->
<meta name="robots" content="noindex,nofollow" />      <!--検索エンジンロボットの制御-->
<meta http-equiv="refresh" content="0; url=http://urbanqee.com/webutil/shorturl/test/shorturl-test.html">
</head>
<body>

<!--
必要ならここに、統計データ取得Javascriptなどを挿入します・・・
-->

</body>
</html>

※このページは、ページキャッシュ制御および検索エンジンロボットの制御は必要としないので、METAタグでそれらの制御を無効にする指定を行います。

 短縮URL作成応用編サンプル(FORM SUBMITでリダイレクト)

リダイレクトのHTML-index.htmlを作り、FORMをSUBMIT(POST)して本来の長いURLのページへリダイレクトしする方法は、 本来の長いURLのページがCGIで、短縮URLから起動されたか否かを判定して、統計データとして用いる場合に使用します。
このような場合、本来の長いURLのページのCGIの改造が伴います。
サンプルの短縮URL作成応用編デモの本来の長いURLおよび短縮URLは、つぎのとおりです。クリックでデモを見ることができます。

・本来の長いURL http://urbanqee.com/webutil/shorturl/test/shorturl-test.php
・短縮URL http://urbanqee.com/SHTURL2(FORM SUBMIT方式)


<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Short URL Form Submit-Post</title>
<meta http-equiv="cache-control" content="no-cache" />
<meta name="robots" content="noindex,nofollow" />
</head>
<body> <!-- formタグのmethodは、postとします。getまたは省略するとURLのパラメータが見えてしまいます -->
<form name=form 
 action="http://urbanqee.com/webutil/shorturl/test/shorturl-test.php" method=post>
<input type=hidden value="yes" name="surl">
</form>

<script>
document.form.submit();
</script>
</body>
</html>


<?php
if(isset($_REQUEST['surl'])){
  $surl = "短縮URLから起動されました!"; 
}
else{
  $surl = "通常の起動です!"; 
}
?>


<!DOCTYPE html>
    <head>
        <meta charset="UTF-8">
        <title>短縮URLテストページ</title>

<style>
body { 
    max-width: 800px;
    margin: 0 auto;  
    padding: 0px; 
    background: url('../img/BingWallpaper-2017-08-17-2.jpg') repeat center top; /* lady01 BingWallpaper-w1600h1000.jpg FreeGreatPicture.com-584-definition-of-natural-and-urban.jpg*/
    height:100%;
font: 14px 'Lucida Grande', Verdana, sans-serif;
 } 

UL,li{
    list-style-type:decimal; margin:5px
}

DIV.img{
background-image: url(http://urbanqee.com/img/topbg/girl-white-black9.jpg);
background-repeat: no-repeat;
background-position: center bottom

}.
</style>
    </head>
    <body>
 <h2 style="text-align:center;margin-top:5px"><img src="http://urbanqee.com/img/urban-qee1.gif"><br>短縮URL http://urbanqee.com/SHTURL テスト ページ</h2>
<h3 style="text-align:center;color:red"><?php echo $surl  ?></h3>
<DIV class=img style="padding-top:10px;padding-bottom:10px;width:100%;height:500px">

</DIV>
<hr>
<div style="text-align:center;width:100%;">
<a href="http://urbanqee.com" target="_top">
<img src="http://urbanqee.com/cgi-ssi/counter/wwwcount.cgi?hide+m3ico2_on.gif" border=0 alt="HOME"><span style="font-size:15px;color:#000000"></span></a>
 <font color=#000000><small><small>最終更新日</small>:2018.9.10</font></small>
</div>


    </body>
</html>


TOP


 ソーシャルボタン関連サイト内リンク

  1. 公式サイトへ行かずに、簡単に手元でソーシャルボタンをまとめて設置する Lightboxなどのモーダルウィンドウ上にも設置できる ~17SNS/RSSサイト、31種類余りの公式ボタン、非公式デザインボタンどちらでも!~
  2. まとめて設置のデモ - モーダルウィンドウにも(1.関連)
  3. オリジナルデザインのソーシャルボタンにカウントを設置する方法 - デザインボタン 7サイト - Facebook, Google+, Hatena, Pinterest, Feedly, LDR, Pocket(本ページ)

HOME
 最終更新日:2018.9.12(Debut)
メール mailto:  掲示板