Umbraco V5 Example - Twitter Feed

TwitterFeed.cshtml

@inherits PartialViewMacroPage
@using Umbraco.Cms.Web
@using Umbraco.Cms.Web.Macros
@using Umbraco.Framework

@{   
    
    @* Macro Param: Twitter Username that defaults to umbraco if empty *@
    var twitterUsername = String.IsNullOrEmpty(Model.MacroParameters.twitterUsername) ? "umbracoproject" : Model.MacroParameters.twitterUsername;

    @* Macro Param: Include Retweets? Defaults to false *@
    var includeRTs = String.IsNullOrEmpty(Model.MacroParameters.includeRTs) ? false : Model.MacroParameters.includeRTs;

    @* Macro Param: Excludie Replies? Defaults to false *@
    var excludeReplies = String.IsNullOrEmpty(Model.MacroParameters.excludeReplies) ? false : Model.MacroParameters.excludeReplies;

    @* Macro Param: Number of tweets to display. Defaults to 1 *@
    var noTweets = String.IsNullOrEmpty(Model.MacroParameters.noTweets) | Convert.ToInt32(Model.MacroParameters.noTweets) == 0 ? 1 : Model.MacroParameters.noTweets;

    @* Twitter JSON URL *@
    var twitterURL = string.Format(
            "https://api.twitter.com/1/statuses/user_timeline.json?screen_name={0}&include_rts={1}&exclude_replies={2}&include_entities=1&count={3}",
            twitterUsername,
            includeRTs,
            excludeReplies,
            noTweets);                
            
}

@* Fetch the JSON from Twitters API *@
@using (var client = new System.Net.WebClient())
{
    @* Fetch the JSON from Twitter *@
    var response = client.DownloadString(new Uri(twitterURL));

    @* Decode the JSON so we can interate over it *@
    var tweets = Json.Decode(response);

    <h2>MACRO PARAM = @Model.MacroParameters.noTweets</h2>
    
    <ul>    
        @foreach (var tweet in tweets)
        {
            <li>
                @* Tweet with formatted links *@
                <h3>@formatLinks(tweet.text, tweet.entities)</h3>

                <p>
                    @* Format Tweet Date and ouput as 24/03/12 @14:05 *@
                    <em>@formatDate(tweet.created_at).ToString("dd/MM/yy @ HH:mm")</em>
                </p>

                <p>
                    @* Profile Image *@
                    <img src="@tweet.user.profile_image_url" alt="@tweet.user.Name" />
                
                    @* Your real name (not profile name) *@
                    <strong>@tweet.user.name</strong>
                </p>

                @* Google Map (if tweet has geo info) *@
                @if (tweet.geo != null)
                {
                    @Html.Raw(displayMap(tweet.geo));
                }                

                @* Dislay Image (if tweet has image attached *@
                @if (tweet.entities.media != null)
                {
                    <a href="@tweet.entities.media[0].media_url" target="_blank">
                        <img src="@tweet.entities.media[0].media_url:thumb" />
                    </a>
                }
            </li>
        }
    </ul>
}

@functions
{
    DateTime formatDate(string twitterDate)
    {
        //Example tweet date
        //Fri Mar 02 16:09:35 +0000 2012
        //ddd MMM dd HH:mm:ss zz00 yyyy
        DateTime tweetDate = DateTime.ParseExact(twitterDate, "ddd MMM dd HH:mm:ss zz00 yyyy", null);

        return tweetDate;
    }

    String displayMap(dynamic geo)
    {
        //Get the lat & long values
        var tweetLat    = geo.coordinates[0];
        var tweetLong   = geo.coordinates[1];

        //Format the string to return the image
        var googleMap   = string.Format("http://maps.googleapis.com/maps/api/staticmap?center={0},{1}&zoom=14&size=250x250&maptype=roadmap&sensor=false&markers={0}, {1}", tweetLat, tweetLong);
        var mapImage    = string.Format("<img src='{0}' alt='map' />", googleMap);

        return mapImage;
    }

    IHtmlString formatLinks(string tweet, dynamic entities)
    {
        //A List of tweet entities so we can sort all of them
        IList<tweetEntity> tweetEntities = new List<tweetEntity>();

        //Get URLs
        var links = entities.urls;

        //Check we have links to loop over
        if (links != null)
        {
            //For each link in the collection of links
            foreach (var link in links)
            {
                var startPosition   = link.indices[0];
                var endPosition     = link.indices[1];
                var length          = endPosition - startPosition;
                
                var url             = link.url;         //The short t.co link
                var displayURL      = link.display_url; //A friendly version of the full link (may be truncated)

                var newText = string.Format("<a href='{0}' target='_blank'>{1}</a>", url, displayURL);
                var oldText = tweet.Substring(startPosition, length);
                

                //Create a new entity
                tweetEntity entity      = new tweetEntity();
                entity.startPosition    = startPosition;
                entity.endPosition      = endPosition;
                entity.newText          = newText;
                entity.oldText          = oldText;

                //Add it to the collection
                tweetEntities.Add(entity);
            }
        }


        //Get user mentions (@umbraco)
        var mentions = entities.user_mentions;

        //Check we have mentions to loop over
        if (mentions != null)
        {
            //For each mention in the collection of mentions
            foreach (var mention in mentions)
            {
                var startPosition   = mention.indices[0];
                var endPosition     = mention.indices[1];
                var length          = endPosition - startPosition;
                
                var username        = mention.screen_name;

                var newText = string.Format("<a href='http://twitter.com/{0}' target='_blank'>@{0}</a>", username);
                var oldText = tweet.Substring(startPosition, length);

                //Create a new entity
                tweetEntity entity      = new tweetEntity();
                entity.startPosition    = startPosition;
                entity.endPosition      = endPosition;
                entity.newText          = newText;
                entity.oldText          = oldText;

                //Add to collection
                tweetEntities.Add(entity);
            }
        }

        //Get hashtags
        var hashtags = entities.hashtags;

        //Check we have hash to loop over
        if (hashtags != null)
        {
            foreach (var hash in hashtags)
            {
                var startPosition   = hash.indices[0];
                var endPosition     = hash.indices[1];
                var length          = endPosition - startPosition;
                var hashtag         = hash.text;

                var newText         = string.Format("<a href='http://twitter.com/search/%23{0}' target='_blank'>#{0}</a>", hashtag);
                var oldText         = tweet.Substring(startPosition, length);

                //Create a new entity
                tweetEntity entity      = new tweetEntity();
                entity.startPosition    = startPosition;
                entity.endPosition      = endPosition;
                entity.newText          = newText;
                entity.oldText          = oldText;

                //Add to collection
                tweetEntities.Add(entity);
            }
        }

        //For each item in the tweet entities in reverse order
        //If we update the string in reverse order the remaining start/end indexs will still be correct
        foreach (var item in tweetEntities.OrderByDescending(x => x.startPosition))
        {
            //Lets update the tweet text
            tweet = tweet.Replace(item.oldText, item.newText);
        }

        
        //Return the new tweet with all the links added in
        return Html.Raw(tweet);
    }
    
    public class tweetEntity
    {
        public int startPosition    { get; set; }
        public int endPosition      { get; set; }
        public string oldText       { get; set; }
        public string newText       { get; set; }
    }
}

First, I apolgize for possibly a stupid question - but, how do I get this to work in Umbraco 5? I've created the Partial View, Macro Partial with a Macro, and I still can't get this to show up. I would like the ability for the user to select "Insert Macro" on the content editing page, and selecting this.

Thanks.

Chad

@cbeckner12 Hi I have been testing this macro by inserting the macro into the template, by using the insert macro button on the template editor.
However if you want this to be available to be inserted in the Rich Text Editor, you will need to do the following.

• Goto the Developer Section
• Open the Macro you created inside the Macros folder
• Tick the box marked 'Use In Editor'
• Optionally tick the box marked 'Render Content in editor' if you want the twitter results to be shown in the rich text editor (but I see no benefit personally)
• Save the changes to the macro
• Goto the Content section
• Open a node with a Rich Text Editor on that you want to insert the twitter macro into
• Click the orange button to insert a macro
• Choose the twitter macro from the dropdown
• Fill out the macro parameters, such as twitter username, number of tweets etc
• Click OK
• Save and publish the node & VOILA !

@warrenbuckley Suggest changing the fall-back username from "umbraco" to "umbracoproject". Better to keep as project-related rather than Niels own account?

@leekelleher all done :)

Ace. Was looking for other improvements/suggestions, but all looks great to me!

I apologize, but I am very new to Umbraco, and don't seem to be able to find documentation on how to do all this... Is there a step-by-step guide on how to do this - I can't even get the Macro to show it under the PartialView dropdown in the Macros section. Is there a "How to use Partial Views/Macro Partial Views/Macros" somewhere for v5?

@cbeckner12 the best way to create a partial macro is to do the following inside Umbraco:

• Goto the Developer Section
• Right click on Macro Partials and click Create
• Give your partial a name
• Ensure the box marked 'Create a matching macro?' is also checked

This will automatically create the macro at the same time for you.
If you still have problems contact me warren at umbraco com

Is the "Populate" button supposed to work when I do this? I'm using the code from https://gist.github.com/1718185, and I have created the Partial Macro with the accompanying Macro, but I still can't get it to show up in the RTE when I try to insert it. Thoughts (and thanks!)