Append Share Links on Blockquote Blocks Using JQuery

This snippet is used to append a share link, specifically Twitter and Facebook links, on a blockquote to share the text inside it.

See live sample

Before Starting

Make sure first that you have the following:

• Facebook Developer App ID - For sharing in Facebook
• Bit.ly API Key - For shortening the URL which is good for Twitter
• JQuery

The Snippet

// Get the current URL and strip all unnecessary parameters.
$lurl = window.location.href;
if ($lurl.indexOf("?")>-1){
   $lurl = $lurl.substr(0,$lurl.indexOf("?"));
}
if ($lurl.indexOf("#")>-1){
   $lurl = $lurl.substr(0,$lurl.indexOf("#"));
}
 
// Shorten URL.
$surl = "";
get_short_url($lurl);
 
// Gets the shorten URL and append the social links.
function get_short_url(long_url)
{
 var url=long_url;
 var username="[REPLACE WITH BIT.LY USERNAME]";
 var key="[REPLACE WITH BIT.LY KEY]";
 $.ajax({
  url:"http://api.bit.ly/v3/shorten",
  data:{longUrl:url,apiKey:key,login:username},
  dataType:"jsonp",
  success:function(v)
  {
   var bit_url=v.data.url;
   $surl = bit_url;
            $("blockquote").each(function(){
                $originalHtml = $(this).html();
                $originalTxt = $(this).text();
                $(this).attr('id', "cbq" + cbq);
                $createShareButtons = createShareButtons($originalTxt, $originalHtml);
                $(this).append($createShareButtons);
                cbq++;
            });
 
  }
 });
}
 
// Create the Social links
function createShareButtons(originalTxt, originalHtml){
 $shareButtons = $("<div></div>");
 
 $shortenText = $.trim(originalTxt).substring(0, 90) + "..." + $surl;
 
 $twitter = '<a class="shareWord" href="http://www.twitter.com/intent/tweet?via=pakiwariko&text=' + $shortenText.replace('"', '') + '" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=no,location=no,scrollbars=no,height=300,width=600');return false;" target="_blank">[Tweet] </a>';
 
 urlAtt  = $lurl;
 caption = "[REPLACE WITH YOUR OWN CAPTION]";
 description = encodeURIComponent(originalTxt).replace('"', '');
 name = $title;
 appId = "[REPLACE WITH FB APP ID]";
 
 
 url = "https://www.facebook.com/dialog/feed?app_id="+ appId +"&link=" + urlAtt +
  "&caption=" + caption +
  "&description=" + description +
  "&name=" + name +
  "&redirect_uri=" + $lurl;
 
 $fb = '<a class="shareWord" href="'+url+'" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=no,location=no,scrollbars=no,height=300,width=600');return false;" target="_blank">[Share] </a>';
 
 $shareButtons.append($twitter);
 $shareButtons.append($fb);
 return $shareButtons;
}

Recommendation

The aim of this snippet is to add social share links at a blockquote. By simply replacing the line $("blockquote").each(function(){ you can actually use this to append on divs and other HTML tags too that support $.append().