Javascript - Format links for blog

I was previously planning a series of posts on the wix toolset, and wanted to display the reference link with some formatting, like facebook. Since there is no reliable cross-domain access to the title and description using jquery (that I know of), and I do not have a site to get this information, it does require some manual work. As a draft, subject to change, here is a simple solution:

CSS

a.extendedLink
 {
text-decoration: none;
  width: auto;
  height: auto;
  padding: 0px;
  margin: 0px;
  display: block;
 }
 
a.extendedLink:link
{
 text-decoration: none;
 width: auto;
 height: auto;
 padding: 0px;
 margin: 0px;
 display: block;
}

a.extendedLink img
{
 width: 30px;
 height: 30px;
 vertical-align: middle;
 padding: 0px;
 margin: 0xp;
}

a.extendedLink header
{
 border-bottom: 1px solid gray;
 font-size: 30px;
}

a.extendedLink description
{
 margin-left: 5px;
}

a.extendedLink:hover
{
 text-decoration: none;
 width: auto;
 height: auto;
 padding: 0px;
 margin: 0px;
 display: block;
}

Javascript

$(document).ready(function() {
  var map = { 
   'a.extendedLink[href^="http://"]': /^(http:\/\/[^\/]+).*$/,
   'a.extendedLink[href^="https://"]': /^(https:\/\/[^\/]+).*$/ 
  }; 
   $.each(map, function (key, value) {
   $(key).each(function () 
    {
     var link = $(this);
     var html = link.html();
     var url = link.attr('href');
     var title = link.attr("title");
     var icon = url.replace(value, '$1') + '/favicon.ico';

     console.log(icon);
     var header = $('
' + html + '
');
     var img = $("");
     var description = $('' + title + '');
     
     var imgCheck = new Image();
     imgCheck.src = icon;
     imgCheck.onerror = function()
     {
      img.attr("src", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSuagEm4fjs5bVXRoCwzxShyphenhyphen2bJWe5DVan-3bZ6aWxHfBDG4YNX_6CCtm_fORme_octD2YPtz8PEXuhe9gtKDoVrvsGc2RC3y_9xOTuQEIrvQsHhdh9yieTNqGe17tBfMZVN62xIU1xwA/s1600/6930ico_question.ico");
     }
     
     link.attr("target", "_blank");
     link.attr("rel", "nofollow");
     
     link.html("");
     header.appendTo(link);
     img.appendTo(link);
     description.appendTo(link);
    });
   });
 });

Default Image

Explanation

After the document is ready, for each link with class name 'extendedLink' and a href starting with 'http://':

1. Create array map to hrefs (http, https) - map
2. For each item in the array, do the following steps for each link(extendedLink)
3. a reference to the link will be created - link
4. collect the current html - html
5. collect the current attribute 'href' - url
6. collect the current title - title
7. collect the icon location based on the base address - icon
8. set the header with the current links html - header
9. set the image with the collected icon location - image
10. set the description with title - description
11. create Image() with icon src and add src default if image has error loading
12. set link attribute 'target'
13. set link attribute 'rel'
14. set link html with header, image, and description

References
Own experiences...

JQuery andreaslagerkvist