This is to change the paper plane button and have same button wherever you post. I got this off of Chatgpt.
Place this in footer
<script>
(function () {
// Your post now button styles and text
const buttonHTML = `
<button id="post-now-btn" style="
background-color: rgb(40, 167, 69);
color: white;
padding: 8px 14px;
border: none;
border-radius: 6px;
font-weight: bold;
cursor: pointer;
margin-right: 10px;
font-size: 14px;
">Post Now</button>
`;
function getFooter(composer) {
return composer.querySelector('.TextEditor-controls, .Composer-footer');
}
function injectPostNowBtn(composer) {
if (composer.querySelector('#post-now-btn')) return; // already exists
const footer = getFooter(composer);
if (!footer) return;
// Create button element from HTML string
const tempDiv = document.createElement('div');
tempDiv.innerHTML = buttonHTML.trim();
const postNowBtn = tempDiv.firstChild;
// Add your click handler here if needed, example:
postNowBtn.onclick = () => {
// Trigger the original "Post article" button click inside the composer footer
const submitBtn = footer.querySelector('li.item-submit button.Button--primary');
if (submitBtn) submitBtn.click();
else alert('Submit button not found!');
};
// Insert post-now-btn as first child or as needed
footer.insertBefore(postNowBtn, footer.firstChild);
}
// MutationObserver watching for new composers to inject post-now-btn
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
mutation.addedNodes.forEach(node => {
if (!(node instanceof HTMLElement)) return;
let composers = [];
if (node.matches && (node.matches('.Composer') || node.matches('.ComposerPage'))) {
composers.push(node);
} else {
composers = Array.from(node.querySelectorAll('.Composer, .ComposerPage'));
}
composers.forEach(composer => {
let tries = 0;
const interval = setInterval(() => {
const footer = getFooter(composer);
if (footer) {
injectPostNowBtn(composer);
clearInterval(interval);
}
tries++;
if (tries > 50) clearInterval(interval);
}, 100);
});
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
// Also run once on page load for existing composers
document.querySelectorAll('.Composer, .ComposerPage').forEach(composer => {
let tries = 0;
const interval = setInterval(() => {
const footer = getFooter(composer);
if (footer) {
injectPostNowBtn(composer);
clearInterval(interval);
}
tries++;
if (tries > 50) clearInterval(interval);
}, 100);
});
})();
</script>
Add this to header
<script>
function waitForFooterAndAddButton() {
const targetSelector = 'i.fa-paper-plane';
// Check if the target icon and button already exist
const icon = document.querySelector(targetSelector);
if (!icon) return;
const realButton = icon.closest('button');
if (!realButton || document.getElementById('post-now-btn')) return;
const postNowBtn = document.createElement("button");
postNowBtn.textContent = "Post Now";
postNowBtn.id = "post-now-btn";
postNowBtn.style.backgroundColor = "black";
postNowBtn.style.color = "white";
postNowBtn.style.padding = "8px 14px";
postNowBtn.style.border = "none";
postNowBtn.style.borderRadius = "6px";
postNowBtn.style.fontWeight = "bold";
postNowBtn.style.cursor = "pointer";
postNowBtn.style.marginRight = "10px";
postNowBtn.style.fontSize = "14px";
postNowBtn.addEventListener("click", function () {
realButton.click();
});
// Insert into footer if found
const footer = document.querySelector('.ComposerBody-footer, .BlogComposer-footer, .Composer-footer');
if (footer) {
footer.insertBefore(postNowBtn, footer.firstChild);
} else {
realButton.parentElement.insertBefore(postNowBtn, realButton);
}
}
// Wait for composer/footer to be added to the page
const observer = new MutationObserver(() => {
if (
document.querySelector('i.fa-paper-plane') &&
!document.getElementById('post-now-btn')
) {
waitForFooterAndAddButton();
}
});
observer.observe(document.body, {
childList: true,
subtree: true
});
</script>
Place this in CSS
li.item-submit.App-primaryControl {
display: none !important;
}.ComposerPageMobileSubmit { display: none !important; }
I hope this helped!
