BLOGGER POST CLAP COUNT ON GOOGLE SHEET

Blogger Post Clap Count On Google Sheet

ဒါကတော့ blog site မှာ blog post တခုရဲ့အချက်အလက်ကို user ကကြိုက်နှစ်သက်ပါက Clap Button လေးနှိပ်၍မိိမိ Post ကိုအားပေးချင်ရင်အား‌ ပေးတယ်လို့သတ်မှတ်လို့ရအောင်ဖန်တီးထားတဲ့ Clap Count System ပါ။ထို Clap Count System တခုကို Google Sheet ဖြင့်ဖန်တီးပြသွားမှာဖြစ်ပါတယ်။

စတင်ဖန်တီးရန် အောက်က link ကို copy ယူ၍ Browser မှာဖွင့်ပါ။(မှတ်ချက် → Mobile ဖုန်းဖြင့်တည်ဆောက်ပါက Browser Desktop site သို့ ပြောင်းပါ)

https://docs.google.com/spreadsheets/u/0/

1. Start a new spreadsheet ➕ ကိုနှိပ်ပါ
2. Untitled Spreadsheet နေရာမှာ → Project name သတ်မှတ်၍ရေးပါ
3. Sheet1 ကိုနှိပ် → Rename ကိုနှိပ် → Sheet name သတ်မှတ်၍ရေးပါ(သတိ → စာလုံး(space)မခြားရပါ)
4. line 1 ကို → Header အဖြစ်သတ်မှတ်ပါ။အောက်ကနမူနာကြည့်၍ရေးပါ

	A	B	C	D	E	F	G	H	I	J	K	L
1	Post ID	Clap
2

1. 
   save ဖြစ်တဲ့ထိစောင့်ပါ။

1. Extensions ကိုနှိပ်
2. Apps Script ကိုနှိပ်
3. code.gs တွင် အောက်က code ကို copy ယူထည့်

function doGet(e) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Your_Sheet_Name");
  const postId = e.parameter.postId;
  if (!postId) return ContentService.createTextOutput("Missing postId");
  const data = sheet.getDataRange().getValues();
  for (let i = 1; i < data.length; i++) {
    if (data[i][0] == postId) {
      return ContentService.createTextOutput(data[i][1].toString());
    }
  }
  sheet.appendRow([postId, 0]);
  return ContentService.createTextOutput("0");
}
function doPost(e) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");
  let postId = "";
  if (e.parameter.postId) {
    postId = e.parameter.postId;
  } else {
    const payload = e.postData.contents;
    const parsed = new URLSearchParams(payload);
    postId = parsed.get("postId");
  }
  if (!postId) return ContentService.createTextOutput("Missing postId");
  const data = sheet.getDataRange().getValues();
  for (let i = 1; i < data.length; i++) {
    if (data[i][0] == postId) {
      const newCount = data[i][1] + 1;
      sheet.getRange(i + 1, 2).setValue(newCount);
      return ContentService.createTextOutput(newCount.toString());
    }
  }
  sheet.appendRow([postId, 1]);
  return ContentService.createTextOutput("1");
}

1. Your_Sheet_Name နေရာတွင်မိမိ SheetName ထည့်ပေးပါ။စာလုံးအကြီးအသေးမှန်အောင်ရေးပါ။

1. 
   ကိုနှိပ်။save ဖြစ်တဲ့ထိစောင့်ပါ

1. save ဖြစ်သွားပြီဆို →Deploy ကိုနှိပ်ပါ
2. New deployment ကိုရွေးပါ
3. ⚙️ ကိုနှိပ်ပါ။
4. Web app ကိုရွေးပါ
5. New description နေရာတွင်မိမိ → sheet name ရေးထည့်ပါ
6. Execute as နေရာမှာ မိမိ gmail မှန်မမှန်စစ်ပါ
7. Who has access နေရာတွင် → Anyone ကိုရွေးပါ
8. Deploy ကိုနှိပ်
9. Authorize access ကိုနှိပ်
10. sign in လုပ်ဖို့မိမိ → gmail account ကိုနှိပ်
11. Advanced ကိုနှိပ်
12. Go to Untitled project (unsafe). ကိုနှိပ်
13. Allow ကိုနှိပ်
14. Web app link ကို → copy ယူ၍မှတ်သားထားပါ။‌အောက်ကပုံကိုကြည့်ပါ။Template တွင်ထည့်သွင်းအသုံးပြုရမည်ဖြစ်သည်

1. dashboard ထဲက Theme ကိုနှိပ်
2. HTML🔻ကိုနှိပ်
3. <data.post.body/> ရှာပါ(သတိ - template တခုနှင့်တစ်ခုမတူသဖြင့် <data.post.body/> သည်တခုထက်ပို၍ရှိနိုင်သည်။နောက်ဆုံး <data.post.body/> အောက်တွင် အောက်က code ကို copy ယူ၍ထည့်ပါ

<div class='post' expr:data-post-id='data:post.id'>
  <div class='claps_container'>
  <button class='claps_button'>👏</button>
  <span class='claps'>+0</span>
</div>
</div>

1. </body>ရှာပါ။တွေ့ပြီဆိုရင်အောက်က css & js code ကို copy ယူ၍အဲဒီ</body> အပေါ်ကနေထည့်ပါ။

<style>
.claps_container{display:flex;align-items:center;gap:2px;margin-top:10px;}
.claps_button{background:#222;color:#ffb300;border:2px solid #555;border-radius:50%;width:50px;height:50px;font-size:24px;cursor:pointer;transition: all 0.3s ease;}
.claps_button:hover{background:#333;transform:scale(1.1);}
.claps_button.is_clicked{background:#ffb300;color:#222;transform: scale(1.2);}
.claps{display:flex;align-items:center;background:#ff9800;border:1px solid #555;border-radius:50%;width:50px;height:50px;padding:5px;font-size:16px;font-weight:600;color:#333;min-width:20px;}
</style>
<script>//<![CDATA[
const scriptURL = "Your_Web_App_Link_Here";
document.querySelectorAll(".post").forEach(post => {
  const postId = post.dataset.postId;
  const btn = post.querySelector(".claps_button");
  const display = post.querySelector(".claps");
  if (!postId) return;
  fetch(`${scriptURL}?postId=${postId}`)
    .then(res => res.text())
    .then(count => display.innerText = "+" + count);
btn.addEventListener("click", () => {
    fetch(scriptURL, {
      method: "POST",
      body: new URLSearchParams({ postId: postId })
    })
    .then(res => res.text())
    .then(newCount => {
      display.innerText = "+" + newCount;
btn.classList.add("is_clicked");
      setTimeout(() => btn.classList.remove("is_clicked"), 800);
    });
  });
});
//]]></script>

1. Your_Web_App_Link_Here‌ နေရာမှာမိမိ Web App Link ဖြင့်အစားထိုးပါ။
2. save ကိုနှိပ်ပြီးပြီ