How to add Bookmark feature in Blogger using Firebase

Adding the Bookmark feature help you to improve your website's user experience by giving them the ability to save posts to read later. It was very useful for blogs with huge amount of content by allowing users to easily access their favorite posts. Blogger, the best platform for beginners as it is free and easy to use. Blogger doesn't give some great features like login, bookmark etc. However we can add these features with custom codes.

Best option for adding features like a bookmark is Firebase because it offers a wide range of services like real-time database, cloud storage, authentication etc, making it the best option to add advanced features to your Blogger website. Using Firebase we can add a Login function in Blogger and using a login function we can add a bookmark that stores data on the user's account. This means users can access their bookmarks from any device using their account.

After following this tutorial, you get a fully functional bookmark feature that store data on a logged user's account. We shared the tutorial to add a Login feature in Blogger in a previous post, If you are here without following the previous post then this bookmark feature will not work as you expected. This post is second part of the previous post so please check the previous tutorial before continuing this tutorial.

Previous post link: Click here

How to add Bookmark feature in Blogger using Firebase?

1. First of all visit Blogger dashboard
2. Click on "Theme" option from the sidebar
3. Click on drop-down-icon near Customize option
4. Click on "Edit HTML"
5. Find we early added login JS which was provided in the previous post

/*---
    User Authentication and Profile JS
    Created by: IncredibleGad
  Source code: https://www.incrediblegad.in/2025/01/how-to-add-login-feature-in-blogger.html
  ---*/
  firebase.initializeApp(firebaseConfig);
    const auth = firebase.auth();
auth.onAuthStateChanged(e => {
    const t = document.getElementById("loginLink"),
          o = document.getElementById("dashboardLink"),
          i = document.getElementById("userProfileImage");

    if (e) {
        if (t) t.style.display = "none";
        if (o) o.style.display = "inline-block";

        if (e.providerData[0].providerId === "google.com" && i) {
            i.src = e.photoURL;
            i.alt = e.displayName;
            i.style.display = "block";
        }
    } else {
        if (t) t.style.display = "inline-block";
        if (o) o.style.display = "none";
    }
});

6. Replace it with the JS given below

/*---
    User Authentication, Profile and Bookmark JS
    Created by: IncredibleGad
  Source code: https://www.incrediblegad.in/2025/02/how-to-add-bookmark-feature-in-blogger.html
  ---*/
  
firebase.initializeApp(firebaseConfig);

const auth = firebase.auth(), 
      db = firebase.firestore();

auth.onAuthStateChanged(e => {
    const t = document.getElementById("loginLink"),
          o = document.getElementById("dashboardLink"),
          i = document.getElementById("userProfileImage"),
          n = document.getElementById("bookmarkLink");
    
    e ? (
        t && (t.style.display = "none"),
        o && (o.style.display = "inline-block"),
        "google.com" === e.providerData[0].providerId && i && (
            i.src = e.photoURL,
            i.alt = e.displayName,
            i.style.display = "block"
        ),
        n && (n.style.display = "inline-block")
    ) : (
        t && (t.style.display = "inline-block"),
        o && (o.style.display = "none"),
        n && (n.style.display = "none")
    );
});

window.addBookmark = async function() {
    const e = auth.currentUser;
    
    if (!e) {
        alert("Please Login to add bookmarks!");
        return;
    }

    const t = document.querySelector("h1")?.innerText || "Untitled",
          o = window.location.href;

    try {
        const n = await db.collection("bookmarks")
            .doc(e.uid)
            .collection("userBookmarks")
            .where("url", "==", o)
            .get();

        if (!n.empty) {
            alert("This post is already in your bookmarks!");
            return;
        }

        await db.collection("bookmarks")
            .doc(e.uid)
            .collection("userBookmarks")
            .add({
                title: t,
                url: o,
                timestamp: firebase.firestore.FieldValue.serverTimestamp()
            });

        alert("Successfully added to bookmarks!");
    } catch (e) {
        console.error("Error adding bookmark: ", e);
        alert("Failed to add bookmark.");
    }
};

7. Find best position in <data:post.body/> then paste the following add bookmark button HTML code

<button 
    class='bookmark-icon' 
    onclick='addBookmark()' 
    title='Add to Bookmark'
>

    <svg 
        xmlns="http://www.w3.org/2000/svg" 
        width="16" 
        height="16" 
        fill="currentColor" 
        class="bi bi-bookmark-plus" 
        viewBox="0 0 16 16"
    >

        <path 
            d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1z" 
        />

        <path 
            d="M8 4a.5.5 0 0 1 .5.5V6H10a.5.5 0 0 1 0 1H8.5v1.5a.5.5 0 0 1-1 0V7H6a.5.5 0 0 1 0-1h1.5V4.5A.5.5 0 0 1 8 4" 
        />

    </svg>

</button>

8. Save the HTML by clicking save-icon on the top
9. Go back to Blogger homepage
10. Click on "Pages" option from the sidebar
11. Create a page
12. Name the page (e.g Bookmark, Bookmarks, Your Bookmarks etc...)
13. Switch to "HTML view"
14. Paste the following code there

<div id="bookmarkList" style="margin-top:20px;">Loading bookmarks...</div>

<script>
/* Bookmarks page JS | incrediblegad.in */
    function isFirebaseLoaded() {
        return typeof firebase !== 'undefined';
    }

    function waitForFirebase() {
        return new Promise((resolve, reject) => {
            const interval = setInterval(() => {
                if (isFirebaseLoaded()) {
                    clearInterval(interval);
                    resolve();
                }
            }, 100);
        });
    }

    waitForFirebase().then(() => {
        const auth = firebase.auth(),
              db = firebase.firestore();

        async function fetchBookmarks() {
            const user = auth.currentUser,
                  bookmarkList = document.getElementById("bookmarkList");

            if (!user) return bookmarkList.innerText = "Please log in to view your bookmarks.";

            bookmarkList.innerHTML = "Loading...";

            const userBookmarksRef = db.collection("bookmarks")
                .doc(user.uid)
                .collection("userBookmarks"),
                q = userBookmarksRef.orderBy("timestamp", "desc");

            try {
                const snapshot = await q.get();

                if (snapshot.empty) 
                    return bookmarkList.innerHTML = `<p class="note success">No bookmarks found</p>`;

                bookmarkList.innerHTML = "";

                snapshot.forEach(doc => {
                    const data = doc.data(),
                          bookmarkDiv = document.createElement("div");

                    bookmarkDiv.style.cssText = "margin:10px 0;padding:10px;background:transparent;border:1px solid var(--border-color);border-radius:10px";

                    bookmarkDiv.innerHTML = 
                        `<a href="${data.url}" target="_blank" style="text-decoration:none;color:var(--text-color);font-weight:bold;">${data.title}</a>
                         <div style="font-size:12px;color:#777;">Saved on: ${new Date(data.timestamp?.toDate()).toLocaleString()}</div>
                         <button onclick="removeBookmark('${doc.id}')" style="padding:5px 10px;background:var(--accent-color);color:white;border:none;border-radius:var(--radius);cursor:pointer">
                         <i class="bi bi-trash"></i></button>`;

                    bookmarkList.appendChild(bookmarkDiv);
                });
            } catch (error) {
                console.error("Error fetching bookmarks: ", error);
                bookmarkList.innerHTML = `<p class="note warning">Failed to load bookmarks</p>`;
            }
        }

        async function removeBookmark(bookmarkId) {
            const user = auth.currentUser;

            if (!user) return;

            if (confirm("Are you sure you want to remove this bookmark?")) {
                try {
                    await db.collection("bookmarks")
                        .doc(user.uid)
                        .collection("userBookmarks")
                        .doc(bookmarkId)
                        .delete();

                    alert("Bookmark removed successfully!");
                    fetchBookmarks();
                } catch (error) {
                    console.error("Error removing bookmark: ", error);
                    alert("Failed to remove bookmark.");
                }
            }
        }

        auth.onAuthStateChanged(user => {
            user ? fetchBookmarks() : 
            document.getElementById("bookmarkList").innerHTML = 
            `<p class="note warning">Please Login to view your bookmarks</p>`;
        });

        window.removeBookmark = removeBookmark;
    });
</script>

15. Click publish button

Adding bookmark icon with bookmark page link

Go to Edit HTML then find the best position to add the bookmark icon (e.g. Somewhere in the header) then paste the following code

<!-- Bookmark Button (Initially Hidden) -->
<a 
    href='/p/bookmark.html' 
    id='bookmarkLink' 
    style='display:none;'
>
    <button 
        class='bookmark-toggle'
    >
        <svg 
            fill='currentColor' 
            viewBox='0 0 16 16'
        >
            <path 
                d='M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1z' 
            />
        </svg>
    </button>
</a>

Don't forget to replace "/p/bookmark.html" with your website's bookmark page URL path.

You may find some CSS issues in the add bookmark and bookmark link icon because we didn't share the CSS for it. You need to apply CSS based on your Blogger theme and also use any minifying website to minify the codes given here. You can find this by searching "HTML minifier" for HTML codes and "Javascript Minifier" for Javascript Codes.

Error fix

If your login page stops working after replacing the script then go to the login page then find and remove const db = firebase.firestore();

Conclusion

Implementing a bookmark feature in your Blogger website help you to improve your website's user experience. It not only improve user's experience but also encourage them to spend more time on your website. By permitting readers to add their favorite posts to their bookmarks help them to come back to the same posts whenever they need it.

In this tutorial we went through steps to implement bookmark feature in your Blogger website. Firebase settings and Firebase login implementation steps are already shared in the previous post. We using Firebase for this process as it provide secure data storage with real-time capabilities that offers smooth and responsive user experience.

After following this tutorial carefully, you can ensure fully functional bookmark feature on your Blogger website. If you have any doubt related to this post then please feel free to comment down below. Don't forget to share with your those friends who are looking for a tutorial to add bookmark feature to their Blogger website.

Thanks for spending time to read this article. Have a wonderful day!