サイトに「いいね！」ボタンが設置できる

　_{≪くれきん≫}

Twitterの真似しなくてもいいのに、と思われる方もいると思います。　しかし、サイト制作者は孤独なもので、少しでもお客さんからリアクションがあれば嬉しいものです。　今回は「いいね！」ボタンとクリック数(タップ数)を表示するだけのシンプルなプログラムをご紹介します。　設置にはテキストエディタでの編集が必要になります。BOM無しで編集できるテキストエディタ(TeraPad、秀丸、SublimeText など)を用意して下さい。(BOMについてはこちらを参照)　doさんが無料配布しているページの「ダウンロード(zip)」をクリックするとダウンロードが始まりますので保存したZipファイルを全て展開します。　「iine_app」フォルダーの中に7個のファイルが入っているので下記の「iine.js」の4行目でお礼メッセージを出すか出さないか、5行目で「iine_app」フォルダを設置した場所を設定して下さい。下記のコードはダブルクリックで全て選択できます。(スマホの場合は2回タップしてから1回タップ)

「iine.js」

$(function() {
  'use strict';

  var thanks = true; // お礼メッセージを出す場合はtrue、出さない場合はfalse
  var folderpath = '/';
  // iine_appフォルダが入っているパスを、ドメイン名以下から記入してください。
  // 下記の例に従ってください。
  // var folderpath = '/'; --- http://example.com/iine_app/の場合
  // var folderpath = '/site/'; --- http://example.com/site/iine_app/の場合
  // var folderpath = 'site/folder/' --- http://example.com/site/folder/iine_app/の場合

次に「いいね！」ボタンを設置したいページの<head>～</head>の間に下記のスクリプトをコピペして下さい。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Round" rel="stylesheet">
<link rel="stylesheet" href="iine_app/iine.css">

次に</body>の直前か近い個所に下記のスクリプトをコピペして下さい。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="iine_app/iine.js"></script>

次に<body>～</body>の間の「いいね！」ボタンを設置したい場所に下記の html をコピペして下さい。お礼メッセージが要らない場合は13行目～20行目を削除して下さい。画像を換えたい場合は16行目(パスを間違えると表示されません)、お礼メッセージを換えたい場合は17行目を変更して下さい。

<!-- いいねボタンここから -->
<div id="iine_wrap">
<!-- ボタン本体ここから -->
<button type="submit" id="iine">
<div class="iine_wrap">
<i class="material-icons heart">favorite</i>
<div class="circle"></div>
<span id="countnum"></span>
</div>
</button>
<!-- ボタン本体ここまで -->

<!-- お礼メッセージここから -->
<div id="iine_thanks" style="display:none;">
<div class="box">
<img src="iine_app/example.jpg" alt="THANK YOU!">
<p>ありがとうございます！</p>
</div>
</div>
<!-- お礼メッセージここまで -->
</div>
<!-- いいねボタンここまで -->

画像はボタンをクリック(タップ)した時にポップアップで表示されます。表示時間の変更は「iine.js」の26行目と30行目の6000と7000の数値を変更して下さい。(値が小さいほど早くなります)　全ての変更が終わったら「iine_app」フォルダーと「いいね！」ボタンを設置したページをサーバーにアップロードすれば終了です。　「data.csv」ファイルをダウンロードすれば「いいね！」ボタンをクリック(タップ)したページ、日時、クリック数(タップ数)を確認することが出来ます。

コメントする コメントをキャンセル

コメントするコメントをキャンセル