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.

After setup, you should see these setting for your Twitter App

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.

Login to Zesty > Styles & settings > General Site Settings > Twitter

Step 3: Create an Ajax file in the Code Editor

Create an HTML AJAX file in Zesty’s 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.

A look at the Twitter HTML AJAX file created in Zesty’s Code Editor

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!