Skip to content

Instantly share code, notes, and snippets.

@jazzsequence
Last active December 14, 2015 20:28
Show Gist options
  • Save jazzsequence/5144026 to your computer and use it in GitHub Desktop.
Save jazzsequence/5144026 to your computer and use it in GitHub Desktop.
Twitter-based comment system for @dropplets
<div id="comments"></div>
<script src="http://widgets.twimg.com/j/1/widget.js"></script>
<link href="http://widgets.twimg.com/j/1/widget.css" type="text/css" rel="stylesheet">
<script>
new TWTR.Widget({
type: 'search',
search: '<?php echo $post_link ?>',
id: 'comments',
loop: false,
subject: 'Comments',
width: 600,
height: 300,
theme: {
shell: {
background: '#fff',
color: '#404040'
},
tweets: {
background: '#fff',
color: '#404040',
links: '#303030'
}
}
}).render().start();
</script>
<article class="single">
<div class="row">
<div class="one-quarter meta">
<div class="thumbnail">
<img src="<?php echo $post_image ?>" alt="<?php echo $post_title ?>" />
</div>
<ul>
<li>Written by <?php echo $author ?></li>
<li><?php echo $published_date ?></li>
<li>About <?php echo $post_category ?></li>
<li></li>
</ul>
</div>
<div class="three-quarters post">
<?php echo $post ?>
<ul class="actions">
<li><a class="button" href="https://twitter.com/intent/tweet?screen_name=<?php echo $twitter ?>&text=Re:%20<?php echo $post_link ?>%20" data-dnt="true">Comment on Twitter</a></li>
<li><a class="button" href="https://twitter.com/intent/tweet?text=&quot;<?php echo $post_title ?>&quot;%20<?php echo $post_link ?>%20via%20&#64;<?php echo $twitter ?>" data-dnt="true">Share on Twitter</a></li>
<li><a class="button" href="<?php echo $site_url ?>">More Articles</a></li>
</ul>
<?php
/* do twitter comments stuff */
include('comments.php');
?>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>
</article>
/* this line needs to be added to your /template/style.css file to keep
the twitter widget from overlapping on top of the action buttons */
#comments.twtr-widget {
position: static; /* this is for the commenting system */
}
@jazzsequence
Copy link
Author

/template/post.php is largely untouched except for the include line. comments.php goes in the /template directory and handles all the twitter search widget business. Twitter-based comments handled by a search for the URL of the post. It takes a minute to actually load, but it does eventually start loading once the search is complete.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment