Today I’m going to tell you how to ask your visitors to share your content on social media without any costs. Everyone knows that Twitter plays a important role in the thousands of different social media marketing strategies run by companies worldwide. Report says 175 million tweets every single day.
So Sharing content via twitter is a great way to boost or sell your business online: exposure, a exchange of ideas and information. It will pull traffic to your site & also it will increase your followers
In this post, I’m explaining how to create a <ins>Simple Tweet to Unlock Content</ins> using jQuery & Twitter API. This cool script will allows visitors to share your content or message to their followers & after successful sharing, you can share your private content to users.
Contents
Step 1
Include the following twitter script in your page template, ideally at the end, before the </body>
tag.
<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
Step 2
Web Intents – https://dev.twitter.com/web/intents provide popup-optimized flows for working with Tweets & Twitter Users: Tweet, Reply, Retweet, Favorite, and Follow. They make it possible for users to interact with Twitter content in the context of your site, without leaving the page or having to authorize a new app just for the interaction. Web intents are mobile friendly, and super easy to implement.
If you’re integrating your site with Twitter using Web Intents or Twitter for Websites widgets, Web Intent Events provide an easy way to integrate feedback in your application, and respond to user interaction with intents.
Below tweet event will be triggered when the user publishes a Tweet (either new, or a reply) through the Tweet Web Intent.
Other web intents are follow, retweet, favorite & click.
<script>
twttr.events.bind(
'tweet',
function (event) {
//You can show the private content via ajax here...
}
);
</script>
Step 3
Place this HTML code wherever you want in the page. There are so many ways to add the Tweet Button to your website. Please check this site – https://dev.twitter.com/web/tweet-button
<a class="twitter-share-button" href="https://twitter.com/share"
data-via="itzurkarthi" data-text="W3lessons Programming Blog - PHP, Jquery, HTML5, CSS3, AJAX, Facebook & Codeigniter Tutorials" data-size="medium" data-url="http://w3lessons.info" data-count="vertical">
Tweet
</a>
Don’t forget to change the data-via attribute to your own Twitter user & data-url attribute to your own site url & finally the data-text attribute, text to be shared.
I hope you like this tutorial. Please feel free to download it & let me know If you need any help
View Live Demo & Download
It is good, but it has problem. I can to unlocked within make a tweet. I clicked in tweet´s button and i see the content. It will be 100% ok if i click in tweet´s button and i can not see the content.
Great Post & found it very useful 🙂
Good Job Karthikeyan