How to making Auto affiliate Disclosure in Blogger Articles

Affiliate Disclosure is important nowadays. If you a blogger affiliator, you must covered your blog post with this. All affiliator must to be under FTP Terms.

In this article, we try to make a simple script for showing affiliate disclosure. Of course for blogger platform. If wordpress do that, we must do it to. Blogspot Pride!.

document.addEventListener("DOMContentLoaded", function() {
const articleContent = document.querySelector('.post-body');
const comments = articleContent.childNodes;

// Fungsi untuk menyisipkan elemen setelah elemen referensi
function insertAfter(newNode, referenceNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

// Fungsi untuk menambahkan teks pengungkapan
function addDisclosure(text, position) {
// Buat DocumentFragment
const fragment = document.createDocumentFragment();

// Buat elemen untuk teks pengungkapan
const disclosure = document.createElement('span');
disclosure.className = 'disclosure';
disclosure.textContent = text;

// Tambahkan elemen ke dalam DocumentFragment
fragment.appendChild(disclosure);

// Sisipkan DocumentFragment ke dalam dokumen setelah posisi referensi
position.parentNode.insertBefore(fragment, position.nextSibling);
}

// Temukan link afiliasi Amazon dan umum, serta proses setiap komentar HTML dalam konten artikel
articleContent.querySelectorAll('a.amazon, a.aff').forEach(function(link) {
const firstH2 = articleContent.querySelector('h2');
addDisclosure('Amazon Affiliate Disclosure: This article may contain Amazon affiliate links.', firstH2);
});

// Cari dan proses setiap komentar HTML dalam konten artikel
comments.forEach(function(node) {
if (node.nodeType === Node.COMMENT_NODE) {
const commentText = node.textContent.trim();
if (commentText === 'amzn aff') {
addDisclosure('Amazon Affiliate Disclosure: This article may contain Amazon affiliate links.', node);
} else if (commentText === 'all aff') {
addDisclosure('General Affiliate Disclosure: This article may contain affiliate links.', node);
}
}
});
});

For making disclosure text can easy to read by visitor, make some style in css.

in script above, we create class .disclosure for span. So, copy this css property below.

.disclosure {
display: block;
background-color: #f0f0f0;
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 15px;
font-size: 14px;
line-height: 1.5;
}

NOTE: if you want to change class name (.dsiclosure), to be sure you chance to className in script.