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!

16 Comments

Alan Billings

I just did it the easy way made a new page gave it a black background and put a do not support SOPA messages on it. Also to send a message I have given my Lets Talk Tech YouTube page’s a black background and set all my videos to private to show what my YouTube page could look like if SOPA or PIPA was passed.

Reply
Cliff Huizenga

Nice, Alan! Yeah, there are several easier methods out there, but I think this is a decent pre-built solution for those who really don’t have the time—or the patience—to code their own. Plus, this gives people who have very little access and ability to edit their blog or site a down-and-dirty method for doing so (including the iframe method). It’s going to be a fun day tomorrow. ;) Keep up the awesome work!

Reply
Cliff Huizenga

You’re welcome, Rick! :D Enjoy and good luck with the blackout, as well as all your business endeavors, my friend. Stay “Krative!”

Reply
tony

Having many pages, and using various applications (dokuwiki, wordpress, statunet, gallery, etc.) on my site, I need a one-stop solution that doesn’t involve pasting code to 100+ pages, so am using a 503 page and apache redirect. Details and howto at http://tonyb.us/SOPASTRIKEhowto

Reply
Cliff Huizenga

Tony, that’s actually a better move to do if you have multiple websites and control over your domain. It’s also a better method for making sure Google doesn’t index the SOPA message instead of your site’s content. Thanks for sharing!

The method I included here is for both users who aren’t as technically savvy, and users who are knowledgeable but don’t have time to whip up a message for their sites. Think of this as more of a template than an exact solution. Some users are very happy with the iframe method—especially on free blogging sites that don’t allow much internal code manipulation—even though I would personally never use that method. It’s all about what works for you.

Reply
Sondra

I think sopa is stupid! How is the government going to ever be able to enforce such an act let alone put thousands of people in jail! The economy is bad enough, we don’t need to block the internet too! You block it, you may as well cancel your online accounts and turn your modem off! That law makes absolutely no sense whatsoever, please do not support this bill!!!!!

Reply
Cliff Huizenga

If these bills were to pass—remember, January 24th is when the Senate votes on PIPA—I’m pretty sure a number of lawsuits would come about as well, and a good enough legal team would probably be able to prove that the actions of this bill are unconstitutional. No due process for a copyright claim? And what if the claims are wrong? What about fair use?

It seems to me there are many holes in these bills, and they’ll probably try to work them out, but I don’t see them passing. At least, not in the current state they’re both in. Thanks for your thoughts, Sondra!

Reply
outTake

Hi, I’ve blockout my blog on blogspot, but the code didn’t works on my wordpress blog because they did not support “Iframe” aplication. Did you have any idea how can I block my wordpress blog?

Reply
Miss Devylish

Thanks! The iframe thing worked perfectly in an html text widget I added for my blog on Blogger.. Much appreciated for those of us who are not all designy and stuff. ;)

Reply
Patience

I got the Iframe link on and it looks great, but it won’t let me click anything on my blog now, which means I can’t get into the settings. How am I going to get this back off my blog tomorrow?

Reply
Cliff Huizenga

I hadn’t even thought of that fact when building the block, so I deeply apologize for any inconvenience this may have caused!

The GOOD news is: I updated the code and now there’s a new message relevant to post-blackout day with a “Close Window” link. Now, you can either keep the block up and let users click out of it, or you can remove the code entirely since it no longer blocks your logging into Blogger. I visited your page and the message and functionality have updated.

Thanks for letting me know about this issue! :)

Reply

Leave a Reply