css - TUMBLR og :image should be larger [edited: more code]

标签 css facebook object facebook-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}

最佳答案

目前,您的主题正在请求 500 像素或更小的图像:

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

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

{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}

我在此建议谨慎,如果没有可用图像的高分辨率版本,则并不总是提供后备 URL。

关于css - TUMBLR og :image should be larger [edited: more code],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20798377/

相关文章:

css - 在缩略图后面放置一个加载图标 div

android - 如何使用 Facebook Graph API 检查 Facebook 页面中的位置

javascript - 填写 addFullName 函数的代码

php - facebook API 有什么好的 totuiral 吗?是否有可能在我的网站上获取用户的好友列表?

ruby - 如何以编程方式在Facebook Pages上发布(共享)YouTube视频?

javascript - 使用不同名称别名或以其他方式合并两个相同的对象原型(prototype)

java - Java 中的对象类型和引用数组

html - 如何通过css在mvc中为 anchor 标签设置图像?

html - 如何制作具有挤压效果的3D元素?

javascript - 一页网站的平滑滚动