How to Embed Rafflecopter in a WordPress.com Hosted Site

Are you like me and get frustrated with some of the code limitations of a WordPress.com hosted site?

Sometimes I feel like I have this brilliant idea and then it comes to a screeching halt. When I run head first into these invisible walls that are WordPress.com’s limitations, I can’t help but think, “Gosh… I wish I had chosen self-hosted instead!” 

I have slowly been finding some workarounds for some of the limitations. Certainly not all of them. Ain’t nobody got time for that! This is how I worked-around the no javascript limitation to embed a Rafflecopter javascript widget into a post. This post starts off a little techy so be patient. Once I get to the step-by-step tutorial, you will see it really isn’t as hard as it sounds.

My A Crafter’s Dream Group Giveaway post is an example of how the Rafflecopter widget will look on your site. This Rafflecopter is inactive, so I have another example at the bottom of this post that is live.

How I Discovered the Workaround

Firstly, I did not figure this out on my own. I have some experience with html and building websites. When diving into WordPress’s limitations and thinking about how to find a loophole, I first looked at what they do allow and started Googling to find my answer.

WordPress.com hosted sites are allowed to embed flash through use of the Gigya shortcode. What the heck is Gigya? Well, I didn’t know anything about Gigya either, but I had found some sites (like WordPress tips) talking about embedding flash videos. I had found Gigya while researching how to insert Picasa Slide Shows, which are also flash codes. (I’ll post how to do this at a later time.) Gigya is simply a shorter version of code to embed Flash code (like videos and slide shows).

OK, my next question was, “can I convert javascript to flash?” The answer is NO.

Well, I wasn’t going to let that stop me. My next jump in logic was to determine if I can embed iframes in WordPress.com. What’s an iframe? An iframe is simply an embedded website. If you have two independent websites, with iframes you can actually embed the first website into the second site. Think of it like a picture frame hanging on a wall. The first site is within the frame, while the second site is outside of the frame. Caphiche?

So could I embed another page into a WordPress post? The short answer was NO again. HOWEVER, this is how I found Netty Gritty’s How to Embed iframe Widgets in a WordPress.com Blog. This tutorial goes over how to convert iframe widgets to flash using a third party app intended for a completely different purpose. Then you can use the Gigya code to embed the flash code into a WordPress.com blog post. Unfortunately, Netty Gritty’s site is no longer maintained, so I was unable to thank them.

This was the answer I was looking for! Now… Rafflecopter isn’t an iframe widget per se. My original thought was to embed the Rafflecopter widget in another website that does allow javascript, then create an iframe, then convert the iframe to flash and then to Gigya using Netty Gritty’s tutorial.

I know, this sounds like a really long process, but it is actually pretty simple once you dive into it. What I found along the way is that Rafflecopter is in fact an iframe widget, so I was able to simplify my original plan. Here are the steps I used to embed the Rafflecopter into my post.

How to Embed Rafflecopter in a WordPress.com Hosted Site

In this tutorial we are going to break the Rafflecopter widget down into an iframe widget, then convert the iframe widget to a flash widget by using Netty Gritty’s How to Embed iframe Widgets in a WordPress.com Blog tutorial.

Make your Rafflecopter widget

Go through the steps to make your Rafflecopter widget. If you have never used Rafflecopter before, here is a Rafflecopter Tutorial by Tutus & Teaparties. When you get to the point where you are ready to embed the widget, stop and proceed with the next step below.

Go to your Rafflecopter Widget page

Step 1) On the “Embed’ tab, copy the widget code to your clipboard.

Step 2) Open a new tab/window and paste your code into your browser navigation bar, but don’t hit enter.

Step 3) Delete all the javascript BS {that’s right! I said it! BS!!! }. I have struck through the part of the code you want to delete below:

<a id="rc-202d0c3" class="rafl" href="http://www.rafflecopter.com/rafl/display/202d0c3/" rel="nofollow">a Rafflecopter giveaway</a>
<script src="//d12vno17mo87cx.cloudfront.net/embed/rafl/cptr.js"></script>

Step 4) Now hit enter. Your page should now look like this:

Find your Rafflecopter Widget iframe source address

I am using Google Chrome Browser, so this will look different in Firefox, Explorer, Safari, etc. OR it may not even be possible in another browser. I don’t know other browsers, so don’t even ask me how to do this step in another browser. To make this easier, just use Chrome (it is a superior browser anyways!).

Step 1) Right-click within your Rafflecopter frame, like so:

Step 2) And select “Inspect Element.” Again, this is going to be different in other browsers or you may not even be able to use this function.

Step 3) Find the iframe http source address in the bottom left frame. Depending on where you clicked, you may need to scroll up or down (most likely up). It’s going to say something like this:

<iframe name= blah blah blah... src="http:// blah blah blah>

While hovering over the code in the element inspection box, it will highlight the element you are looking at. Once you find the source code, it will highlight the whole widget frame, like so:

Step 4) Copy the source address. You should be able to right-click on the address source and say “Copy Link Address” as above. You want the http:// address that is within the iframe brakets.

Step 5) Paste the link address into your browser address bar and hit enter. This is how your widget should now look:

See how it stripped out all the extraneous information and now JUST shows your widget? This is how you want it to look when it is embedded into your post.

Shrink this url down with bitly or similar tool

Use bitly or a similar site to shrink down the Rafflecopter source address that you just copied. This tutorial WILL NOT WORK unless you do this step.

Create a Tagul account and Create a new Tag Cloud

This is the step where we start following Netty Gritty’s How to Embed iframe Widgets in a WordPress.com Blog tutorial. Netty’s tutorial goes over more of the steps on setting up the Tagul tag cloud.

Once you sign up with Tagul and click on “Start a New Cloud,” it will look like this:

In the “Get Tags from Text” tab, fill in the “Tags Source” section like so:

Click the clear button to remove the example text. Write what the widget will initially say in the first text box. I wrote “Click~here~to~reveal Rafflecopter.”

You can use ~ between words to keep the words together as a single tag. For instance, I wrote “Click~here~to~reveal” in order to keep these words together. If I didn’t, it would have randomized the order of these words and it would not make sense.

You want to put your bitly shortened url for the “Tag’s link pattern” (red arrow is pointing to it above).

Click Visualize to see what the text will look like. You can adjust fonts, colors and shape of the cloud tag with the other sections of the widget creator. Once you are satisfied, click the “Save Changes” button. Netty’s tutorial walks through these steps in more detail.

Embed the Tagul Tag Cloud in a WordPress.com Hosted Site

Step 1) Grab the code by clicking the “Grab and Share!” tab, then the “Send link to a friend” tab and finally the “copy the clipboard” button. The arrow is pointing to the link you need:

Step 2) Grab the numbers in the link by deleting the portions of the link I have struck through below:

http://tagul.com/preview?id=125888@4&name=Example%20Rafflecopter 

All you are looking for is the number@number.

Step 3) Take your number@number similar to the one above and put it into the below code:

[gigya src="http://cdn.tagul.com/cloud.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="500" height="575" flashvars="id=number@number"]

This is the code you want to copy and paste into your WordPress.com hosted post. You can adjust the width and height with the values you want the widget to be. I used a width of 500 and height of 575. I like to also center the code so that the widget is centered in my post. See below example to see how it looks with this setting.

You can put this code directly into the “visual” tab of your post editor. No need to even switch to “text” and mess with html code. The Gigya code will not display anything in the visual editor, so click the preview button to see it work.

Example Rafflecopter Widget

Here is how my widget looks. Go ahead and take it for a test spin!

Now that wasn’t too hard, was it?

Unfortunately, it isn’t a perfect embed. Your participants have to click on the text to reveal the iframe widget. It is better than nothing at all or having them click a link to another page.

What do you think? I bet you blogspot bloggers or self-hosted wordpressers are happy you aren’t hosted by WordPress.com!

Happy blogging!

Related Articles

Enjoyed this post? Check out some of my other posts:

How to add a Social Buttons Widget (Part 1) How to add a Social Buttons Widget (Part 2) What’s in a name? I think I might have lied… Upgrading My Photography with a DIY Light Box

InLinkz.com

Follow me!

Don’t forget to follow me to avoid missing upcoming articles! You can follow me via email in the widget on the right or follow me via bloglovin’, facebook, google+, pinterest, twitter or rss feed.

Linking to:

Creatively Tuesday | Fun in Functional | Live Laugh {Linky} | Talkin’ About Thursday | Sharing with Domestic Superhero | What to do Weekends | Freedom Fridays | Pin Me | Saturday Nite Special | Sweet Saturday | Create & Inspire | Make the Scene Monday

About these ads