swap a div to an embed form when user tweets using the @anywhere function box
- by Jeff
I'm using the @anywhere twitter function on the front page of my site (vocabbomb.com) and right now it works great to allow users to tweet straight away. Problem is, when they click tweet, it just reloads the twitter box, empty. I want it to load something new, like a "thank you, now fill in this email form" and show a mailchimp form.
Ok so this is the @anywhere code currently working fine:
<div id="tbox"></div>
<script type="text/javascript">
twttr.anywhere(function (T) {
T("#tbox").tweetBox({
height: 100,
width: 400,
defaultContent: " #vocabbomb",
label: "Use the word foo in a tweet:",
});
});
</script>
So this is fine, and when the user writes a tweet, it just re-displays the twitter box.
I understand there is a function that lets you specify stuff after the tweet is made:
(example from http://dev.twitter.com/pages/anywhere_tweetbox)
<div id="example-ontweet"></div>
<script type="text/javascript">
twttr.anywhere(function (T) {
T("#example-ontweet").tweetBox({
onTweet : function(plaintext, html) {
console.log(plaintext);
alert(html);
}
});
});
</script>
Is this the best way to attempt this? Or do I need a function or something that changes what's in the div to something else?
I want the mailchimp email form to show up after the tweet. It includes a ton of script and tags and starts like this:
<!-- Begin MailChimp Signup Form -->
<!--[if IE]>
<style type="text/css" media="screen">
#mc_embed_signup fieldset {position: relative;}
#mc_embed_signup legend {position: absolute; top: -1em; left: .2em;}
</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css" media="screen">
.mc-field-group {overflow:visible;}
</style>
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://downloads.mailchimp.com/js/jquery.validate.js"></script>
<script type="text/javascript" src="http://downloads.mailchimp.com/js/jquery.form.js"></script>
<div id="mc_embed_signup">
<form action="http://faresharenyc.us1.list-manage.com/subscribe/post?u=106b58b4751a007d826715754&id=2fe6ba4e6a" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" style="font: normal 100% Arial, sans-serif;font-size: 10px;">
...
So my attempt to just require it inside the function didn't work at all:
<div id="tbox"></div>
<script type="text/javascript">
twttr.anywhere(function (T) {
T("#tbox").tweetBox({
height: 100,
width: 400,
defaultContent: " #vocabbomb",
label: "Use the word foo in a tweet:",
onTweet: function(plain, html){
<?php require_once('mailchimp.html'); ?>
}
});
});
</script>
Nettuts had a brief discussion here: http://net.tutsplus.com/tutorials/javascript-ajax/using-twitters-anywhere-service-in-6-steps/
I am seeing now that the 'onTweet' function simply adds some text above the twitter box, but doesn't actually replace the entire twitter box. How do I do that? Is it possible?
Thanks!
