Hide sponsored posts on LinkedIn / Facebook / Twitter / X — CSS + MutationObserver
Social media feeds are ~30% sponsored posts mixed into organic. Sponsored posts are designed not to look like ads — random class hashes, dynamic DOM. Standard ad-blockers catch them by URL pattern (DoubleClick, Adsense), not by feed layout. That's where JustZix combining CSS + JS shines.
LinkedIn (linkedin.com)
LinkedIn has the most obfuscated DOM. Class names like .feed-shared-update-v2--ad are stable but change on every redesign. Text matching is reliable:
/* CSS attempt — catches some */
[data-ad-banner], .feed-shared-update-v2--promoted,
.feed-shared-actor__sub-description:has-text("Promoted") {
display: none !important;
}
CSS :has-text() is NOT standard — that's a JustZix-only pseudo. Fallback via JS MutationObserver:
// JS rule — text-match "Promoted" in feed cards
const hideSponsored = () => {
document.querySelectorAll('.feed-shared-update-v2, [data-id*="urn:li:activity"]').forEach(card => {
if (card.dataset.jzChecked) return;
card.dataset.jzChecked = '1';
const text = card.textContent;
if (/^Promoted|Sponsored/m.test(text) ||
/\bPromoted\b/.test(card.querySelector('.feed-shared-actor__sub-description')?.textContent || '')) {
card.style.display = 'none';
JUSTZIX.log(`[LinkedIn] Hidden sponsored card`);
}
});
};
new MutationObserver(hideSponsored).observe(document.body, {childList: true, subtree: true});
hideSponsored();
Facebook (facebook.com)
FB has ARIA-based markers — more stable than class names:
/* Posts with "Sponsored" label — Facebook uses aria attributes */
div[aria-label="Sponsored"],
div:has(> * > span[aria-label="Sponsored"]),
[data-pagelet*="Sponsored"] {
display: none !important;
}
/* Side rail with "Suggested for you" */
[aria-label="Suggested for you"], [aria-label="Reels and short videos"] {
display: none !important;
}
JS booster — cleans the feed on scroll, since infinite-scroll loads new posts:
// JS rule
new MutationObserver(() => {
document.querySelectorAll('div[role="feed"] > div').forEach(post => {
if (post.dataset.jzChecked) return;
post.dataset.jzChecked = '1';
if (post.querySelector('[aria-label="Sponsored"]')) {
post.style.display = 'none';
JUSTZIX.log('[FB] Hidden sponsored');
}
});
}).observe(document.body, {childList: true, subtree: true});
Twitter / X (twitter.com / x.com)
X has a "Promoted" label as SVG icon + text. Twitter also has "Suggestions" / "Trends for you" sidebars:
/* Sponsored tweets */
article:has([data-testid="promotedIndicator"]),
article:has(svg[data-testid="ad"]) {
display: none !important;
}
/* Trends + Who to follow sidebar */
[aria-label="Timeline: Trending now"],
[data-testid="sidebarColumn"] [data-testid="UserCell"] {
display: none !important;
}
Use case 1 — TOGGLE3 "Ad protection level"
Per-platform 3-stage strictness:
// Action TOGGLE3 "🛡️ Protection"
states[0] = { label: 'Off', value: 'off' } // no filtering
states[1] = { label: 'Normal', value: 'normal' } // hide sponsored
states[2] = { label: 'Strict', value: 'strict' } // hide sponsored + suggested + trends
code: |
document.documentElement.dataset.jzProtection = value;
JUSTZIX.log(`Protection: ${value}`);
CSS rule uses the data attribute:
html[data-jz-protection="off"] .jz-hide-sponsored { display: block !important; }
html[data-jz-protection="strict"] [aria-label*="Suggested"] { display: none !important; }
Use case 2 — Output Console counts hidden elements
// In a JS rule:
let hiddenCount = 0;
window.JZ_HIDDEN_SPONSORED = () => {
JUSTZIX.log(`[${location.hostname}] Hidden sponsored count: ${hiddenCount}`);
};
// Increment in each .style.display = 'none': hiddenCount++;
// Call from JS Console: JZ_HIDDEN_SPONSORED()
Pitfalls
- Selectors change. Social media platforms often reorganise the DOM to make blocking harder. Test rules monthly.
- Text-matching is fragile for i18n. "Promoted" / "Sponsored" / "Reklama" / "Promocja" — different languages. Add a regex disjunction.
- MutationObserver is expensive on large feeds. Throttle the observer (setTimeout 200ms debounce) if FPS drops.
- :has-text() is not CSS standard. JustZix supports it. In native CSS use :has(div:contains(...)) (also non-standard) or a JS observer.
What's next
- Hide cookie banners — sister pattern
- Customize AI chat apps — CSS + JS observer pattern
- TOGGLE3 — 3-state protection switcher
Install JustZix and reclaim 30% of your feed for organic content.
Rate this post
No ratings yet — be the first.