Tag Archives: twitter developer

Create custom HtmlHelper to Render different type of Twitter Card

In this day, all the social media site is very important, I have task need implement the Twitter Cards into all the existing projects.

Render partial View is fine, but since just need same meta data, so I just create a custom HtmlHelpler, I put my works here, anyone think that helpful, could plug into your site.

public static class TwitterCardHelper
    {
        //this is the base method
        public static MvcHtmlString TwitterCard(this HtmlHelper html, string cardType, string title, string description, string image = null, object listAttributes = null,object productAttributes = null)
        {           
            
            var format = @"<meta name=""twitter:{0}"" content=""{1}"" />";
            var sb = new StringBuilder();
            var config = ProjectConfigurationSection.GetConfig();
            sb.AppendFormat(format, "card", html.Encode(cardType));
            sb.AppendFormat(format, "site", config.ProjectEnvironment == ProjectEnvironment.Production ? config.ProjectDisplayName : String.Format("{0} ({1})", config.ProjectDisplayName, config.ProjectEnvironment.GetDescription()));
            sb.AppendFormat(format, "title", html.Encode(title));
            sb.AppendFormat(format, "description", html.Encode(description));
            if (cardType == "summary" || cardType == "summary_large_image")
            { 
                sb.AppendFormat(format, "image", UriExtensions.Parse(image).AbsoluteUri);
            }

            if(listAttributes !=null)
            {
                 sb.Append(GetHtmlAttributes(listAttributes));
            } 

            return MvcHtmlString.Create(sb.ToString());
        }

        //below is several overloads method for your to choose different type of TwitterCard 
        public static MvcHtmlString TwitterSummaryCard(this HtmlHelper html, string title, string description, string image = null)
        {
            return TwitterCard(html, "summary", title, description, image);
        }

        public static MvcHtmlString TwitterSummaryCardWithLargeImage(this HtmlHelper html, string title, string description, string image = null)
        {

            return TwitterCard(html, "summary_large_image", title, description, image);
        }


        //listAttributes sample:
        //    new{
        //         iphoneName ="iphoneName",
        //         iphoneId="iphoneId",
        //         iphoneUrl="iphoneUrl",
        //         ipadName = "ipadName",
        //             ipadId="ipadId",
        //         ipadUrl="ipadUrl",
        //         googleplayName="googleplayName",
        //         googleplayId="googleplayId",
        //         googleplayUrl="googleplayUrl"
        //      }
        public static MvcHtmlString TwitterAppCard(this HtmlHelper html,string title,string description,object listAttribute)
        {
            return TwitterCard(html, "app", title, description, null, listAttribute);
        }

        
      //below two member is to render anonymous type of object to string
        private static string GetHtmlAttributes(object listAttributes)
        {
           
             var format = @"<meta name=""twitter:app:{0}:{1}"" content=""{2}"" />";
            var sb = new StringBuilder();

            if (listAttributes != null)
            {
                var attributes = HtmlHelper.AnonymousObjectToHtmlAttributes(listAttributes);
                foreach (var item in attributes)
                {
                   
                    if (item.Key == "iphoneName") sb.AppendFormat(format, "name", "iphone", item.Value);
                    if (item.Key == "iphoneId") sb.AppendFormat(format, "id", "iphone", item.Value);
                    if (item.Key == "iphoneUrl") sb.AppendFormat(format, "url", "iphone", item.Value);

                    if (item.Key == "ipadName") sb.AppendFormat(format, "name", "ipad", item.Value);
                    if (item.Key == "ipadId") sb.AppendFormat(format, "id", "ipad", item.Value);
                    if (item.Key == "ipadUrl") sb.AppendFormat(format, "url", "ipad", item.Value);

                    if (item.Key == "googleplayName") sb.AppendFormat(format, "name", "googleplay", item.Value);
                    if (item.Key == "googleplayId") sb.AppendFormat(format, "id", "googleplay", item.Value);
                    if (item.Key == "googleplayUrl") sb.AppendFormat(format, "url", "googleplay", item.Value);
                    
                }

            }

            return sb.ToString();
        }

Advertisements