いいねボタン、サイトのサンプルを導入したが、正常に表示できない。

追記
→コードを追記しました(11/6)
→環境：IIS

以下のサイトを参考に、いいね！ボタンを作成したいのですが、
404エラーが出て、うまくいきません。
http://urbanqee.com/webutil/sns/mypage-likecount.html

ちなみに、
ボタンを押すと、405エラーが出ます。

　
MySQL版ではなく、、
テキストファイル(xxxx.count)に書き込むサンプルを実装しようとしております。

サンプルのファイル階層と、指定でもうまくいかなかったので、
パス指定やファイル名などの問題かと思い、同じディレクトリにいれるようにしてみたり色々試しているのですが、カウント表示されません。

サンプルコード

基本的には、上記URLサイトの、
「上記3. getCount.php, 上記4. vote.php, 上記6. ocialbutton-balloon.cssなど10のCSS, clickCount-getCount.js のファイル(2019.8.10-04.zip - フリー、商用利用可)は、こちらからダウンロードしてください。」
のサンプルファイルを使っています。

【index.html】

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5
6<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
7
8<script type="text/javascript" src="clickCount-getCount.js"></script>
9<!-- 吹き出しCSS（必要時） -->
10<link href="balloon/socialbutton-balloon.css" rel="stylesheet" type="text/css">
11<link href="balloon/socialbutton-balloon-red.css" rel="stylesheet" type="text/css">
12<link href="balloon/socialbutton-balloon-blue.css" rel="stylesheet" type="text/css">
13<link href="balloon/socialbutton-balloon-green.css" rel="stylesheet" type="text/css">
14<link href="balloon/socialbutton-balloon-orange.css" rel="stylesheet" type="text/css">
15<link href="balloon/socialbutton-balloon-maru.css" rel="stylesheet" type="text/css">
16
17</head>
18<body>
19
20<p>・例 - カウント件数をボタン画像の右に</p>
21<DIV style="width:64px" class="letsVote" data-id="ex01-balloon-r" data-lock="likebuttonRight">
22 <div>
23  <img src="img/hart-likegray.png" width=32> 
24 </div>
25 <div id="ex01-balloon-r" class="balloon_right" style="margin-top:6px;margin-left:6px"> 
26 </div>
27                                      
28</DIV>
29<!-- いいね！カウント ページロード時表示 javascript -->
30<script>getCountSet("ex01-balloon-r");</script>
31
32</body>
33</html>

【socialbutton-balloon.css】

css
1
2
3.balloon_top {
4	position: relative;
5	background: #fcfcfc;
6	border: 1px solid gray; /*#242a2e;*/
7        font-size:11px;
8        text-align:center;
9        margin-bottom:5px; padding:3px;
10        font-family: arial, sans-serif;
11        border-radius: 5px; color: #808080;       
12}
13.balloon_top:after, .balloon_top:before {
14	top: 100%;
15	left: 50%;
16	border: solid transparent;
17	content: " ";
18	height: 0;
19	width: 0;
20	position: absolute;
21	pointer-events: none;
22}
23
24.balloon_top:after {
25	border-color: rgba(252, 252, 252, 0);
26	border-top-color: #fcfcfc;
27	border-width: 5px;
28	margin-left: -5px;
29}
30.balloon_top:before {
31	border-color: rgba(36, 42, 46, 0);
32	border-top-color: gray; /*#242a2e;*/
33	border-width: 6px;
34	margin-left: -6px;
35}
36
37
38.balloon_right {
39	position: relative;
40	background: #ffffff;
41	border: 1px solid gray; /*#0a0c0d;*/
42        font-size:11px;
43        text-align:center;
44        margin-left:5px; padding:4px; margin-top:30px;
45        font-family: arial,sans-serif;
46        border-radius: 5px;  color: #808080; 
47}
48.balloon_right:after, .balloon_right:before {
49	right: 100%;
50	top: 50%;
51	border: solid transparent;
52	content: " ";
53	height: 0;
54	width: 0;
55	position: absolute;
56	pointer-events: none;
57}
58
59.balloon_right:after {
60	border-color: rgba(255, 255, 255, 0);
61	border-right-color: #ffffff;
62	border-width: 3px; /*5px;*/
63	margin-top: -3px; /*5px;*/
64}
65.balloon_right:before {
66	border-color: rgba(10, 12, 13, 0);
67	border-right-color: gray; /*#0a0c0d;*/
68	border-width: 4px; /*6px;*/
69	margin-top: -4px;  /*6px;*/
70}
71
72.balloon_bottom {
73	position: relative;
74	background: #fff;
75	border: 1px solid gray;
76        font-size:11px;
77        text-align:center;
78        font-family: arial,sans-serif;
79        margin-bottom:5px; padding:3px;
80        border-radius: 5px; color: #808080;
81}
82.balloon_bottom:after, .balloon_bottom:before {
83	bottom: 100%;
84	left: 50%;
85	border: solid transparent;
86	content: " ";
87	height: 0;
88	width: 0;
89	position: absolute;
90	pointer-events: none;
91}
92
93.balloon_bottom:after {
94	border-color: rgba(255, 255, 255, 0);
95	border-bottom-color: #fff;
96	border-width: 5px;
97	margin-left: -5px;
98}
99.balloon_bottom:before {
100	border-color: rgba(220, 220, 220, 0);
101	border-bottom-color: gray;
102	border-width: 6px;
103	margin-left: -6px;
104}
105
106
107.balloon_left {
108	position: relative;
109	background: #fff;
110	border: 1px solid gray;
111        font-size:11px;
112        text-align:center;
113        font-family: arial, sans-serif;
114        margin-bottom:5px; padding:4px;
115        border-radius: 5px; color: #808080;
116}
117.balloon_left:after, .balloon_left:before {
118	left: 100%;
119	top: 50%;
120	border: solid transparent;
121	content: " ";
122	height: 0;
123	width: 0;
124	position: absolute;
125	pointer-events: none;
126}
127
128.balloon_left:after {
129	border-color: rgba(255, 255, 255, 0);
130	border-left-color: #fff;
131	border-width: 5px;
132	margin-top: -5px;
133}
134.balloon_left:before {
135	border-color: rgba(220, 220, 220, 0);
136	border-left-color: gray;
137	border-width: 6px;
138	margin-top: -6px;
139}
140
141
142```　
143　
144　
145
146**【getCount.php】**
147```php
148<?php
149if (!empty($_GET['countid'])) {
150    $id   = empty($_GET['countid']) ? "" : $_GET['countid'];
151    $res = getVoteCount($id);
152    echo json_encode($res);
153 } else {
154    echo json_encode("syntax error");
155 }
156
157function getVoteCount($id){
158 $fileName = "log/" . $id . ".count";
159 $fp = @fopen($fileName , "r");
160
161 if($fp){
162      $vote = fgets($fp , 9182);
163   }else{
164      $vote = 0;
165   }
166   return $vote;
167}
168?>

　
【vote.php】

php
1<?php
2     $file_id = $_POST["file_id"];     
3     $lock_id = $_POST["lock_id"];     
4     $timer = $_POST["cookie_time"];   
5     $count = $_POST["count"];         
6     $ipadd = $_SERVER["REMOTE_ADDR"];  
7     $ipadd = str_replace('.', '', $ipadd);      
8     $cookieName = $ipadd . $lock_id; 
9     $cookieTime = time() + $timer;    
10
11     if(isset($_COOKIE[$cookieName])){
12          echo "cookie";
13     }else{
14          $count = $_POST["count"]; 
15          $fileName = "log/" . $file_id . ".count";
16          $fp = @fopen($fileName , "w");      
17          flock($fp , LOCK_EX);
18          fputs($fp , $count);
19          flock($fp , LOCK_UN);
20          fclose($fp);
21          setcookie($cookieName , $count , $cookieTime);
22          echo "Complete"; 
23     }
24?>

　
【clickCount-getCount.js】

js
1// vote.php起動関数 2018.3.11 - 2018.11.16  //////////////////////////////////////////////////
2$(function(){
3     $('.letsVote').on('click' , function(){      
4          $this = $(this);
5          var id = $this.data("id");            //識別用ID（重複NG）
6          var lockId = id;                      //2018.11.16 以下５Step 修正・追加 data-lock属性省略対応
7          if( $this.data("lock") ){
8             lockId = $this.data("lock");       //排他制御ID
9             if(lockId == ""){ lockId = id; }
10          }
11          var numHtml = "#" + $this.data("id"); //カウント数を表示するHTML
12          var nowCount = Number($(numHtml).html()); //現在のカウント数
13          var newCount = nowCount + 1;
14          var timer = 20;                      //クッキーの有効期限（投票を制限する秒数） time()+60*60*24*30 はクッキーの有効期限を 30 日後にセット
15          var phpurl = "http://localhost/php-nyumon/count/vote.php";     // 要修正 *******
16               console.log(phpurl);
17          $.ajax({
18               type : "POST",
19               url : phpurl,
20               data: {
21                    "file_id" : id,
22                    "count" : newCount, "lock_id" : lockId, "cookie_time" : timer
23               }
24          }).done(function(data , datatype){
25                    //送信先のvote.phpから、Completeが返ってきたらカウント更新
26                    if(data == "Complete"){
27                         $(numHtml).html(newCount);
28                    }else{
29                         alert("連続投稿はできません！・・・時間をおいてやり直してください。");
30                    }
31               }).fail(function(XMLHttpRequest, textStatus, errorThrown) {
32                      $("#XMLHttpRequest").html("XMLHttpRequest : " + XMLHttpRequest.status);
33                      $("#textStatus").html("textStatus : " + textStatus);
34                      $("#errorThrown").html("errorThrown : " + errorThrown.message);
35                  });
36 });
37});
38
39// getCount.php起動関数 2018.3.11 /////////////////////////////////////////////////////
40function getCountSet(id){
41        var target = "#" + id;
42        var phpurl = "http://localhost/php-nyumon/count/getCount.php";  // 要修正 ******   
43        var obj =  $(target).parent("div"); 
44        $(obj).css({ "cursor": "pointer" });
45        $.ajax({
46            url: phpurl,            // ソーシャルボタンカウント取得PHP   if (re.test(str)) 
47            dataType: "json",
48            data: { countid: id }, 
49              }).done(function(data){
50                var res = data;
51                $(target).text(res);
52                var classname = $(target).attr("class");    //吹き出しのCLASS名取得 top/right/bottom/left
53                if (/right/.test(classname) || /left/.test(classname)) { 
54                  var obj =  $(target).parent("div");                 //親要素OBJ取得、全子要素にFloat属性設定、Float属性解除設定（以下３ステップ）
55                  $(obj).children( "div" ).css({ "float": "left" });  //, "margin": "2px" }); //, "display": "inline", "vertical-align": "bottom", "cursor": "pointer" 
56                  $(obj).append("<div style='clear: both; display: block;'></div>"); 
57                 }
58               }).fail(function(data){
59                var res = "error";
60                $(target).text(res);
61                console.log(data);
62             });
63}
64

C:からの記述にしてみたり、色々してみたんですが、うまくいきませんでした。

【フォルダ階層】
C:\inetpub\wwwroot\php-nyumon\count

※１　サンプルダウンロードしたままに複数CSSありますが多いので記載を省略します。

m.ts10806

2020/11/05 22:45

環境情報追記してください。 IISとApacheではアクセスの仕方も違いますしプログラムもご自身の環境のものにしてください。そのまま使っていたとしても、あくまで自身の環境で動いているコードをそのままコピペしてください。

m.ts10806

2020/11/05 22:48

あと、４０４も４０５も原因理由は明確です。「コピペしたらそのまま使える」わけではなく、自身の環境にあわせて調整する必要はあります。内容理解の上で利用しましょう。ただ、サイト見る感じ、https対応されてなかったりコードの雰囲気や最終更新日あたりから、ちょっと古すぎるかなと思います。参考程度にとどめて自力実装を目指した方が確実かと思います。