Twitter @anywhere & Web Intents
Nov 10 2011 6:30 AM -- Author: donboulton
Web Intents @donboulton
Web Intents javascript, .css and latest Twitter module changes.
Working to fully incorporate it into Latest Twitter Module. A working example with code is below with the links to all the external .js, Change @donboulton to your twitter name and place login.js and tw-widget.js in your Lastest Twitter module Scripts file.
Tutorial to build the Latest Twitter module for Orchard, is at: http://blog.maartenballiauw.be/post/2011/01/21/Writing-an-Orchard-widget-LatestTwitter.aspx
Latest Twitter - View, the code below:
@using System.Text.RegularExpressions;
@{
var whiteSpace = new Regex(@"\s+");
}
<script type="text/javascript" src="http://platform.twitter.com/anywhere.js?id=aYzX06uRoKJcMbNDGcpCgw&v=1"></script>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script src="~/orchard/Modules/Orchard.jQuery/scripts/tw-widget.js" type="text/javascript"></script>
<script type="text/javascript">
twttr.anywhere(function (T) {
T.bind("authComplete", function (e, user) {
// triggered when auth completed successfully
});
T.bind("signOut", function (e) {
// triggered when user logs out
});
});
</script>
<script type="text/javascript">
twttr.anywhere(function (T) {
T("#tweet").hovercards({ expanded: true });
});
</script>
<text><div class="boxclearleft">
<div class="latest-twitter-follow-link">
<div id="tweet">
<a class="link" href="https://twitter.com/donboulton" title="Don W. Boulton on Twitter"><img align="middle" alt="" class="latest-twitter-avatar" height="24" src="https://si0.twimg.com/profile_images/907166747/Don_W._Boulton_II_mini.png" title="" width="24" /></a>
<a class="twitter-anywhere-user" href="http://twitter.com/donboulton" style="vertical-align: top">donboulton</a></div>
<span id="follow-donboulton"></span></div></text>
<script type="text/javascript">
twttr.anywhere(function (T) {
T('#follow-donboulton').followButton("donboulton");
});
</script>
<ul class="latest-twitter-list" id="tweets">
@foreach (var tweet in Model.Tweets) {
string message = tweet.Message;
<text>
<li>
@if (Model.ShowAvatars) {
<img src="@tweet.Avatar" class="latest-twitter-avatar" height="24" width="24" alt="" />
}
@if (Model.ShowUsername) {
<a href="http://www.twitter.com/@tweet.Username" rel="external">@tweet.Username</a><text>:</text><br/>
}
@foreach (string substring in whiteSpace.Split(message)) {
if(substring == string.Empty) {
continue;
}
if(Model.ShowMentionsAsLinks && substring.StartsWith("@")) {
string username = substring.Replace("@", string.Empty);
<a href="http://www.twitter.com/@username" title="Follow @username on twitter" rel="external">@substring</a>
}
else if(Model.ShowHashtagsAsLinks && substring.StartsWith("#")) {
string hashTag = substring.Replace("#", string.Empty);
string searchUrl = "http://twitter.com/#!/search?q=%23" + hashTag;
<a href="@searchUrl" title="Search for mentions of @substring on twitter" rel="external">@substring</a>
}
else if(substring.StartsWith("http://")) {
<a href="@substring" title="Open link" rel="external">@substring</a>
}
else {
@substring @T(" ");
}
}
@if (Model.ShowTimestamps) {
<br/><span class="latest-twitter-timestamp">
@if (Model.ShowTimestampsAsLinks) {
<a href="http://twitter.com/@tweet.Username/statuses/@tweet.Id">@T(tweet.Timestamp)</a>
}
else {
@T(tweet.Timestamp)
}
</span>
}
</li>
</text>
}
</ul>
<text>
<ul>
<li>
<a href="https://twitter.com/intent/favorite?tweet_id=127885737256431616" data-screen-name="donboulton" title="Favorite"><img alt="Favorite" class="favorite" src="//si0.twimg.com/images/dev/cms/intents/icons/favorite.png" /></a> <a class="link" href="https://twitter.com/intent/favorite?tweet_id=127885737256431616" data-screen-name="donboulton" title="Favorite">Favorite</a><a href="https://twitter.com/intent/tweet?in_reply_to=127885737256431616" data-screen-name="donboulton" title="Reply"><img alt="Reply" class="reply" src="//si0.twimg.com/images/dev/cms/intents/icons/reply.png" /></a> <a class="link" href="https://twitter.com/intent/tweet?in_reply_to=127885737256431616" data-screen-name="donboulton" title="Reply">Reply</a> <a href="http://twitter.com/intent/retweet?tweet_id=127885737256431616" data-screen-name="donboulton" title="Retweet"><img alt="Retweet" class="retweet" src="//si0.twimg.com/images/dev/cms/intents/icons/retweet.png" /></a> <a class="link" href="https://twitter.com/intent/retweet?tweet_id=127885737256431616" data-screen-name="donboulton" title="Retweet">Retweet</a></li>
</ul>
</text>
<div id="tbox"></div>
<script type="text/javascript"> twttr.anywhere(function (T) { T("#tbox").tweetBox({ height: 90, width: 239, }); }); </script>
<div class="log-button" title="Post to Twitter!">
<script type="text/javascript" src="http://www.publiuslogic.com/orchard/Modules/Orchard.jQuery/scripts/twitter-login.js"></script>
<span id="twitter-connect-placeholder"></span>
<script type="text/javascript">
twttr.anywhere(function (T) {
var currentUser,
screenName,
profileImage,
profileImageTag;
if (T.isConnected()) {
currentUser = T.currentUser;
screenName = currentUser.data('screen_name');
profileImage = currentUser.data('profile_image_url');
profileImageTag = "<img src='" + profileImage + "'/>";
$('#twitter-connect-placeholder').append("Logged in as " + profileImageTag + " " + screenName);
} else {
T("#twitter-connect-placeholder").connectButton();
};
});
</script>
</div>
</div>
Tweet Intent, with Google Analytics, working on this script to get it to append the latest tweet with web intents, fully working except for intents div.
Maybe someone could help with this.
There are no posts anywhere on this reguarding anything but .php based sites.
$(document).ready(function(){ $.getJSON('../Contracts/ITweetRetrievalService.cs', function (data) { $.each(data, function(index, item){ $('#tweetintent').append('<div><p>' + item.text.linkify() + '</p></div>' + '<div id="web_intent">' + '<span class="latest-twitter-timestamp">' + relative_time(item.created_at) + '</span>' + '<img src="https://s3.amazonaws.com/mansbooks_images/retweet_mini.png" width="16" height="16" alt="Retweet">' + '<a href="http://twitter.com/intent/retweet?tweet_id=' + item.id_str + '">' + 'Retweet</a>' + '<img src="https://s3.amazonaws.com/mansbooks_images/reply_mini.png" width="16" height="16" alt="Reply">' + '<a href="http://twitter.com/intent/tweet?in_reply_to=' + item.id_str + '">' + 'Reply</a>' + '<img src="https://s3.amazonaws.com/mansbooks_images/favorite_mini.png" width="16" height="16" alt="Favorite">' + '<a href="http://twitter.com/intent/favorite?tweet_id=' + item.id_str + '">' + 'Favorite</a>' + '</div>'); }); String.prototype.linkify = function () { return this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/, function (m) { return m.link(m); }); }; twttr.events.bind('follow', function (event) { var followed_user_id = event.data.user_id; var followed_screen_name = event.data.screen_name; }); twttr.events.bind('favorite', function(event) { var favorited_tweet_id = event.data.tweet_id; }); twttr.events.bind('retweet', function (event) { var retweeted_tweet_id = event.data.source_tweet_id; }); twttr.events.bind('click', function (event) { var click_type = event.region; }); function clickEventToAnalytics(intent_event) { if (intent_event) { var label = intent_event.region; pageTracker._trackEvent('twitter_web_intents', intent_event.type, label); }; } function tweetIntentToAnalytics(intent_event) { if (intent_event) { var label = "tweet"; pageTracker._trackEvent('twitter_web_intents', intent_event.type, label); }; } function favIntentToAnalytics(intent_event) { tweetIntentToAnalytics(intent_event); } function retweetIntentToAnalytics(intent_event) { if (intent_event) { var label = intent_event.data.source_tweet_id; pageTracker._trackEvent('twitter_web_intents', intent_event.type, label); }; } function followIntentToAnalytics(intent_event) { if (intent_event) { var label = intent_event.data.user_id + " (" + intent_event.data.screen_name + ")"; pageTracker._trackEvent('twitter_web_intents', intent_event.type, label); }; } twttr.events.bind('click', clickEventToAnalytics); twttr.events.bind('tweet', tweetIntentToAnalytics); twttr.events.bind('retweet', retweetIntentToAnalytics); twttr.events.bind('favorite', favIntentToAnalytics); twttr.events.bind('follow', followIntentToAnalytics); }); (function () { if (window.__twitterIntentHandler) return; var intentRegex = /twitter\.com(\:\d{2,4})?\/intent\/(\w+)/, windowOptions = 'scrollbars=yes,resizable=yes,toolbar=no,location=yes', width = 550, height = 420, winHeight = screen.height, winWidth = screen.width; function handleIntent(e) { e = e || window.event; var target = e.target || e.srcElement, m, left, top; while (target && target.nodeName.toLowerCase() !== 'a') { target = target.parentNode; } if (target && target.nodeName.toLowerCase() === 'a' && target.href) { m = target.href.match(intentRegex); if (m) { left = Math.round((winWidth / 2) - (width / 2)); top = 0; if (winHeight > height) { top = Math.round((winHeight / 2) - (height / 2)); } window.open(target.href, 'intent', windowOptions + ',width=' + width + ',height=' + height + ',left=' + left + ',top=' + top); e.returnValue = false; e.preventDefault && e.preventDefault(); } } } if (document.addEventListener) { document.addEventListener('click', handleIntent, false); } else if (document.attachEvent) { document.attachEvent('onclick', handleIntent); } window.__twitterIntentHandler = true; } () ); });
Login-out script: external login.js
jQuery(function () { twttr.anywhere(function (T) { if (T.isConnected()) { $("#login-logout").append('<button id="signout" type="button">Sign out of Twitter</button>'); $("#signout").bind("click", function () { twttr.anywhere.signOut(); }); } else { T("#login-logout").connectButton(); } }); });
The .css for Site.css
.reply{width:16px;height:16px;}.reply:hover{width: 16px;height: 16px;background:url('reply_hover.png');background-repeat: no-repeat;}.retweet{width:16px;height:16px;}.retweet:hover{width: 16px;height: 16px;background:url('retweet_hover.png'); background-repeat: no-repeat;}.favorite{width:16px;height:16px;}.favorite:hover, .favorite:on {background:url('favorite_hover.png'); background-repeat:no-repeat;width:16px;height:16px;border:none;}.latest-twitter-avatar{vertical-align: middle !important;border: thin solid #262626;-moz-border-radius: 3px;-webkit-border-radius: 3px;-o-border-radius: 5px;-ms-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 3px;-moz-box-shadow: 1px 1px 3px #000;-webkit-box-shadow: 1px 1px 3px #000;box-shadow: 1px 1px 3px #000;margin: 5px 0 0 10px;text-align: left;}.latest-twitter-list{color:#C0C0C0;}.latest-twitter-timestamp{color:#8B9D53;}.tweet-text{width: 200px;padding: 3px 3px 16px;line-height: 1.3em;color:#C0C0C0;}.latest-twitter-timestamp{padding: 3px 3px 16px;line-height: 1.3em;color:#8B9D53;}
