Using smileys in your blog (Blogger)

In the previous post (yeah, I know, very long time since that post, but I've been very busy), here is the code for embedding some nice smileys in your blog.

// Show some funny smileys in the website.
function blogModuleEmoticons()
{
    function EmoticonsTable()
    {
        table =
        {
            // Smileys will be only recognized if they start with
            // at least one space.
            " :)": loadBlogFile("http://www.cute-factor.com/images/smilies/onion/th_059_.gif"),
            " ;(": loadBlogFile("http://www.cute-factor.com/images/smilies/onion/33c4b951.gif"),
            " :(": loadBlogFile("http://www.cute-factor.com/images/smilies/onion/098eb4a5.gif"),
            " :P": loadBlogFile("http://www.cute-factor.com/images/smilies/onion/154218d4.gif"),
            " XD": loadBlogFile("http://www.cute-factor.com/images/smilies/onion/th_053_XD.gif"),
            " :$": loadBlogFile("http://www.cute-factor.com/images/smilies/onion/0fbbf481.gif"),
            " ;)": loadBlogFile("http://www.cute-factor.com/images/smilies/onion/088.gif"),
            " :/": loadBlogFile("http://www.cute-factor.com/images/smilies/onion/17f0f3b0.gif"),
            " :x": loadBlogFile("http://www.cute-factor.com/images/smilies/onion_custom/th_0chis.gif"),
            " :o": loadBlogFile("http://www.cute-factor.com/images/smilies/onion/070.gif"),
            " B)": loadBlogFile("http://www.cute-factor.com/images/smilies/onion/th_102_.gif"),
            " :s": loadBlogFile("http://www.cute-factor.com/images/smilies/onion/th_081_.gif"),
            " X(": loadBlogFile("http://www.cute-factor.com/images/smilies/onion/4d6161fd.gif"),
            " :~": loadBlogFile("http://www.cute-factor.com/images/smilies/onion/th_087_.gif"),
            " :D": loadBlogFile("http://www.cute-factor.com/images/smilies/onion/70bff581.gif"),
            " :3": loadBlogFile("http://www.cute-factor.com/images/smilies/onion/cd08785a.gif")
            
            // We are using the Onion Head character emoticons
            // created by Ethan Liu and released under
            // CC3.0-by-nc-nd, according to his blog:
            //
            // http://blog.roodo.com/onion_club
        };

        return table;
    }

    // Appends the emoticons code table before box id.
    function showEmoticonsTable(box)
    {
        // Create the emoticons table.
        var emoticonsTable = EmoticonsTable();
        var table = document.createElement("table");

        // Create a cell to give a proper attribution to the 
        // copyright owners.
        var tr = document.createElement("tr");
        var td = document.createElement("td");

        td.className = "emoticonsAttribution";
        td.colSpan = Object.keys(emoticonsTable).length;

        var text = document.createTextNode("Download more icons at ");
        td.appendChild(text);

        var a = document.createElement("a");
        a.target = "_blank";
        a.href = "http://www.cute-factor.com/imlister.php?cid=wanwan&type=e";
        text = document.createTextNode("Cute-Factor");
        a.appendChild(text);

        td.appendChild(a);
        tr.appendChild(td);
        table.appendChild(tr);

        // Now, we create two rows. The first row contains the
        // smiley preview, the second row contains the code.
        for (var row = 0; row < 2; row++)
        {
            tr = document.createElement("tr");

            for (var emoticon in emoticonsTable)
            {
                td = document.createElement("td");

                // 2nd row.
                if (row & 1)
                {
                    // Emoticon code.
                    td.className = "emoticonCharacter";
                    td.innerHTML = emoticon;
                }
                // 1st row.
                else
                {
                    // Emoticon image.
                    var img = document.createElement("img");

                    img.className = "emoticon";

                    // Remove spaces.
                    img.src = emoticonsTable[emoticon].replace(/\s+/g, "");

                    td.appendChild(img);
                }

                tr.appendChild(td);
            }

            table.appendChild(tr);
        }

        // With this code we center the table in the container.
        var emoticonsTable = document.createElement("center");
        emoticonsTable.appendChild(table);

        // and insert it before the box.
        var commentForm = document.getElementById(box);

        if (commentForm)
            commentForm.parentNode.insertBefore(emoticonsTable, commentForm);
    }

    // Replace the emoticon code by its image.
    // "boxes" are the containers in which the replacement must be
    // done.
    function replaceEmoticons(boxes)
    {
        // Get the emoticon table.
        var emoticonsTable = EmoticonsTable();

        // For each container.
        for (var box in boxes)
        {
            var elements = getElementsByClass(boxes[box]);

            if (!elements)
                break;

            // Replace the codes (ignore "pre" tags).
            for (var element in elements)
                for (var emoticon in emoticonsTable)
                    replaceTextInNode(elements[element],
                                        emoticon,
                                        "",
                                        ["pre"]);
        }
    }

    // Add the style of the smileys
    var style = document.createElement("style");
    style.type = "text/css";

    // A size of 24x24 pixels for the smileys will be ok.
    style.innerHTML = "img.emoticon \
                        { \
                            width: 24px; \
                            height: 24px; \
                            margin: 0px; \
                            padding: 0px; \
                        } \
                        \
                        td.emoticonCharacter \
                        { \
                            text-align: center; \
                        } \
                        \
                        td.emoticonsAttribution \
                        { \
                            font-size: small; \
                            text-align: center;\
                        }";

    // Add the style to the page head.
    document.getElementsByTagName("head")[0].appendChild(style);

    // We will put the smileys only in our post and the comments.
    replaceEmoticons(["post-body entry-content", "comment-content"]);

    // Show the table before the comment box.
    showEmoticonsTable("comment-editor");
}

Remember that you must enable the code with:

<script type="text/javascript">
blogModules += " emoticons";
</script>