Integrating StackTack with BlogEngine

Topics: ASP.NET 2.0, Controls
Apr 30, 2012 at 2:57 AM
Edited Apr 30, 2012 at 2:58 AM

StackTack is a widget for bloggers and writers to easily tack questions and answers from the Stack Exchange sites such as Stack Overflow, Server Fault and Super User, into their articles.

StackTack, a JavaScript widget you can stick anywhere

Can anyone suggest how to go about including this for a particular blog post?

From the StackTack documentation:

<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://app.stacktack.com/jquery.stacktack.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $(document).stacktack();
        });
    </script>
</head>

<body>
    <div id="stacktack-518021"></div>
</body>

Apr 30, 2012 at 2:50 PM
Edited Apr 30, 2012 at 7:43 PM

You could use an extension:

Usage:

Insert a place-holder in post body at desired position using this syntax [stacktack:518021]

You could add more more than one if you like i.e.

[stacktack:518020]

[stacktack:518021]

Code File:

The following code would go into a file named StackTack.cs in your App_Code/Extensions folder, you could copy any existing cs file, rename it and paste over the contents with this.

 

using System;
using System.Text;
using System.Text.RegularExpressions;
using System.Web;
using System.Web.UI;
using BlogEngine.Core;
using BlogEngine.Core.Web.Controls;
using BlogEngine.Core.Web.Extensions;
using Page = System.Web.UI.Page;

namespace App_Code.Extensions
{
    [Extension("StackTack - tack questions and answers from Stack Exchange sites to posts", "1.0", "<a href=\"http://tony.com\">Anthony Grace</a>")]
    public class StackTack
    {                
        public StackTack()
        {
            Post.Serving += AddStackTack;
        }

        private void AddStackTack(object sender, ServingEventArgs e)
        {

            if (!ExtensionManager.ExtensionEnabled("StackTack"))
            {
                return;
            }
            var matches = Regex.Matches(e.Body, @"\[stacktack:(.+?)\]");

            if (matches.Count > 0)
            {
                string stackId;
                string stackTackDiv;
                bool goodToGo = true;
                foreach (Match m in matches)
                {
                    try
                    {
                        stackId = m.Groups[1].Value;
                        stackTackDiv = "<div id=\"stacktack-" + stackId + "\"></div>";
                    }
                    catch (Exception ex)
                    {
                        goodToGo = false;
                        stackTackDiv = String.Format("Error converting placeholders: {0}", ex.Message);
                    } 
                    e.Body = e.Body.Replace(m.Value, stackTackDiv);
                }
                if (goodToGo)
                {
                    AddScriptToHead((Page)HttpContext.Current.CurrentHandler);
                }
            }
        }


        private void AddScriptToHead(Page page)
        {
            if (page is BlogBasePage && page.Header.FindControl("StackTack") == null)
            {
                string scriptLink = "<script type=\"text/javascript\" src=\"http://app.stacktack.com/jquery.stacktack.min.js\"></script>";
                string scriptReady = "<script type=\"text/javascript\"> $(document).ready(function() {$(document).stacktack();});</script>";                
                page.Header.Controls.Add(new LiteralControl { ID = "StackTack", Text = scriptLink + scriptReady });
            }
        }
    }
}

Edit:

Decided to play around with this and noticed in some themes that the theme CSS conflicts with the widget CSS.

For example, in the standard theme you have this rule:

div.post .text a[href^="http:"] {
	background: url(../../pics/remote.gif) right top no-repeat;	
	padding-right: 10px;
  	white-space: nowrap;
}

Which is quite specific and prevents the stacktack pin background images showing. 
so you would need to add something like this to the stylesheet to override.

div.post a.stacktack-logo[href^="http:"] {
	background: transparent url(http://app.stacktack.com/sprites.png) -10px -10px no-repeat;
}

Which could start to get messy, so it might actually be better to change the theme CSS if you have selectors like that.

Also tidied up the extension code above from earlier.

Apr 30, 2012 at 3:01 PM
Edited May 2, 2012 at 12:31 PM

Andy,

Thanks for all your effort on this. I've created the extension and it's coming up in the list of Extensions in Admin. I tried it out in a post and it worked just fine. However, I had to make some CSS tweaks as the question title and question votes were scrunched over each other. Also, the tack logo was still hidden: 

.stacktack-logo { z-index: 10000; } .stacktack-votes { padding-top: 10px; }

May 2, 2012 at 12:21 PM

Hi Tony,

Don't know if you noticed the edit to the extension code above, I was playing around with the widget and did notice that some theme stylesheets do conflict with the stacktack CSS. I mostly use right click - inspect element in chrome, it's pretty good at showing which CSS rules are being overridden and by what.

Did you manage to get the tack logo showing?

May 2, 2012 at 12:33 PM

Andy,

Yes, I got the tack logo to show. I use Web Dev toolbar in Firefox to inspect the elements. I checked logo displaying in FF12 and IE9. I must give the Chrome tools a try out. Thanks for your help with this :)

May 2, 2012 at 3:12 PM

I also included your CSS.