寻找与网页内容相关的图片(三)网易新闻与qq空间的做法
寻找与网页相关的图片现在看来无非有两种方式,第一种是网页自己指定,第二种是通过算法推断。
对于网站的内容提供者来说,他自己知道相关的图片在哪,正如前文所述可以在HTML的头部加上META标签,也可以像网易新闻和qq空间一样,作为一个参数写在javascript脚本里。
qq空间分享代码
<script type="text/javascript"> (function(){ var p = { url:location.href, showcount:'1',/*是否显示分享总数,显示:'1',不显示:'0' */ desc:'',/*默认分享理由(可选)*/ summary:'',/*分享摘要(可选)*/ title:'',/*分享标题(可选)*/ site:'',/*分享来源 如:腾讯网(可选)*/ pics:'', /*分享图片的路径(可选)*/ style:'203', width:98, height:22 }; var s = []; for(var i in p){ s.push(i + '=' + encodeURIComponent(p[i]||'')); } document.write(['<a version="1.0" class="qzOpenerDiv" href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?',s.join('&'),'" target="_blank">分享</a>'].join('')); })(); </script>
这是qq空间分享所需要插入的代码,可以看到网站可以自己指定网站的摘要、标题、图片的路径等信息。所有的这些信息都是可选的,如果不填写这些信息呢,那就无从知晓了,背后的某个算法会找到合适的图片。
网易新闻分享代码
//顶部分享 底部分享 (function() { NTES.ready(function() { if(window.article_share14){ article_share14.setAttribute('data-url', window.location.href); article_share14.setAttribute('data-title', document.title); article_share14.setAttribute('data-pic', "http://img3.cache.netease.com/tech/2015/4/28/2015042812043170750_550.jpg"); article_share14.setAttribute('data-digest', ""); article_share14.setAttribute('data-source', "网易科技"); } if(NTES("#article_share13")){ article_share13.setAttribute('data-url', window.location.href); article_share13.setAttribute('data-title', document.title); article_share13.setAttribute('data-pic', "http://img3.cache.netease.com/tech/2015/4/28/2015042812043170750_550.jpg"); article_share13.setAttribute('data-digest', ""); article_share13.setAttribute('data-source', "网易科技"); } WbApi.initShareTipsSm({ sourceUrl: "http://tech.163.com/", source: encodeURIComponent("网易科技"), title: encodeURIComponent(document.title), link: encodeURIComponent(window.location.href + '#sns_163') }, "wb-article-share-end"); }); })();
网易新闻的做法也以类似的方式自己指定相关图片的url。这对于网站发布内容的人来说着实是一个不错的方式,因为他们自己知道相关图片的url。但这有点像作弊,只会对一种网站有效,而不具有普遍性的规律。