Mindless Philosophy






Really simple Umbraco Social Media buttons

by Darren Street

Created on: Friday August 30, 2013

4 comments

If you want to add Social Media buttons to your website you have a few options such as using the pre made code package AddThis. However I have found that AddThis buttons are slow to render and looking at the code I can see why.

social media

If you want fast page loads you really don’t want all your buttons making server requests willy nilly. This problem seems to be exacerbated if you have a responsive website and your visitor is viewing over a slow GSM network.

I looked for a solution for some really simple buttons to do the job and found a partial solution but it either require a special web font loaded or the media opened full page, which didn’t look right.

So I did some fettling and made some amendments and improvements. In essence the buttons are a unordered list with straight URL links to the social media providers.

As its Umbraco, the page and title information is dynamically generated from the Umbraco Library.

There is also a tad of JavaScript to manage the popups which render as separate tabs on a Smartphone.

The HTML

To make the links populate correctly I used a Usercontrol and macro. That way it can be inserted via the template or user interface.


ul class="override"
   
    li> a id="fbk" href="https://www.facebook.com/sharer/sharer.php?u=<%: urlpage %>" class="share">Facebook         
    li> a id= "twt" href="https://twitter.com/intent/tweet?url=<%: urlpage %>&text=<%: urltext %>&hashtags=<%: urlhash %>" class="share">Twitter
    li> a id="gog" href="https://plus.google.com/share?url=<%: urlpage %>" class="share">Google
    li> a id="lnd" href="http://www.linkedin.com/shareArticle?mini=true&url=<%: urlpage %>;source=<%: urlsource %>&title=<%: urltitle %>&summary=<%: urltext %> " class="share">Linkedin

/ul

The code behind



        public string urlpage, urltext, urlhash, urlsource, urltitle;

        protected void Page_Load(object sender, EventArgs e)
        {
            // set the url encoded page for social media
            string destinationURL = HttpContext.Current.Request.Url.AbsoluteUri;
            string destinationText = "Refresh is an Oxford-based website design company building clean & mobile friendly websites, tools & calculators.";
            string destinationHash = "";
            string destinationSource = "Refresh Websites Ltd";
            string destinationTitle = "Mobile Friendly Websites";
            this.urlpage = Server.UrlEncode(destinationURL);
            this.urltext = Server.UrlEncode(destinationText);
            this.urlhash = Server.UrlEncode(destinationHash);
            this.urlhash = Server.UrlEncode(destinationSource);
            this.urlhash = Server.UrlEncode(destinationTitle);
        }
    }

The CSS

The button padding and height will probably need adjustment to fit your site.


    div.textcentre ul.override {font-size: 1em;font-family: 'Arimo', sans-serif;letter-spacing:-1px;}
    div.textcentre ul.override li {display: inline; }
    div.textcentre ul.override li a {display:inline-block;  height: 28px; width: 100px; color: #fff;
                                      margin: 0 10px; 
                                      padding-top: 15px; 
                                      -webkit-border-radius: 6px; 
                                      -moz-border-radius: 6px; 
                                       border-radius: 6px;
                                     -webkit-box-shadow: 1px 1px 2px rgba(50, 50, 50, 0.75);
                                     -moz-box-shadow:1px 1px 2px rgba(50, 50, 50, 0.75);
                                      box-shadow:1px 1px 2px rgba(50, 50, 50, 0.75);}

    div.textcentre ul.override li a#fbk {background: #3B5998;}
    div.textcentre ul.override li a#twt {background: #00C8FA;}
    div.textcentre ul.override li a#gog {background: #EF2B34;}
    div.textcentre ul.override li a#lnd {background: #2C8CC0;}

    div.textcentre ul.override li a:hover {background: #666!important;}

And finally the JS


    // create social networking pop-ups
    (function () {

        var Config = {
            Link: "a.share",
            Width: 500,
            Height: 500
        };

        // add handler links
        var slink = document.querySelectorAll(Config.Link);
        for (var a = 0; a < slink.length; a++) {
            slink[a].onclick = PopupHandler;
        }

        // create popup
        function PopupHandler(e) {

            e = (e ? e : window.event);
            var t = (e.target ? e.target : e.srcElement);

            // popup position
            var
                px = Math.floor(((screen.availWidth || 1024) - Config.Width) / 2),
                py = Math.floor(((screen.availHeight || 700) - Config.Height) / 2);

            // open popup
            var popup = window.open(t.href, "social", "width=" + Config.Width + ",height=" + Config.Height + ",left=" + px + ",top=" + py + ",location=0,menubar=0,toolbar=0,status=0,scrollbars=1,resizable=1");
            if (popup) {
                popup.focus();
                if (e.preventDefault) e.preventDefault();
                e.returnValue = false;
            }

            return !!popup;
        }

    }());

Job done.

Have a look at the bottom of this page to see what they look like rendered.

4 comments




Darren Street (author) commented on 8 Oct 2013


I have updated the code to show button images, which look a little nicer. I you would like the updated code contact me.


32Roksta commented on 5 Oct 2013


Was lookin for simple. This is perfect.

great


Rinky commented on 26 Sep 2013


Thank for the share. Do you know if this code would work with V6.06?

Also I need to include another button for Pin it. How would I do that please?


RichardP commented on 25 Sep 2013


Thank you.

This has really helped me out.

Great job.



Have your say


Sorry this post is no longer accepting comments.