Make a div appear when someone clicks follow


#1

I have added this follow me code to my website:

https://about.twitter.com/resources/buttons

…and what I am trying to do is verify on my website that someone has subscribed to me.

So, I can give them a reward if they subscribe.

I have tried (all day yesterday) to implement an onclick JS or CSS show/hide, so that if someone clicks my twitter follow me button, a div will appear and I can make a message saying: “Thank you for following me, click here for your reward”.

But no matter what I do, or how I do it, I can’t get anything to work. I think the twitter script under the link is hicjacking any javascript functionaliy.

I tried reading through the twitter documentation:

https://dev.twitter.com/docs/intents/events

…but it’s over my head to comprehend it all (as much as I tried). I only know how to do basic things with javasctipt.

Here is what I am trying to do.

<a href="https://twitter.com/twitter" class="twitter-follow-button" data-show-count="false">Follow @twitter</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

<div id="thanks" style="display: none;">
Thank you for following me, click here for your reward
</div>

Now, ordinarily I would just put an onclick in the href, and make the div aappear, ie:

<script type="text/javascript">
function showDiv()
{
document.getElementById("divID").style.display="inline";
}
</script>
 
<a href="#" onclick="showDiv();">Text Here</a><br />
<div id="divID" style="display:none;">
<!-- Stuff inside div here -->
</div>

But it wont work - no matter where I try to put the onclick="showDiv(); - in the twitter code above.

Can anyone show me how to activate that div “thanks” id, so if someone clicks follow, they will get the thank you message?

Thanks in advance for any help. I spent aall day yesterday on this, and I didn’t get anywhere.


#2

Since Twitter’s javascript handles the click actions on the Follow Button, you can’t override them with typical techniques.

Instead, you need to create a piece of code that will be executed when the Follow Button completes a desired action. You do this by telling the Follow Button code the funciton to call when that event happens.

This code should execute your desired code when the follow event is completed (which is slightly different than when clicked)

twttr.events.bind('follow', function (event) { showDiv(); });

function function showDiv()
{
document.getElementById(“divID”).style.display=“inline”;
}


#3

PJAX.fetch(’/summaries?since_id=1234’, function (arrayOfSummaryElements) {
twttr.widgets.load(arrayOfSummaryElements);
arrayOfSummaryElements.forEach(function (el) {
document.body.appendChild(el);
}
});


#4

#5