自分のサイト上で外部リンクをFacebookの画像つきリンクっぽく表示する方法

javascript:(function(){javascript:(function(d,j,b,s){function r(){setTimeout(function(){(typeof jQuery=='undefined')?r():b(jQuery)},99)}(j)?b(jQuery):d.body.appendChild(d.createElement('script')).src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js',r()})(document,this.jQuery,function($){var ogurl=$("meta[property='og:url']").attr("content");var ogtitle=$("meta[property='og:title']").attr("content");var ogdesc=$("meta[property='og:description']").attr("content");var ogimg=$("meta[property='og:image']:last").attr("content");var urlhost=location.host;if(ogtitle==null){ogtitle=document.title;alert(ogtitle)};if(ogurl==null){ogurl=location.href};if(ogdesc==null){ogdesc=""};if(ogimg==null){ogimg="http://capture.heartrails.com/100x100/?"+ogurl;alert(ogurl)};var card='<!--'+ogtitle+'--><div class="bc-1"><div class="bc-2"><a href="'+ogurl+'" class="bc-3"><img src="'+ogimg+'" class="bc-4"></a></div><p style="margin:0;">'+'<a href="'+ogurl+'" class="bc-5">'+ogtitle+'</a></p><p class="bc-6">'+ogdesc+'</p><div class="bc-7"><p class="bc-8"><img src="http://favicon.hatena.ne.jp/?url='+ogurl+'" class="bc-favicon">'+urlhost+'<img src="http://b.hatena.ne.jp/entry/image/'+ogurl+'" class="bc-hatebu"></p></div></div>';prompt("bc",card);});})();

div.bc-1 {
  width:100%;
  max-width:500px;
  margin:0 0 20px 0;
  background:#fff;
  border:1px solid#ccc;
  border-radius:5px;
  box-sizing:border-box;
  padding:12px;
}
div.bc-2 {
  width:100px;
  height:100px;
  float:right;
  margin:0 0 10px 10px;
  padding:0;
  position:relative;
  overflow:hidden;
}
a.bc-3 {
  position:absolute;
  width:1000%;
  left:50%;
  margin:0 0 0 -500%;
  text-align:center;
}
img.bc-4 {
  width:auto;
  height:100px;
  margin:0;
  vertical-align:middle;
  display:inline;
}
a.bc-5 {
  color:#333;
  font-weight:bold;
  text-decoration:none;
  font-size:17px;
  margin:0 0 10px 0;
  line-height:1.5;
}
p.bc-6 {
  margin:0;
  color:#666;
  font-size:11px;
  line-height:1.5;
}
div.bc-7 {
  border-top:1px solid#eee;
  clear:both;margin:10px 0 0 0;
  padding:0;
}
p.bc-8 {
  color:#999;
  margin:3px 0 0 0;
  font-size:11px;
}
img.bc-favicon {
  margin:0 5px 0 0;
  padding:0;
  border:none;
  display:inline;
  vertical-align:middle;
}
img.bc-hatebu {
  margin:0 0 0 5px;
  padding:0;
  border:none;
  display:inline;
  vertical-align:middle;
}

<div class="bc-1">
  <div class="bc-2">
    <a href="{{ include.url }}" class="bc-3">
	  <img src="{{ include.image }}" class="bc-4">
	</a>
  </div>
  <p style="margin:0;">
    <a href="{{ include.url }}" class="bc-5">{{ include.title }}</a>
  </p>
  <p class="bc-6">{{ include.desc }}</p>
  <div class="bc-7">
    <p class="bc-8">
      <img src="http://favicon.hatena.ne.jp/?url={{ include.url }}" class="bc-favicon">{{ include.site }}<img src="http://b.hatena.ne.jp/entry/image/{{ include.url }}" class="bc-hatebu">
    </p>
  </div>
</div>

javascript:(function(){javascript:(function(d,j,b,s){function r(){setTimeout(function(){(typeof jQuery=='undefined')?r():b(jQuery)},99)}(j)?b(jQuery):d.body.appendChild(d.createElement('script')).src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js',r()})(document,this.jQuery,function($){var ogurl=$("meta[property='og:url']").attr("content");var ogtitle=$("meta[property='og:title']").attr("content");var ogdesc=$("meta[property='og:description']").attr("content");var ogimg=$("meta[property='og:image']:last").attr("content");var urlhost=location.host;if(ogtitle==null){ogtitle=document.title;alert(ogtitle)};if(ogurl==null){ogurl=location.href};if(ogdesc==null){ogdesc=""};if(ogimg==null){ogimg="http://capture.heartrails.com/100x100/?"+ogurl;alert(ogurl)};var card='{% include blogcard.html site="'+urlhost+'" url="'+ogurl+'" image="'+ogimg+'" title="'+ogtitle+'" desc="'+ogdesc+'" %}';prompt("blogcard",card);});})();

{% include blogcard.html site="giantech.jp" 
		url="http://giantech.jp/2015/06/04/what-origin-is-the-purpose-diagram" 
		image="http://giantech.jp/assets/images/20150604/purpose_venn_diagram_ja.png" 
		title="あの有名な「生きがいを見つけるためのベン図」はどこから来たのか？" 
		desc="SNSで話題になっていた「YOU LOVE IT & THE WORLD NEEDS IT & YOU ARE PAID FOR IT & YOU ARE GREAT AT IT = PURPOSE」の図はどこから来たのかを調べてみた。" %}