Tạo phần cảm xúc reaction emoji cho Blogger

Như tiêu đề, mình sẽ hướng dẫn các bạn tự tạo mục biểu tượng cảm xúc cho Blogger (Blogspot) đề người đọc có thể diễn tả cảm xúc của mình khi đọc bài viết của chúng ta.

Bước 1

Tạo một tài khoản miễn phí trên 000webhost, lưu ý mục Choose website type các bạn chọn Plain website, sau đó tiến hành điền tên trang web, mật khẩu,... Các bạn có thể tự tìm hiểu thêm.
Hoặc nếu không thích 000webhost thì các bạn hoàn toàn có thể chọn 1 hosting khác, có phí hoặc miễn phí, miễn là có hỗ trọ PHP và SQL là được.

Bước 2

Truy cập vào trang panel của 000webhost và chọn mục Manager > MySQL Database > Create new Database > các bạn tự đặt và lưu lại các thông tin là database name, username, và password để điền vào ở bước 3.
Sau khi tạo xong database, nhấn vào nút 3 chấm


Chọn Phpmyadmin > chọn tên database (database_name)vừa tạo > chọn SQL (thanh menu phía trên cùng) rồi nhập câu lệnh tạo bảng dưới đây, sau đó nhấn nút thực hiện
CREATE TABLE `reaction` (
    `key` VARCHAR(255) NOT NULL PRIMARY KEY,
    `r1` INT NOT NULL,
    `r2` INT NOT NULL,
    `r3` INT NOT NULL,
    `r4` INT NOT NULL,
    `r5` INT NOT NULL
);

Bước 3

Tiếp tục truy cập vào trang panel của 000webhost và chọn mục Manager > File manager > public_html > tạo file index.php, sau đó chọn edit file này và pase đoạn code dưới đây vào, thay thế database nameusername, và passwordlocalhost để nguyên là localhost, rồi lưu lại.
<?php
$conn = new mysqli("localhost", "username", "password", "database_name");
$key = isset($_GET["key"]) ? $_GET["key"] : null;
$r1 = isset($_GET["r1"]) ? $_GET["r1"] : null;
$r2 = isset($_GET["r2"]) ? $_GET["r2"] : null;
$r3 = isset($_GET["r3"]) ? $_GET["r3"] : null;
$r4 = isset($_GET["r4"]) ? $_GET["r4"] : null;
$r5 = isset($_GET["r5"]) ? $_GET["r5"] : null;
if ($key !== null) {
    $sql = "SELECT * FROM `reaction` WHERE `key` = ?";
    $stmt = $conn->prepare($sql);
    $stmt->bind_param("s", $key);
    $stmt->execute();
    $result = $stmt->get_result();
    if ($result->num_rows > 0) {
        $row = $result->fetch_assoc();
        if ($r1 !== null) {
            $row["r1"] += 1;
        }
        if ($r2 !== null) {
            $row["r2"] += 1;
        }
        if ($r3 !== null) {
            $row["r3"] += 1;
        }
        if ($r4 !== null) {
            $row["r4"] += 1;
        }
        if ($r5 !== null) {
            $row["r5"] += 1;
        }
        $updateSql = "UPDATE `reaction` SET `r1` = ?, `r2` = ?, `r3` = ?, `r4` = ?, `r5` = ? WHERE `key` = ?";
        $stmt = $conn->prepare($updateSql);
        $stmt->bind_param("iiisss", $row["r1"], $row["r2"], $row["r3"], $row["r4"], $row["r5"], $key);
        $stmt->execute();
        $response = ["r1" => $row["r1"], "r2" => $row["r2"], "r3" => $row["r3"], "r4" => $row["r4"], "r5" => $row["r5"]];
        echo json_encode($response);
    } else {
        $sql = "INSERT INTO `reaction` (`key`, `r1`, `r2`, `r3`, `r4`, `r5`) VALUES (?, 0, 0, 0, 0, 0)";
        $stmt = $conn->prepare($sql);
        $stmt->bind_param("s", $key);
        $stmt->execute();
        $response = ["r1" => 0, "r2" => 0, "r3" => 0, "r4" => 0, "r5" => 0];
        echo json_encode($response);
    }
}
$conn->close();
?>
Tiếp theo chọn sửa file .htaccess và chèn đoạn code này vào
Header set Access-Control-Allow-Origin "https://www.h2.io.vn"
Lưu ý phần domain https://www.h2.io.vn các bạn phải thay thế bằng tên miền hiện tại của blog, (nếu có www thì cũng phai thêm vào, không để là h2.io.vn)

Bước 4

Vào trang quản trị blogger, chọn Chủ đề > bấm dấu mũi tên bên cạnh chữ Tùy chỉnh > Chỉnh sửa HTML rồi kéo xuống dưới cùng và pase đoạn code này vào trước thẻ </body>.
Do đoạn code này sẽ lỗi khi dùng khung chứa code, nên mình để nó vào file driver nhé
Các bạn lưu ý thay thế đường url https://yourapi.domain bằng đường dẫn 000webhost các bạn đã tạo ở bước 1 2 3 nhé.

Bước 5

Tiếp tục trong trình chỉnh sửa, tìm đế thẻ <data:post.body/> và pase đoạn code dưới đây vào ngay dưới thẻ này, bấm xuất bản và tận hưởng.
<div class="ndhctn"><div class="ndhctnn"><input type="checkbox" id="r1"/><label for="r1" class="react" onclick="reaction(this.id)" id="xr1"><i data-icon="👍"></i></label><span id="cr1">0</span></div><div class="ndhctnn"><input type="checkbox" id="r2"/><label for="r2" class="react" onclick="reaction(this.id)" id="xr2"><i data-icon="😍"></i></label><span id="cr2">0</span></div><div class="ndhctnn"><input type="checkbox" id="r3"/><label for="r3" class="react" onclick="reaction(this.id)" id="xr3"><i data-icon="😁"></i></label><span id="cr3">0</span></div><div class="ndhctnn"><input type="checkbox" id="r4"/><label for="r4" class="react" onclick="reaction(this.id)" id="xr4"><i data-icon="😮"></i></label><span id="cr4">0</span></div><div class="ndhctnn"><input type="checkbox" id="r5"/><label for="r5" class="react" onclick="reaction(this.id)" id="xr5"><i data-icon="🤔"></i></label><span id="cr5">0</span></div></div>

Lưu ý API mình share này mình đang code với 5 emoji, nghĩa là bạn chỉ có thể thêm tối đa 5 emoji, các bạn có thể thay thế các emoji mà mình thích. Ví dụ bạn có thể thay 👍 thành 😂 chẳng hạn. Và đừng quên để lại cảm xúc của bạn bên dưới nhé
0
0
0
0
0
Ng.Đ Hoàng

@iHoala

7 Nhận xét

Mới hơn Cũ hơn