TUMBLR og:图像应该更大[编辑:更多代码]

时间:2013-12-27 09:45:45

标签: css facebook object opengraph tumblr

我已将两个小部件添加到我的博客中 - http://www.raisethecurve.com - 一个位于侧边栏,另一个附在每个帖子上。

我已将900x900 og:image上传到tumblr静态服务器,可在我的

中找到

FB Debug

在搜索论坛并应用我能找到的每个修复后,没有任何工作。

最让我感到困惑的是侧边栏box_count小部件可以正常工作,但后嵌入小部件没有。

如果有人有任何想法,我将非常感谢你的帮助。

<!-- FACEBOOK OPEN GRAPH -->
<!-- >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>-->

<meta property="og:site_name" content="{Title}" />
<meta property="og:description" content="Poetry, Prose, and Who Knows." />

{block:PermalinkPage}
<meta property="og:type" content="article" />
<meta property="og:url" content="{Permalink}" />

        {block:Posts}
            {block:Text}
                {block:Title} 
                <meta property="og:title" content="{PlaintextTitle}"/>{/block:Title}
                <meta property="og:description" content="{PlaintextBody}"/>
            {/block:Text}

            {block:Photo}
                <meta property="og:image" content="{PhotoURL-500}"/>
                {block:Caption}<meta property="og:description" content="{PlaintextCaption}"/>{/block:Caption}
            {/block:Photo}

            {block:Photoset}
                {block:Photos}
                <meta property="og:image" content="{PhotoURL-500}"/>
                {/block:Photos}
                {block:Caption}<meta property="og:description" content="{PlaintextCaption}"/>{/block:Caption}
            {/block:Photoset}

            {block:Quote}
                <meta property="og:title" content="{PlaintextQuote}"/>
                <meta property="og:description" content="{PlaintextSource}"/>
                <meta property="og:image" content="http://static.tumblr.com/k81rzib/vCnmygjui/finalogo.jpg" />
            {/block:Quote}

            {block:Link}
                <meta property="og:title" content="{PlaintextName}"/>
                <meta property="og:description" content="{PlaintextDescription}"/>
                <meta property="og:image" content="http://static.tumblr.com/k81rzib/vCnmygjui/finalogo.jpg" />
            {/block:Link}

            {block:Chat}
                <meta property="og:title" content="{PlaintextTitle}"/>
                <meta property="og:description" content="{block:Lines}{block:Label}{Label}: {/block:Label}{Line} &bull; {/block:Lines}"/>
                <meta property="og:image" content="http://static.tumblr.com/k81rzib/vCnmygjui/finalogo.jpg" />
            {/block:Chat}

            {block:Audio}
                <meta property="og:title" content="{block:Artist}{Artist} - {/block:Artist}{block:TrackName}{TrackName}{/block:TrackName}"/>
                <meta property="og:description" content="{PlaintextCaption}"/>
                {block:AlbumArt}<meta property="og:image" content="{AlbumArtURL}"/>{/block:AlbumArt}
            {/block:Audio}

            {block:Video}
                {block:Caption}<meta property="og:description" content="{PlaintextCaption}"/>{/block:Caption}
            {/block:Video}

            {block:Answer}
                <meta property="og:title" content="{PlaintextQuestion}"/>
                <meta property="og:description" content="{PlaintextAnswer}"/>
                <meta property="og:image" content="http://static.tumblr.com/k81rzib/vCnmygjui/finalogo.jpg" />
            {/block:Answer}
        {/block:Posts}
{/block:PermalinkPage}

{block:IndexPage}
<meta property="og:type" content="blog" />
<meta property="og:title" content="{Title}" />
<meta property="og:url" content="{BlogURL}" />
<meta property="og:image" content="http://static.tumblr.com/k81rzib/vCnmygjui/finalogo.jpg" />
{/block:IndexPage}

                                                            {block:Date}
                                                        <div class="meta">
                                                            <ul class="meta-list">
                                                                {block:HasTags}
                                                                <li class="tags">
                                                                    <ul class="tag-list">
                                                                        {block:Tags}
                                                                        <li><a href="{TagURL}">#{Tag}</a></li>
                                                                        {/block:Tags}
                                                                    </ul>
                                                                </li>
                                                                {/block:HasTags}
                                                                {block:IfShowGroupBlogInfo}<li class="post-author"><img alt="{PostAuthorName} Avatar" src="{PostAuthorPortraitURL-16}"> Posted by <a href="{PostAuthorURL}">{PostAuthorName}</a></li>{/block:IfShowGroupBlogInfo}
                                                                <li class="date{block:RebloggedFrom}-reblogged{/block:RebloggedFrom}"><a href="{Permalink}" title="{ShortDayOfWeek}. {Month} {DayOfMonth}, {Year} @ {12Hour}:{Minutes} {AmPm}"><span class="icon"></span>{TimeAgo}</a>{block:RebloggedFrom} <em>&gt;</em> <a class="reblogged-from" href="{ReblogRootURL}" title="{ReblogRootTitle}">{ReblogRootName}</a>{/block:RebloggedFrom}</li>
                                                                {block:NoteCount}<li class="notes"><a href="{Permalink}#notes"><span class="icon"></span>{NoteCount}</a></li>{/block:NoteCount}
                                                                {block:IfDisqusShortname}<li class="comments hidden"><a id="dsq-{PostID}" href="{Permalink}#disqus_thread"><span class="icon"></span>Comments</a></li>{/block:IfDisqusShortname}
                                                                <li class="permalink"><a href="{Permalink}"><span class="icon"></span>{lang:Permalink}</a></li>
                                                            </ul><!--/.meta-list -->                                                                
              </div>                   
                                <!-- /.meta -->
<!-- Custom code for index page social buttons -->                 
<!-- Custom code for like and reblog button -->
<ul class="like_and_reblog_buttons">
<li>{LikeButton color="grey"}</li>
<li>{ReblogButton color="black"}</li>
<!-- End custom code for like and reblog buttons -->
<!-- Custom code for google plus widget -->
   <li><div class="g-plusone" data-size="tall" data-annotation="none" data-href="{ShortURL}"></div></li>
<!-- End custom code for google plus widget -->
<!-- Custom code for Twitter widget -->
<li><a href="https://twitter.com/share" class="twitter-share-button" data-text="{Title}" data-via="RaiseTheCurve" data-hashtags="Tumblr" data-url="{ShortURL}" data-counturl="{Permalink}" data-count="horizontal" data-dnt="true">Tweet</a>
        <script async"true">!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></li>
<!-- End custom code for Twitter widget -->
<!-- Custom code for facebook widget -->
<li><div class="fb-like" data-href="{ShortURL}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div></li>
<!-- End custom code for facebook widget -->
</ul>
<!--End custom code for index page social buttons -->
{/block:Date}

1 个答案:

答案 0 :(得分:1)

目前,您的主题是请求500px或更低的图片:

{block:Photo}
    <meta property="og:image" content="{PhotoURL-500}"/>
    {block:Caption}<meta property="og:description" content="{PlaintextCaption}"/>{/block:Caption}
{/block:Photo}

要请求最大的图像,您需要使用以下主题块/变量:

{block:Photo}
    <meta property="og:image" content="{block:HighRes}{PhotoURL-HighRes}{/block:HighRes}"/>
    {block:Caption}<meta property="og:description" content="{PlaintextCaption}"/>{/block:Caption}
{/block:Photo}

我建议谨慎使用,如果没有可用的高分辨率图像版本,则不会始终提供后备网址。