How To Quickly Blackout Your Site in Protest of SOPA & PIPA

Many sites—my site and blog included—will be blacking out their own sites on Wednesday, January 18th, 2012 in protest of the Stop Online Piracy Act (SOPA) in the House of Representatives and Protect-IP in the Senate. Many of these sites have had time to develop and plan a method for “turning off” their websites for the day.

If you want to join in on the protest, but don’t have time to design and edit your site, try my quick and easy blocking tool!

The Message Against SOPA & Protect-IP

This code will produce a message that blocks out the content behind it and says the following:

THIS DOMAIN HAS BEEN BLOCKED FOR VIOLATING PROTECT-IP (S. 968) AND SOPA (HR. 3261).

Actually, this site is participating in a national online blackout on January 18th, 2012 in opposition of both the PROTECT-IP and SOPA bills.

If these bills pass, the U.S. Government will have the ability to block any website—including any funding partners and external websites that link to the blocked website—based on accusation alone from a copyright holder.

Go to AmericanCensorship.org to learn more about these bills and how your Internet freedoms are at risk.

Demonstration

Click here to see the Live demo!

The Files

Download the source files here: sopa.zip

Included in the zip are three files:

  • censored.css
  • censored.js
  • blocked.html

 

Censored.css – This is the main styling for the overlay and box. Edit this document if you want to change how the colors and layout look. Included is a CSS media query designed for viewing on mobile devices under 480px wide.

Censored.js – The code that builds the message. There are two parts to this:

function censorThisSite() – This part of the code has some basic document.write commands to write the divs needed to achieve the effect and the content within them, including the actual message.

$(window).load function – I added basic jQuery commands to animate the black background covering whatever website it’s loaded into.

Blocked.html – This is an example document to show you how the code is used.

How To Use In Code

There are 4 lines of code to add to your website to make this work properly. The first part goes in between the <head> tags of your document:

	

These lines of code load the styles and JavaScript needed to make this blackout message work. Since it does use jQuery, you will need to have a jQuery script link in your site’s tag for this to work (if you don’t use line 2 of the code). Also, it needs to come before the link for “censored.js,” or the commands are ignored and you’re left with a blank screen. Otherwise, just use the three lines of code as shown and you should be fine.

The second part calls the code to run:

Place this line of code where you want the code to run. Ideally, the code should be placed early on in your document—i.e. right after the opening tag—but anywhere in the document should be OK.

IFrame Solution

Some people have already asked to use the code, but told me they don’t have the ability to edit their site/blog’s headers. For those users, I have an iframe solution for you! Simply use the following code:

<iframe src="http://s3.cliffpro.com/files/code/sopa/blocked.html" 
frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" 
scrolling="auto" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10001;">

This uses the sample code I’m hosting to overlay on top of your site. While it’s not an elegant solution, if your ability to edit your own website is limited, this will work for you.

Editing and Assistance

Feel free to edit the code to fit your needs and share this page to everyone you can. If you have any questions, feel free to contact me or leave me a comment. I’ll try to help you.

Let’s stop SOPA and Protect-IP together!