2

On a blog detail page I have Facebook OpenGraph tags pulling in various bits of data using ExpressionEngine tags etc. All works fine apart from the images.

Ideally, as the blog posts contain a lot of images, when posting an article to FB it should pull some of the images from the blog post to use as the thumbnail and let the client decide which one to use. If there are no images in the blog post then it falls back to the default thumbnail I've referenced in the 'og:image' tag.

Currently what happens is it only gives the option to use the default thumbnail and if I don't include the 'og:image' tag then it loads no thumbnail at all, instead of scraping the post for a blog image.

Has anyone encountered this before? What EE solutions, if any, are you using to bring in select images? Creating a separate channel field just for a thumbnail for every blog post seems overkill. Also, as it's blog post then all the data is in one channel field in a textarea so I can't pull a specific image out of it. 

<meta property="og:title" content="{title}"/>
{if facebook_description}
<meta property="og:description" content="{facebook_description}" />
{/if}
<meta property="og:image" content="http://www.client.com/thumbnail.jpg"/>   
<meta property="og:site_name" content="{site_name}"/>   
<meta property="og:url" content="{page_url}/" />
Improve this question
1
  • I tend to create a specific field for Open Graph image, or if i'm already creating a field for some kindof preview/leader image then I would use that. Sometimes you want the Open Graph image to be a bit more engaging when sharing an article than the image might need to be just for the article.
    – doubleplusgood
    Commented Apr 26, 2013 at 14:30

2 Answers 2

Reset to default
2

I implemented support for this in SEO Lite a while back. It takes a bit of config setup but after that it works excellent. Basically you map custom fields in the various field groups to the opengraph tags you'd like to use.

See example here https://gist.github.com/bjornbjorn/4039233

It will map fields from the News, Blog and Portfolio channels into {extra:} tags that can be used in the SEO Lite template. Let me know if you have any questions about the implementation:)

More about SEO Lite here: http://wedoaddons.com/addon/seo-lite

Improve this answer
0

I have run into this and it was driving me nuts. I wrote a snippet to handle what I needed based on the fieldtypes I was using. The users wanted it to be auto-"magic" and not require them to upload additional images or add further input. This had me scratching my head for some time. I ended up going through all of the templates for the various social media sites they were affiliated with and went through each API to build out custom "templates" for what they wanted on each site. After gathering the required fields and merging the like fields, I ended up with the below. I just add the snippet in the head with {snip-meta}.

Hope this helps...

    <!-- Geo Data -->
    <meta name="geo.position" content="my x,my y" />
    <meta name="geo.placename" content="City, ST" />
    <meta name="geo.region" content="US-ST" />

    <!-- Place this data between the <head> tags of your website -->
    <title>{title} - {if segment_1}{segment_1}{/if} - {if segment_2}{segment_2}{/if} - company name here</title>

    {if field_pair:total_rows > 0}
        <meta name="description" content="{exp:eehive_hacksaw chars = '150' append = '...'}{field_pair}{field_pair:field}{/field_pair}{/exp:eehive_hacksaw}" />
    {/if}
    {if field_pair:total_rows > 0}
        <meta name="description" content="{exp:eehive_hacksaw chars = '150' append = '...'}{field_pair}{field_pair:field}{/field_pair}{/exp:eehive_hacksaw}" />
    {/if}
    {if field_pair:total_rows > 0}
        <meta name="description" content="{exp:eehive_hacksaw chars = '150' append = '...'}{field_pair}{field_pair:field}{/field_pair}{/exp:eehive_hacksaw}" />
    {/if}

    <!-- Google Authorship and Publisher Markup -->
    <link rel="author" href="https://plus.google.com/member-id/posts"/>
    <link rel="publisher" href="https://plus.google.com/member-id"/>

    <!-- Schema.org markup for Google+ -->
    <a href="https://plus.google.com/member-id?rel=author" style="display:none;">Google+</a>
    <meta property="url" content="{current_url}" />
    <meta itemprop="name" content="{title} - {if segment_1}{segment_1}{/if} - {if segment_2}{segment_2}{/if} - company name here">
    <meta itemprop="datePublished" content="{entry_date format='%Y-%m-%dT%H:%i:%s%Q'}">

    {if field_pair:total_rows > 0}
        <meta itemprop="description" content="{exp:eehive_hacksaw chars = '150' append = '...'}{field_pair}{field_pair:field}{/field_pair}{/exp:eehive_hacksaw}">
    {/if}
    {if field_pair:total_rows > 0}
        <meta name="description" content="{exp:eehive_hacksaw chars = '150' append = '...'}{field_pair}{field_pair:field}{/field_pair}{/exp:eehive_hacksaw}" />
    {/if}
    {if field_pair:total_rows > 0}
        <meta name="description" content="{exp:eehive_hacksaw chars = '150' append = '...'}{field_pair}{field_pair:field}{/field_pair}{/exp:eehive_hacksaw}" />
    {/if}

    {if field_pair:total_rows > 0}
        {field_pair}
            {if field_pair:field}
                <meta itemprop="image" content="{field_pair:field}">
            {/if}
            {field_pair:field images_only="yes"}
                <meta itemprop="image" content="{field_pair:field}">
            {/field_pair:field}
        {/field_pair}
    {/if}
    {if field_pair:total_rows > 0}
        {field_pair}
            {if field_pair:field}
                <meta itemprop="image" content="{field_pair:field}">
            {/if}
        {/field_pair}
    {/if}
    {if field_pair:total_rows > 0}
        {field_pair}
            {if field_pair:field}
                <meta itemprop="image" content="{field_pair:field}">
            {/if}
            {field_pair:field images_only="yes"}
                <meta itemprop="image" content="{field_pair:field}">
            {/field_pair:field}
        {/field_pair}
    {/if}

    <!-- Twitter Card data -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@username">
    <meta name="twitter:title" content="{title} - {if segment_1}{segment_1}{/if} - {if segment_2}{segment_2}{/if} - company name here">

    {if field_pair:total_rows > 0}
        <meta name="twitter:description" content="{exp:eehive_hacksaw chars = '150' append = '...'}{field_pair}{field_pair:field}{/field_pair}{/exp:eehive_hacksaw}">
    {/if}
    {if field_pair:total_rows > 0}
        <meta name="description" content="{exp:eehive_hacksaw chars = '150' append = '...'}{field_pair}{field_pair:field}{/field_pair}{/exp:eehive_hacksaw}" />
    {/if}
    {if field_pair:total_rows > 0}
        <meta name="description" content="{exp:eehive_hacksaw chars = '150' append = '...'}{field_pair}{field_pair:field}{/field_pair}{/exp:eehive_hacksaw}" />
    {/if}

    <meta name="twitter:creator" content="@alamodeinc">

    <!-- Twitter summary card with large image must be at least 280x150px -->
    {if field_pair:total_rows > 0}
        {field_pair}
            {if field_pair:field}
                <meta name="twitter:image:src" content="{exp:low_replace find='/product_images/' replace='/product_images/_Twitter_Card_Image'}{field_pair:field}{/exp:low_replace}">
            {/if}
            {field_pair:field images_only="yes"}
                <meta name="twitter:image:src" content="{exp:low_replace find='/product_images/' replace='/product_images/_Twitter_Card_Image'}{field_pair:field}{/exp:low_replace}">
            {/field_pair:field}
        {/field_pair}
    {/if}
    {if field_pair:total_rows > 0}
        {field_pair}
            {if field_pair:field}
                <meta itemprop="image" content="{field_pair:field}">
            {/if}
        {/field_pair}
    {/if}
    {if field_pair:total_rows > 0}
        {field_pair}
            {if field_pair:field}
                <meta itemprop="image" content="{field_pair:field}">
            {/if}
            {field_pair:field images_only="yes"}
                <meta itemprop="image" content="{field_pair:field}">
            {/field_pair:field}
        {/field_pair}
    {/if}

    <meta name="twitter:domain" content="domain.com">

    <!-- Open Graph data -->
    <!-- Used by Facebook and Linked:In -->
    <meta property="og:title" content="{title} - {if segment_1}{segment_1}{/if} - {if segment_2}{segment_2}{/if} - company name here" />
    <meta property="og:type" content="article" />
    <meta property="og:url" content="{current_url}" />

    {if field_pair:total_rows > 0}
        {field_pair}
            {if field_pair:field}
                <meta itemprop="image" content="{field_pair:field}">
            {/if}
            {field_pair:field images_only="yes"}
                <meta itemprop="image" content="{field_pair:field}">
            {/field_pair:field}
        {/field_pair}
    {/if}
    {if field_pair:total_rows > 0}
        {field_pair}
            {if field_pair:field}
                <meta itemprop="image" content="{field_pair:field}">
            {/if}
        {/field_pair}
    {/if}
    {if field_pair:total_rows > 0}
        {field_pair}
            {if field_pair:field}
                <meta itemprop="image" content="{field_pair:field}">
            {/if}
            {field_pair:field images_only="yes"}
                <meta itemprop="image" content="{field_pair:field}">
            {/field_pair:field}
        {/field_pair}
    {/if}

    {if field_pair:total_rows > 0}
        <meta property="og:description" content="{exp:eehive_hacksaw chars = '150' append = '...'}{field_pair}{field_pair:field}{/field_pair}{/exp:eehive_hacksaw}" />
    {/if}
    {if field_pair:total_rows > 0}
        <meta name="description" content="{exp:eehive_hacksaw chars = '150' append = '...'}{field_pair}{field_pair:field}{/field_pair}{/exp:eehive_hacksaw}" />
    {/if}
    {if field_pair:total_rows > 0}
        <meta name="description" content="{exp:eehive_hacksaw chars = '150' append = '...'}{field_pair}{field_pair:field}{/field_pair}{/exp:eehive_hacksaw}" />
    {/if}

    <meta property="og:site_name" content="{site_label} - company name here" />
    <meta property="article:published_time" content="{entry_date format='%Y-%m-%dT%H:%i:%s%Q'}" />
    <meta property="article:modified_time" content="{edit_date format='%Y-%m-%dT%H:%i:%s%Q'}" />
    <meta property="article:section" content="Article Section" />
    <meta property="article:tag" content="Article Tag" />
    <meta property="fb:admins" content="admin-id" />

    <!-- Pinterest Article Pins - not picked up from earlier tags -->
    {exp:tagger:tags entry_id="{entry_id}"}
        <meta property="article:tag" content="{tagger:tag_name}" />
    {/exp:tagger:tags}
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.