如何分享 - 博客的标题,图片和其链接中的简短内容 - 在社交媒体上链接到博客?

时间:2016-04-06 12:23:19

标签: php jquery twitter-bootstrap-3

我正在开发一个博客页面,其中每个博客都可以通过

访问
http://<domain>.com/blogs?id=2344

如果我复制此链接并粘贴在LinkedIn,Facebook等社交媒体平台上,我想显示缩略图,标题和简短描述以及帖子。 post div看起来如下

<div id="10002" name="div_post" class="post row" categoryname="Business"><div class="container-fluid"><div class="row post-header"><div class="col-sm-3 col-md-2 col-xs-5 hidden-xs text-center pull-right bbrown"><div class="profile_pic"><div class="pretty_alias" id="avatar_10001"><h3 class="hiddens to_curve top"><span class="char char0"><div>k</div></span><span class="char char1"><div>g</div></span><span class="char char2"><div>r</div></span><span class="char char3"><div>l</div></span><span class="char char4"><div>a</div></span></h3><h3 class="bottom"><span class="id id0"><div>3</div></span><span class="id id1"><div>8</div></span><span class="id id2"><div>3</div></span><span class="id id3"><div>7</div></span><span class="id id4"><div>5</div></span><span class="id id5"><div>6</div></span></h3></div></div><span class="col-sm-12 text-center bbrown"><h6 class="text-capitalize usertitle"></h6></span></div><h1 style="margin-left:0.5em">Post heading</h1><h6 style="margin-left:1.6em" class="poststamp">March 10th 2016</h6></div></div><div class="container-fluid"><div class="row post-content"><div class="col-xs-11 col-sm-12"><div class="pull-right" style="width:50%;margin-left:20px;"><div class="row"><img class="img-responsive" src="http://thissite.com/post_img_10002_1.jpg"></div></div>Content </a><br> </div></div></div><div class="container"><div class="row"><h6 style="margin-left:0.5em"> &nbsp;<span class="badge">Business</span></h6></div></div></td></tr></tbody></table></span></div></div></div></div></div></div>

其他密切相关的博客将显示在此博客下方。在LinkedIn脉冲中可以看到非常相似的行为。唯一的区别是我们使用查询字符串来获取帖子。

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:2)

请检查:http://ogp.me/

标题,图像等的一个例子......

<meta property="og:title" content="Facebook Open Graph META Tags"/>
<meta property="og:image" content="https://blog.com/img/facebooklogo.png"/>
<meta property="og:site_name" content="John Smith Blog"/>
<meta property="og:description" content="Facebook's Open Graph protocol allows for web developers to add description" />

您可能应该更改模板以提供这些标记。