Use Twitter for Blog Comments
A quick tutorial on how to use Twitter to let people comment on your Blog built on Zesty
I’m not in love with Disqus, but I’m a huge fan of Twitter. So why not use Twitter for comments? We did just that, and it worked great! The downfall was twitter only lets you search with their API within the last week. We are looking to store reference to the tweet ID to overcome (and curate) social feeds. More on that soon, onto the tutorial.
Step 1: Setup a Twitter App for your Domain
Head over to https://dev.twitter.com/apps/new and create an application your for your domain. You will need a read only app (read/write will work the same). When you are complete with the setup form on Twitter you will want to create an Access Token.
Step 2: Add your Auth and Token information in Zesty
Log into your Zesty Website (don’t have an account? Tweet me and I’ll set you up with a couple months free). Open up on Styles & Settings, click on General Site Settings. On this view you will see Twitter as a setting option in the left Nav. Click the Twitter link and copy your Consumer Key, Consumer secret, Access Token, and Access Token Secret into the respective fields in Zesty. Save.
Step 3: Create an Ajax file in the Code Editor
Click the code editor Tab. On the left side under PARSLEY FILES, there is a grey cog (gear). Click that gear to reveal 3 create options. You want to select HTML AJAX. Name that file twitter-comments.
In that File paste the code provide here, you can later modify the markup HTML code for your layout/design needs. Note you will want to swap out the @RandyApuzzo with the twitter handle you are using to receive comments.
<ul class=”comments”> {{each api.twitter.hashtag({get_var.hash},40) as tweet}} <li style=”border-left-color: #{{tweet.profile_link_color}}” > <img src=”{{tweet.profile_image_url}}” /> <p><strong>{{tweet.name}}</strong>: {{tweet.text.replace(#{get_var.hash}|@RandyApuzzo|http(.+?)\s,’’)}}</p> <em>{{tweet.created_at}}</em> </li> {{end-each}}
</ul>
Step 4: Create Comment/Tweet Button on your Blog Article Page
Locate your Blog Article view in the Code Editor under Parsley Files. My view file was called “Article”, yours maybe blog-article, simple-blog-article, or whatever you renamed it to. Somewhere on that view (likely below the content) you will need to create a tweet/comment button. Here is the code:
<a class=”share-button custom-popup-button” href=”https://twitter.com/intent/tweet?hashtags=rda{{thispage.zid}}&url={{api.tinyurl.shorten(http://{site.domain.encodeurl()}{thispage.getUrl()})}}&screen_name=randyapuzzo” target=”_blank” rel=”nofollow” data-related=”randyapuzzo”><span class=”icon-comments”></span> Comment via Twitter</a>
In that block code, there are three parts in bold you will need to switch. Switch out the data-related=”randyapuzzo” and screen_name=randyapuzzo with the twitter handle you are using to receive the comments. Also switch out the rda with three unique letters for your website. This is the hashtag that is used to search against.
Step 5: Load the comments
In that same article view, you will want to add two lines of code. The first is a div to load the comments into. Code:
<div id=”comments”> loading comments… </div>
The next line is the load script using JQuery which calls out to the Ajax HTML file we created in Step 3. Put this code at the bottom of your view file:
<script type=”text/javascript”> $( function() { $(‘comments’).load(‘/ajax/twitter-comments/?hash=rda{{thispage.zid}}’); });
</script>
One change is needed to the above code. Change the three letter acroynym in bold (rda) with one you used in the step above.
Step 6: Make the Comment/Tweet Button pop-out with JavaScript & LESS Styling
In the Code Editor under Javascript (left panel file list) located main.js. In main.js write this JQuery code:
$(function(){
$(‘.custom-popup-button’).click(function() { var width = 575, height = 400, left = ($(window.innerWidth) — width) / 2, top = ($(window.innerHeight) — height) / 2, url = this.href, opts = ‘status=1' + ‘,width=’ + width + ‘,height=’ + height + ‘,top=’ + top + ‘,left=’ + left;
window.open(url, ‘twitter’, opts);
return false; });
});
That code will target the button you created in step 4 and make a simple pop-up window for the commenter to enter their tweet in. This step can be skipped, but it adds a nice touch. Here are the styles I use on my www.randyapuzzo.com blog:
.comments{ li { list-style: none; background: #fff; padding: 20px; min-height: 48px; position: relative; clear:both; margin-bottom: 10px; border-left: 3px solid #ccc; em { color: #c7c7c7; position: absolute; top: 6px; right: 8px; font-size: 11px; } img { float: left; margin-right: 20px; } }
}
Test it!
Publish your file changes with the Publish All button in the top right corner of the Code Editor. Then visit your set and write a test comment.
If you have any trouble tweet me @RandyApuzzo
If you haven’t tried Zesty out yet, check it out at http://gozesty.com you can use it all you like without paying up until you send your website live. Have fun!
