Masquer les posts sponsorisés sur LinkedIn / Facebook / Twitter / X — CSS + MutationObserver
Les fils des réseaux sociaux sont ~30 % de posts sponsorisés mélangés à l'organique. Les posts sponsorisés sont conçus pour ne pas ressembler à des pubs — hash de classes aléatoires, DOM dynamique. Les bloqueurs de pub standard les attrapent par pattern d'URL (DoubleClick, Adsense), pas par la mise en page du fil. C'est là que JustZix, en combinant CSS + JS, brille.
LinkedIn (linkedin.com)
LinkedIn a le DOM le plus obfusqué. Les noms de classes comme .feed-shared-update-v2--ad sont stables mais changent à chaque refonte. Le text matching est fiable :
/* Tentative CSS — en attrape certains */
[data-ad-banner], .feed-shared-update-v2--promoted,
.feed-shared-actor__sub-description:has-text("Promoted") {
display: none !important;
}
Le CSS :has-text() n'est PAS standard — c'est une pseudo-classe propre à JustZix. Repli via MutationObserver JS :
// Règle JS — text-match « Promoted » dans les cartes du fil
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] Carte sponsorisée masquée`);
}
});
};
new MutationObserver(hideSponsored).observe(document.body, {childList: true, subtree: true});
hideSponsored();
Facebook (facebook.com)
FB a des marqueurs basés sur ARIA — plus stables que les noms de classes :
/* Posts avec label « Sponsored » — Facebook utilise des attributs aria */
div[aria-label="Sponsored"],
div:has(> * > span[aria-label="Sponsored"]),
[data-pagelet*="Sponsored"] {
display: none !important;
}
/* Rail latéral avec « Suggested for you » */
[aria-label="Suggested for you"], [aria-label="Reels and short videos"] {
display: none !important;
}
Booster JS — nettoie le fil au scroll, car le scroll infini charge de nouveaux posts :
// Règle JS
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] Sponsorisé masqué');
}
});
}).observe(document.body, {childList: true, subtree: true});
Twitter / X (twitter.com / x.com)
X a un label « Promoted » sous forme d'icône SVG + texte. Twitter a aussi des barres latérales « Suggestions » / « Tendances pour vous » :
/* Tweets sponsorisés */
article:has([data-testid="promotedIndicator"]),
article:has(svg[data-testid="ad"]) {
display: none !important;
}
/* Barre latérale Tendances + Suggestions d'abonnement */
[aria-label="Timeline: Trending now"],
[data-testid="sidebarColumn"] [data-testid="UserCell"] {
display: none !important;
}
Cas d'usage 1 — TOGGLE3 « Niveau de protection anti-pub »
Sévérité en 3 paliers par plateforme :
// Action TOGGLE3 « 🛡️ Protection »
states[0] = { label: 'Off', value: 'off' } // pas de filtrage
states[1] = { label: 'Normal', value: 'normal' } // masquer sponsorisé
states[2] = { label: 'Strict', value: 'strict' } // masquer sponsorisé + suggéré + tendances
code: |
document.documentElement.dataset.jzProtection = value;
JUSTZIX.log(`Protection : ${value}`);
La règle CSS utilise l'attribut data :
html[data-jz-protection="off"] .jz-hide-sponsored { display: block !important; }
html[data-jz-protection="strict"] [aria-label*="Suggested"] { display: none !important; }
Cas d'usage 2 — l'Output Console compte les éléments masqués
// Dans une règle JS :
let hiddenCount = 0;
window.JZ_HIDDEN_SPONSORED = () => {
JUSTZIX.log(`[${location.hostname}] Nombre de sponsorisés masqués : ${hiddenCount}`);
};
// Incrémentez à chaque .style.display = 'none' : hiddenCount++;
// Appelez depuis la JS Console : JZ_HIDDEN_SPONSORED()
Pièges
- Les sélecteurs changent. Les plateformes sociales réorganisent souvent le DOM pour compliquer le blocage. Testez les règles chaque mois.
- Le text-matching est fragile pour l'i18n. « Promoted » / « Sponsored » / « Sponsorisé » / « Reklama » — langues différentes. Ajoutez une disjonction regex.
- MutationObserver est coûteux sur les gros fils. Throttlez l'observer (debounce setTimeout 200 ms) si le FPS chute.
- :has-text() n'est pas du CSS standard. JustZix le prend en charge. En CSS natif, utilisez :has(div:contains(...)) (aussi non standard) ou un observer JS.
La suite
- Masquer les bannières cookies — pattern jumeau
- Personnaliser les apps de chat IA — pattern CSS + observer JS
- TOGGLE3 — sélecteur de protection à 3 états
Installez JustZix et récupérez 30 % de votre fil pour le contenu organique.
Notez cet article
Aucune note — soyez le premier.