I have added a page to the main website displaying posts from an external blog and alongside it the Twitter feed from Krystal whose hosting I resell.<\/p>\n\n\n\n
The blog posts display well but the Twitter feed didn’t display on some browsers. This is because I have an ad blocker on Firefox and Chrome and ‘platform.twitter.com’ matches a kown tracker and is blocked when content blocking was enabled for your browser.<\/p>\n\n\n\n
I discovered a cool way to display a message (rather than blank white space!) when content is blocked and to give the reader the option to disable ad blockers for your website. It is the work of Arthur Gareginyan, a designer and full stack software engineer. He is the founder of Space X-Chimp<\/a> and the blog My Cyber Universe<\/a>. His personal website can be found at arthurgareginyan.com<\/a>. Credit to him for this work<\/p>\n\n\n\n When we visit any website our web browser downloads an HTML file \nwhich includes an internal and external references to JavaScript files, \nCSS stylesheets, images and etc. If our browser has an ad blocker \nextension installed, it will compare the names of referenced files \nagainst a built-in block list and if there are any matches those files \nwill be blocked. All block lists include a reference to Now, step by step guide.<\/p>\n\n\n\n Add a message on website<\/p>\n\n\n\n First of all, we need to create a banner with friendly message asking\n to disable ad blocker. For this we place the following code anywhere in\n our theme where we would like to display the message.<\/p>\n\n\n\n Note:<\/strong> This message will be hidden by default.<\/p><\/blockquote>\n\n\n\n Note:<\/strong> You can add this code in any place of your \ntheme: inside the post content, in the sidebar area, in the footer area \nand etc.. I added this code right after Note:<\/strong> You can style your banner the same way you \nwould style any other part of your blog\/website theme. Use a style that \nsuits your needs.<\/p><\/blockquote>\n\n\n\n Here\u2019s how the message will looks like:\n\n\n Our website is made possible by displaying online advertisements to our visitors. Create the \u201cads.js\u201d file and include to the website<\/p>\n\n\n\n Before we move on to the next step, we need to add an additional \nJavaScript file to our website, which is necessary to detect the ad \nblocker. This file, if is included to website, will create a hidden DIV \nelement and add it to the our website\u2019s HTML source code.<\/p>\n\n\n\n For this we will create a new JavaScript file inside the root directory of our website and call it We will include this file ( Note:<\/strong> You can use any method of including a JS file that is best suitable for you.<\/p><\/blockquote>\n\n\n\n Check if \u201cads.js\u201d was blocked<\/p>\n\n\n\n Now it\u2019s time to create code that will check the existence of our hidden DIV element. If the hidden DIV element created by our For this we will add the following jQuery code to the main JavaScript\/jQuery file of our website:<\/p>\n\n\n\n Or, if our website does not have a main JavaScript\/jQuery file \nincluded, we can place the following JavaScript within our website\u2019s \nHTML source code just above the And we are done! This way we have detect the ad blockers and shown a message to visitors of the website. <\/p>\n\n\n\n Credit: Arthur Gareginyan<\/a> https:\/\/mycyberuniverse.com\/en-gb\/detect-ad-blocker-show-message.html<\/a><\/p>\n","protected":false},"excerpt":{"rendered":" I have added a page to the main website displaying posts from an external blog and alongside it the Twitter feed from Krystal whose hosting I resell. The blog posts display well but the Twitter feed didn’t display on some…<\/span> <\/p>\n <\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-443","post","type-post","status-publish","format-standard","hentry","category-graphicz-articles"],"_links":{"self":[{"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/posts\/443"}],"collection":[{"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/comments?post=443"}],"version-history":[{"count":2,"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/posts\/443\/revisions"}],"predecessor-version":[{"id":448,"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/posts\/443\/revisions\/448"}],"wp:attachment":[{"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=443"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=443"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=443"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}ads.js<\/code> because it\u2019s a common name for JavaScript files that are associated with serving ads.<\/p>\n\n\n\n<div id=\"banner-12345\">\n Our website is made possible by displaying online advertisements to our visitors.<br>\n Please consider supporting us by disabling your ad blocker on our website.\n<\/div>\n<style>\n #banner-12345 {\n display: none;\n margin-bottom: 30px;\n padding: 20px 10px;\n border-radius: 5px;\n background: #D30000;\n color: #fff;\n text-align: center;\n font-weight: bold;\n }\n<\/style>\n<\/pre>\n\n\n\n<header><\/code> tag.<\/p><\/blockquote>\n\n\n\n
\n Please consider supporting us by disabling your ad blocker on our website.\n\n\n\n\n<\/p>\n\n\n\nads.js<\/code>. Then we place the following code to this file:<\/p>\n\n\n\nvar e = document.createElement('div');\ne.id = 'test-block';\ne.style.display = 'none';\ndocument.body.appendChild(e);\n<\/pre>\n\n\n\nads.js<\/code>) by placing the following HTML code within our website\u2019s HTML source code just above the <\/body><\/code> tag:<\/p>\n\n\n\n<script src=\"\/ads.js\" type=\"text\/javascript\"><\/script>\n<\/pre>\n\n\n\n
ads.js<\/code>\n file exists then ads are allowed, if not then ads are blocked. And if \nads are blocked we will make visible the message that we have created on\n the 1th step.<\/p>\n\n\n\nif ( $('#test-block').length == 0 ) {\n $('#banner-12345').show();\n}\n<\/pre>\n\n\n\n<\/body><\/code> tag.<\/p>\n\n\n\n<script type=\"text\/javascript\">\n if ( !document.getElementById('test-block') ) {\n document.getElementById('banner-12345').style.display='block';\n }\n<\/script>\n<\/pre>\n\n\n\n