Dylan Paulus:

Facebook actually hides ‘dummy’ DOM nodes between the ‘Sponsored’ text. These values are entirely random characters, with a random number of DOM nodes between them. Invisible characters. At this point our CSS ad blocker is completely broken. There is no way for us to possibly code every possible value in CSS.

We’ve covered this before when Mike Pan noted it. Looks like it’s evolved a bit since then, getting even a little tricker.

I just opened my Facebook and selected “Copy Outer HTML” on the word “Sponsored”:

I guess we shouldn’t be terribly surprised at Facebook being user-hostile. I can imagine a workplace environment where fighting against ad blockers is turned into this fun kinda cat-and-mouse technological tennis match. But what they are fighting against is people wanting to exert a little control over what they allow into their eyes, ears, and brains.

It’s worth noting that nothing else in the DOM helps identify a post as an ad. So in that sense it’s just like how Google has evolved SERPs in how ads look just like organic results aside from a tiny “AD” before the URL.

We run sponsored posts here on CSS-Tricks too, so please feel free to hold our feet to the fire of accountability if you feel sponsored posts aren’t clear enough.

Direct Link to ArticlePermalink

The post How Facebook Avoids Ad Blockers appeared first on CSS-Tricks.