Shopify Dashing Twitter Mentions improved

I made some changes to the twitter mentions widget (https://gist.github.com/VanessaHenderson/9aa0823efdfc085f675d) in order to fix an issue with the avatar image and to display the tweet image.

	require 'twitter'
	#### Get your twitter keys & secrets:
	#### https://dev.twitter.com/docs/auth/tokens-devtwittercom
	twitter = Twitter::REST::Client.new do |config|
	config.consumer_key = 'YOUR_CONSUMER_KEY'
	config.consumer_secret = 'YOUR_CONSUMER_SECRET_KEY'
	config.access_token = 'YOUR_ACCESS_TOKEN'
	config.access_token_secret = 'YOUR_ACCESS_TOKEN_SECRET'
	end
	SCHEDULER.every '1m', :first_in => 0 do |job|
	begin
	user = twitter.user
	timeline = twitter.mentions_timeline
	if timeline
	mentions = timeline.map do |tweet|
	media_url = false
	if tweet.media?
	media_url = tweet.media[0].media_url.to_s
	end
	{ name: tweet.user.name, body: tweet.text, avatar: tweet.user.profile_image_url_https.to_s, media: media_url }
	end
	send_event('twitter_mentions', {comments: mentions})
	end
	rescue Twitter::Error
	puts "\e[33mThere was an error with Twitter\e[0m"
	end
	end

view raw twitter.rb hosted with ❤ by GitHub

Tweets are displayed using the "Comments" widgets, following the modifed code.

	<h1 class="title" data-bind="title"></h1>
	<div class="comment-container">
	<h3><img data-bind-src='current_comment.avatar'/><span data-bind='current_comment.name' class="name"></span></h3>
	<p class="comment" data-bind='quote'></p>
	<img id="media" data-showif="current_comment.media" data-bind-src='current_comment.media'/>
	</div>
	<p class="more-info" data-bind="moreinfo"></p>

view raw comments.html hosted with ❤ by GitHub

No changes made to the original coffee script file.

	class Dashing.Comments extends Dashing.Widget
	@accessor 'quote', ->
	"“#{@get('current_comment')?.body}”"
	ready: ->
	@currentIndex = 0
	@commentElem = $(@node).find('.comment-container')
	@nextComment()
	@startCarousel()
	onData: (data) ->
	@currentIndex = 0
	startCarousel: ->
	setInterval(@nextComment, 8000)
	nextComment: =>
	comments = @get('comments')
	if comments
	@commentElem.fadeOut =>
	@currentIndex = (@currentIndex + 1) % comments.length
	@set 'current_comment', comments[@currentIndex]
	@commentElem.fadeIn()

view raw comments.coffee hosted with ❤ by GitHub

Some small changes to the stylesheet.

	// ----------------------------------------------------------------------------
	// Sass declarations
	// ----------------------------------------------------------------------------
	$background-color: #eb9c3c;
	$title-color: rgba(255, 255, 255, 0.7);
	$moreinfo-color: rgba(255, 255, 255, 0.7);
	// ----------------------------------------------------------------------------
	// Widget-comment styles
	// ----------------------------------------------------------------------------
	.widget-comments {
	background-color: $background-color;
	.title {
	color: $title-color;
	margin-bottom: 15px;
	}
	.name {
	padding-left: 5px;
	}
	.comment-container {
	display: none;
	}
	.more-info {
	color: $moreinfo-color;
	}
	#media {
	max-height:145px;
	}
	}

view raw comments.scss hosted with ❤ by GitHub

Finally the code to be included in the .erb file to display the widget.

	<li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
	<div data-id="twitter_mentions" data-view="Comments" style="background-color:#00afd7;" data-moreinfo="Tweets @YoutTweetAccount" ></div>
	<i class="icon-twitter icon-background"></i>
	</li>

view raw dashing.erb hosted with ❤ by GitHub

How it looks: