Social Sharing no-.js

Social Sharing Bootstrapped with no external JavaScript

Using just links and one simple Orchard module Mofit.Social to model the url of the page your sharing.

First download Mofit.Social and install it. Open your site folders Modules/Mofit.Social/Views/Parts/Social.cshtml and deleat everything in the file.

Add the below changing it to your own website content. We will be using Font Awesome Icons for social icons on our bootstrap buttons but you could easily use glyph-icons or your own images instead and all the links open in a browser friendly window, thus no user gets lost  from your page on a new browser window, tab or page.

No download's of JavaScript or Cookies is required.
As this is an issue? Probably not on your home computer with high-speed broadband, but is it an issue on your phone.
 
And some other issues like not being able to track clicks onto them are easily mitigated with some JavaScript feeding into your analytic's package.
 
There is also an added bonus in that you don’t need to have Facebook/Twitter/Etc cookies. No need iframes added to your website.
 
How to do this
 

Add the links below. Changing to Your Titles, Summary and where needed a Description.

Url's Model is buy url=@Model.Url on each link  and by adding data-url="@Model.Url" so the page your user is on gets shared, instead of your website home url.

I added web intents for other functions in my sites but on the twitter link you can just use a window data link and leave out web intents it will work the same.

onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,
resizable=yes,scrollbars=yes,height=600,width=600'
);return false;" data-original-title="Post new tweet">                  
<div class="postnewtweet pull-left">
    <div class="btn-group" role="group">
         <a class="btn btn-info btn-sm" data-toggle="tooltip" data-url="@Model.Url" 
            href="https://twitter.com/intent/tweet?url=@Model.Url&text=At Don Boulton.com&via=donboulton" 
            data-original-title="Post A New Tweet" data-user-id="105217183">
         <button type="button" class="btn btn-info btn-sm newtweet"></button>Tweet</a>
    </div>
</div>
<div class="divgplusshare pull-right">
    <div class="btn-group" role="group">         
         <a class="btn btn-danger btn-sm" data-toggle="tooltip" data-url="@Model.Url" 
            href="https://plus.google.com/share?url=@Model.Url" 
            onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,
            resizable=yes,scrollbars=yes,height=600,width=600')
            ;return false;" data-original-title="Share on Google+">         
         Share <button type="button" class="btn btn-danger btn-sm gplusshare"></button></a>
    </div>
</div>
    <div id="socialcontainer" class="center">    
        <div class="row">
            <span class="btn-group">
                <a class="iframe btn btn-sm btn-default" data-toggle="tooltip" data-url="@Model.Url" 
                   data-count="horizontal" title="" href="http://feeds.feedburner.com/donboulton/Sohc" 
                   data-original-title="Don Boulton Blog RSS">
                    <i class="fa fa-rss"></i>
                </a>
                <a class="btn btn-sm btn-default" data-toggle="tooltip"
                   data-original-title="Email Donald Boulton at Google + Page" 
                   href="mailto:don-boulton-4557@pages.plusgoogle.com" 
                   onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,
                   resizable=yes,scrollbars=yes,height=600,
                   width=600');return false;">
                    <i class="fa fa-envelope"></i>
                </a> 
                <a class="btn btn-sm btn-default" data-toggle="tooltip" data-count="horizontal" 
                   href="https://twitter.com/intent/tweet?url=@Model.Url&text=YOUR TEXT&via=TWITTER USERNAME" 
                   class="twitter-share-button" data-original-title="Twitter Share" 
                   data-user-id="TWITTER USER ID">
                    <i class="fa fa-twitter"></i>
                </a>
                <a class="btn btn-sm btn-default" data-toggle="tooltip" 
                   data-url="@Model.Url"  rel="publisher" href="https://plus.google.com/share?url=@Model.Url" 
                   onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,
                   resizable=yes,scrollbars=yes,height=600,
                   width=600');return false;" data-original-title="Share on Google+">
                    <i class="fa fa-google-plus"></i>
                </a>
                <a class="btn btn-sm btn-default" data-toggle="tooltip" 
                   data-url="@Model.Url" href="https://facebook.com/?n=donboulton" 
                   onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,
                   resizable=yes,scrollbars=yes,height=600,
                   width=600');return false;" data-original-title="Facebook" >
                    <i class="fa fa-facebook"></i>
                </a>
                <a class="btn btn-sm btn-default" data-toggle="tooltip" data-url="@Model.Url" 
                   href="http://www.linkedin.com/shareArticle?mini=true&url=@Model.Url&title=
                   YOUR TITLE%20Website&summary=My%20favorite%20web%20site&source=YOR WEBSITE URL"
                   onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes
                   ,scrollbars=yes,height=600,width=600');return false;" data-original-title="LinkedIn">
                    <i class="fa fa-linkedin"></i>
                </a>                             
                <a class="btn btn-sm btn-default" data-toggle="tooltip" 
                   data-url="@Model.Url" href="https://onedrive.live.com/redir?resid=BFE52B3504AE372E%21135" 
                   onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,
                   resizable=yes,scrollbars=yes,height=600
                   ,width=600');return false;" data-original-title="My One Drive">
                    <i class="fa fa-windows"></i>
                </a>
                <a data-toggle="tooltip" data-url="@Model.Url" 
                   data-original-title="Proof of God scientifically" class="youtube btn btn-sm btn-default" 
                   href="http://www.youtube.com/embed/p00AYijRJy4?feature=player_detailpage">                    
                    <i class="fa fa-youtube"></i>
                </a>                           
                <input value="donboulton/Sohc" name="uri" type="hidden"> //For Feedburner
                <input value="en_US" name="loc" type="hidden"> //For Feedburner
                <meta content="EN" itemprop="InLanguage"> //For LinkedIn
            </span>            
      </div>
</div>
 
<script>
    (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;
}());
</script>

Attach Mofit.Social Part to Blog Posts and Pages, set positioning with placement.info if you need it to be place anywhere but at the bottom of your post or page.

Add the page link to your post or page in the Mofit.Social Url input, you can add the full url or just ~/page.

Social Url

We will add bootstrap styling in this example

Limited Dependencies With Twitter Web Intents

Some sites may prefer to embed the unobtrusive Web Intents pop-up Javascript inline with a dependency to platform.twitter.com.

The snippet below will offer the equivalent functionality without the external dependency. Twitter Web Intents page.

<script>
    (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;
}());
</script>

But Bootstrap button groups are to close together for touch enabled devices, so I put everything in a button-toolbar and each button in a button-group. Used btn-lg for touch devices.

<div id="inline_profiles btn-toolbar">
    <div class="profilex" id="profile50">    
    <div id="socialcontainer" class="center">    
           <div class="center" role="toolbar" aria-label="Toolbar with button groups">
                <div class="btn-group" role="group" aria-label="First group">
                    <a rel="nofollow" class="iframe btn btn-lg btn-default" data-toggle="tooltip" data-url="@Model.Url
              " data-count="horizontal" title="" href="http://feeds.feedburner.com/donboulton/Sohc" data-original-title="Don Boulton Blog RSS">
             <i class="fa fa-rss"></i></a>
                </div>
                <div class="btn-group" role="group" aria-label="Second group">                   
                    <a rel="nofollow" class="btn btn-lg btn-default" data-toggle="tooltip" data-toggle="tooltip" 
              data-original-title="Email Donald Boulton at Google + Page" href="mailto:don-boulton-4557@pages.plusgoogle.com" 
             onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"
             ><i class="fa fa-envelope"></i></a>
                </div>
                <div class="btn-group" role="group" aria-label="First group">                                      
                    <a rel="nofollow" class="btn btn-lg btn-default" data-toggle="tooltip" data-count="horizontal" 
href="https://twitter.com/intent/tweet?url=@Model.Url&text=Donald Boulton&via=donboulton" class="twitter-share-button" 
data-original-title="Twitter Share" data-user-id="105217183"><i class="fa fa-twitter"></i></a>
                </div>
                <div class="btn-group" role="group" aria-label="First group">                   
                    <a rel="nofollow" class="btn btn-lg btn-default" data-toggle="tooltip" data-url="@Model.Url"  
rel="publisher" href="https://plus.google.com/share?url=@Model.Url" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,
resizable=yes,scrollbars=yes,height=600,width=600');return false;" data-original-title="Share on Google+"><i class="fa fa-google-plus"></i></a>
                </div>
                <div class="btn-group" role="group" aria-label="First group">                                      
                    <a rel="nofollow" class="btn btn-lg btn-default" data-toggle="tooltip" target="_blank" data-url="@Model.Url
" href="https://facebook.com/?n=donboulton" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,
resizable=yes,scrollbars=yes,height=600,width=600');return false;" data-original-title="Facebook" ><i class="fa fa-facebook"></i></a>
                </div>
                <div class="btn-group" role="group" aria-label="First group">                                    
                    <a rel="nofollow" class="btn btn-lg btn-default" data-toggle="tooltip" target="_blank" data-url="@Model.Url
" href="http://www.linkedin.com/shareArticle?mini=true&url=@Model.Url&
title=Donald%20Boulton%20Website&summary=My%20favorite%20web%20site&source=donboulton.com" 
onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" 
data-original-title="LinkedIn"><i class="fa fa-linkedin"></i></a>
                </div>
                <div class="btn-group" role="group" aria-label="First group">                                                                
                    <a rel="nofollow" class="btn btn-lg btn-default" data-toggle="tooltip" target="_blank" data-url="@Model.Url
" href="https://onedrive.live.com/redir?resid=BFE52B3504AE372E%21135" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,
resizable=yes,scrollbars=yes,height=600,width=600');return false;" data-original-title="My One Drive"><i class="fa fa-windows"></i></a>
                </div>
                <div class="btn-group" role="group" aria-label="First group">                                    
                    <a data-toggle="tooltip" data-url="@Model.Url" data-original-title="Proof of God scientifically" 
class="youtube btn btn-lg btn-default" href="http://www.youtube.com/embed/p00AYijRJy4?feature=player_detailpage"><i class="fa fa-youtube"></i></a> 
                </div>                          
                <input value="donboulton/Sohc" name="uri" type="hidden">
                <input value="en_US" name="loc" type="hidden">
                <meta content="EN" itemprop="InLanguage">
            </div>            
         </div>
   </div>
</div>
<div class="clearfix"></div>

 

1 Comment

  • youtube commenter bot

    I know this web site provides quality dependent articles
    and additional data, is there any other web page which presents such information in quality?

Comments are Moderated, from, "(Spam-bots)", before they are posted.

 1584702 Views