Adding the VerticalResponse Opt-In Form to Your Blog & Social Network Profile

Alf (our Marcom Director) and I were talking about our amazing opt-in form builder and how we provide a way for users to collect addresses for your email marketing campaigns for free. Pretty cool. But how easy is it to include one of these nifty forms onto your social networking sites? Alf took a stab at discovering all of the ways for you to do it yourself. Alf take it away....

ALF:

How do I build my audience? How do I collect more data about subscribers? Do I have permission to mail them?

As a an email marketer, list building is a time consuming part of what you do. That's why we created our Opt-In Form Builder, making it simple to build a custom form to place on your website, blog, or social network profile and collect the names, email addresses, postal addresses, shoe size, or whatever from your readers.

What? They're not just for websites? I can put a VerticalResponse form on my Facebook or Blogger blog you ask?

Absolutely! Though usually pretty simple, it may not be that obvious how to add your form to one of these pages, so we put together a tutorial of sorts for a bunch of the major web publishing systems and social networks.

But before you can start, you need to build your opt-in form using our Opt-In Form Builder. Just log in to your VerticalResponse account and at the end of the 5 step Opt-In Form Builder Wizard, on the Publish page, we will give you the code to use in the following examples.

Adding Your Opt-In Form to a Blog or Social Network Profile

TypePad

Our Opt-In forms were built with TypePad templates in mind, and are optimized to look awesome out-of-the-box in your TypePad blog sidebar. Just click the big "Add to TypePad" button on the Publish page and you're good to go! If you are using an advanced TypePad template, just copy the code from the Publish page, and paste it into your sidebar.inc file.

Blogger

From the "Template" tab click on "Page Elements" (If you don't see it you will need to convert your blog to the newer Blogger Layouts ). In the section where you would like your VerticalResponse Opt-In form to appear, click on "Add a Page Element". From the pop-up selector, find "HTML/JavaScript" and click "add to blog". Paste your VerticalResponse Opt-In Form code into the text field and click "Save Changes". Your VerticalResponse Opt-In Form is now part of your blog template.

Now Lets make it look good.
Within the VerticalResponse code, find (width: 160px;) and remove it. This will make the width of the form adjust to fit the column width of your blog.

Wordpress.com

Wordpress.com doesn't allow this type of widget :-( which I found surprising, being they're one of the leaders in the blogging space. (BTW, this is only a limitation on Wordpress.com, if you install Wordpress on your own server, you have full control over customization.)  Not to worry, you can still add a link to the hosted version of your VerticalResponse Opt-In Form using Wordpress.com's Text Widget. Here's How:

From your Wordpress.com Dashboard, click the "Presentation" tab. Drag the "Text 1" widget from the "Available Widgets" to the "Sidebar". Click the edit icon and paste the following:

<a href="http://oi.vresp.com?fid={INSERT YOUR FORM ID HERE}">Subscribe to my newsletter</a>

You can find your form ID in the first line of your form's code on the Publish page.

Facebook

Until we build our own Facebook Application, putting your VerticalResponse Opt-In form on Facebook will require that you first install a Facebook application like Profile Box or My HTML so you will have someplace to paste the form code.

Once installed, simply paste the VerticalResponse Opt-In Form code onto the fields they provide and presto! You now have an opt-in form on your Facebook.

LinkedIn

Okay, so this widget doesn’t work on LinkedIn, but using a method I mentioned earlier, you can at least get a link to the hosted version of your VerticalResponse Opt-In Form on your profile. Here's how:

Click on the "My Profile" tab. Scroll down to "Additional Information" and click edit. Under "Websites" Choose "Other..." from the pull down and label it "Click Here: Get My Newsletter", then enter "http://oi.vresp.com?fid={INSERT YOUR FORM ID HERE}" in the URL box. You can find your form ID in the first line of your form's code on the Publish page in VerticalResponse. That's it, you now have a link to your opt-in form on your LinkedIn profile.

Tumblr

From your Dashboard, Select "Theme" from the "Account" pull down. Paste the VerticalResponse Opt-In Form code in the box labeled "Description (or HTML and widgets)" and you're done. Tip: This looks best when you are using a theme with columns.

Vox

Select "Design" from the My Vox pull down.  Click on “Customize your sidebars”, then click "configure" next to the "Embed" widget. Paste your VerticalResponse Opt-In Form code in the pop-up window.

Now lets make it look good.
To make the form fit nicely within your VOX template, we need to make 2 small changes to the code. First, add an additional <div> around the form to give it more height like this:

<div style="height:250px;">
<!--the VerticalResponse form code here-->
</div>.

Second, find (width: 160px;) within the code and remove it. This will make the width of the form adjust to fit the column.

LiveJournal

From the "Customize Journal" page, click "Customize your theme". Here you will see a sub section labeled "Sidebars", click it. Scroll down to "Ordering". Next to "Seventh item in sidebar" select "Custom Text". Then, scroll down to "Custom" and paste the VerticalResponse Opt-In Form code into the text box and click "Save Changes".

Now Lets make it look good.
For some pesky reason, LiveJournal adds extra spacing to the the form so we need to edit some of the code to tighten it back up.

Find all instances of the following within the VerticalResponse code and remove it:

• <br/>
• width: 160px;
• margin-bottom: 10px;
• margin-top: 5px;
• margin-bottom: 5px;

This will make the form adjust to fit the column and tighten up the line spacing.

MySpace

MySpace doesn't allow the use of JavaScript, so be sure you use the redirect version of the Opt-In Form, NOT the pop-up version.

So far this implementation was the most confusing of all. MySpace offers a multitude of ways to uglify your page by tweaking colors and adding seizure-inducing patterned backgrounds, but doesn't have an elegant way to add a widget like the VerticalResponse Opt-In Form. Basically, you have 2 options depending on which column you want your form in. Here's how:

From the "Edit Profile" page, paste the VerticalResponse form code into the "About Me" section for placement in the Right column, or for the left column, paste it into one of the "Interest" sections. None of which make much sense for a Newsletter subscription form, but hey doesn't make much sense why MySpace is so popular either.

One more caveat, due to a lot of unscrupulousness going on on MySpace they throw up a warning on submission of the web form (see example on right). So a more elegant way to drive opt-ins on MySpace may just be a link to the the hosted version of your VerticalResponse Opt-In Form.

------

So there you have it, a few more places you could be building your list. Pretty much anyplace you can paste a snippet of HTML code could be a list building opportunity for you.

Comments

[Kathy Lovin @ The Vineyard Express Albuquerque NM]

Thank you for the help with opt-in, especially for LinkedIn.

[Pali Madra]

A great article and very helpful to bloggers like me. Thanks.

[Gordon Deighton (Planetnoosa)]

hey guys thanks for the info about placing opt in forms on social sites i found it very usefull, and yeah i expected that myspace would be a problem as i run a myspace page and it drives me nuts!!