0

I want to use the post author's avatar if available as the post preview image for Facebook shared posts. If that is not available next would be a featured image and then a default image as a fallback. Is there a plugin or function that can achieve this?

The Yoast SEO plugin and many others can insert a default image, but I have not been able to find one that can pull the image from the author's avatar.

*note, I am also using Simple Local Avatars for users that do not have avatars associated with their email

  • Which author's avatar? The author of the facebook post? – Ralf912 May 10 '13 at 4:58
  • I've edited the question to be more clear. I am talking about the post author's avatar from the author ID, not their facebook profile. – Drai May 10 '13 at 14:29
1

From your comments, it seems you want to replace the post preview on facebook. This could be hard, because you try to modify the behavior of another webpage. With the opengraph protocol it can be done.

add_action( 'wp_head', 'get_facebook_meta_tags', 10, 0 );

function get_facebook_meta_tags() {
    global $post;

    // bail if the post is not in single view
    if ( ! is_single() )
        return;

    // get the url from post authors avatar (if available) or the url of post thumbnail
    // bails if no image was found
    $img_url = set_facebook_preview_image();
    if ( empty( $img_url) )
        return;

    // set description. use the first 97 chars from post excerpt (if available) or post content (alternativly)
    // add '...' to description
    $description = ( ! empty( $post->post_excerpt ) ) ? $post->post_excerpt : $post->post_content;
    if ( strlen( $description ) > 100 )
        $description = substr( $description, 0, 97 ) . '...';

    // create meta tags
    $format = '
    <meta property="og:title" content="%s" />
    <meta property="og:type" content="article" />
    <meta property="og:url" content="%s" />
    <meta property="og:image" content="%s" />
    <meta property="og:site_name" content="%s"/>
    <meta property="og:description" content="%s" />';

    printf(
        $format,
        esc_attr( $post->post_title ),
        esc_attr( get_permalink( $post->ID ) ),
        esc_attr( $img_url ),
        esc_attr( get_bloginfo( 'name', 'raw') ),
        esc_attr( $description )
    );

}


function set_facebook_preview_image() {
    global $post;
    if ( ! is_object( $post ) || empty( $post ) )
        return false;

    // get the autor id and url from authors avatar (if available)
    // add a filter on get_avatar. this filter returns an empty string if a default avatar is returned
    add_filter( 'get_avatar', 'no_avatar_for_fb_preview_image', 0, 5 );
    $author_id = isset( $post->post_author ) ? $post->post_author : '';
    if ( empty( $author_id) )
        return false;
    $author_avatar_html = get_avatar( $author_id );
    // do not forget to remove the filter!!
    remove_filter( 'get_avatar', 'no_avatar_for_fb_preview_image', 0, 5 );

    // grab avatar url from avatar html string
    if ( ! empty( $author_avatar_html ) ) {
        preg_match( '#(?<=src\=["|\']).+(?=["|\'](\s|\/\>))#Uuis', $author_avatar_html, $url );
        $author_avatar_url = ( isset( $url[0] ) && ! empty( $url[0] ) ) ? $url[0] : '';
    }

    // get the url fromj post thumbnail
    $post_thumb_url  = wp_get_attachment_url( get_post_thumbnail_id( $post->ID ) );

    // set url to author avatar url with fallback to post thumbnail url
    $img_url = '';
    if ( ! empty( $author_avatar_url ) )
        $img_url = $author_avatar_url;

    if ( empty( $img_url ) && ! empty( $post_thumb_url ) )
        $img_url = $post_thumb_url;

    return $img_url;
}

function no_avatar_for_fb_preview_image( $avatar, $id_or_email, $size, $default, $alt ) {
    if ( ! empty( $default ) )
        return '';
}

The first function hook into wp_head and checks if the page is a single view. If so, it try to fetch a image url (post thumbnail or author avatar url). If it can fetch an url, it will display the needed meta tags.
The second function grabs the avatar url and post thumbnail url. It uses a filter for the case a user does not have an avatar. In this case, it returns an empty string and the url of the post thumbnail will be returned.

0

This function extract the author from a facebook post link and get the url to the authors facebook avatar

function get_fb_avatarurl_from_fb_post( $fb_post_link ) {

    $avatar_template = 'http://graph.facebook.com/%username%/picture';
    $user            = '';
    $avatar_url      = false;

    $parsed_url = parse_url( $fb_post_link );

    if ( isset( $parsed_url['path'] ) ) {
        $path = trim( $parsed_url['path'], '/' );
        preg_match( '#^.+/#Uuis', $path, $user );

        if ( ! empty( $user ) && isset( $user[0] ) )
            $avatar_url = str_replace( '%username%', trim( $user[0], '/' ), $avatar_template );
    }

    return $avatar_url;
}

The function expect a link in the format https://www.facebook.com/the.facebook.post.author/posts/123456789123456

To display the facebook avatar or the post thumbnail, you can use this code snippet

global $post;
$avatar_img_url = get_fb_avatarurl_from_fb_post( [the facebook post url] );
$post_img_html  = get_the_post_thumbnail( $post->ID, 'thumbnail' );

if ( empty( $post_img_html ) )
    $post_img_html = '<img src="" />'; // modify the html to whatever you want

if ( ! empty( $avatar_img_url ) )
    $post_img_html = preg_replace( '#(?<=src\=["|\']).+(?=["|\'](\s|\/\>))#Uuis', $avatar_img_url, $post_img_html );

echo $post_img_html;

I don't know from where you get the facebook post link, but I think you already got it anywhere. The code snippet first try to get the fb avatar url. Then it try to get the post thumbnail. get_the_post_thumbnail() gives you a complete html code like <img width="150" height="150" src="[some url]" class="attachment-thumbnail wp-post-image" alt="Uploaded image your title here" />.
If no post thumbnail is available, a html template is used (you have to edit it). If a post thumbnail is available and a fb avatar url, the source of the image is replaced with the fb avatar url. If a post thumbnail is available, but no fb avatar url, the post thumbnail is displayed.

If you want to modify the alt-attribute also, you can extend the if-statement

if ( empty( $post_img_html ) )
    $post_img_html = '<img src="" alt="" />';

if ( ! empty( $avatar_img_url ) ) {
    $fb_alt_attrb = 'The new text for alt attrb if a fb avatar is displayed';
    $post_img_html = preg_replace( '#(?<=src\=["|\']).+(?=["|\'](\s|\/\>))#Uuis', $avatar_img_url, $post_img_html );
    $post_img_html = preg_replace( '#(?<=alt\=["|\']).+(?=["|\'](\s|\/\>))#Uuis', $fb_alt_attrb, $post_img_html );
}

I hope it will help you.

Edit This will change the post thumbnail / featured image with the facebook avatar.

  • Hi @Ralf912 , to be clear I don't want to get their Facebook profile pic, but their Wordpress avatar. so when a post is shared on facebook it will be used as the featured image. Is that what you have given me here? – Drai May 10 '13 at 11:27
  • No, this will replace the post thumbnail (featured image) with a facebook avatar. You want the WP avatar as thumbnail on facebook? – Ralf912 May 10 '13 at 11:55
  • yes, instead of the featured image from the post, I want the author photo to appear when a post is shared. – Drai May 10 '13 at 14:23
  • See my other answer. It replace the post thumbnail with teh authors avatar. Not in the post itself, in the preview image on facebook. – Ralf912 May 10 '13 at 15:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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