Facebook OG Properties Function Image Issue WordPress
- SOLVED
On another post http://wpquestions.com/question/show/id/2394 I located code that did almost what I needed to do. I have users that upload images as attachments to posts. I would like for the facebook og:image call to get the attachment and then fall back to a default image if one doesn't exist. The first part works when an attachment is with the post but for posts with no images it doesn't fall back like the code is requesting.
I have tried every variation of code on the above URL with no 100% success. I do not use the featured thumbnail often so one of them didn't work at all. Another one kept pulling in the default backup image even when an attachment was present and finally the one below pulls in attachments but if none exist it will not proceed past the } else { statement to grab the backup default.
Help! :)
/**** ADD FB IMAGES***/
//Adding the Open Graph in the Language Attributes
function add_opengraph_doctype( $output ) {
return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"';
}
add_filter('language_attributes', 'add_opengraph_doctype');
//Lets add Open Graph Meta Info
function insert_fb_in_head() {
global $post;
if ( !is_singular()) //if it is not a post or a page
return;
echo '<meta property="fb:app_id" content="249871715080543" />';
echo '<meta property="fb:admins" content="tommy.white.iv"/>';
echo '<meta property="og:url" content="' . get_permalink() . '"/>';
echo '<meta property="og:locale" content="en_US" />';
echo '<meta property="og:title" content="' . get_the_title() . '"/>';
echo '<meta property="og:type" content="article"/>';
echo '<meta property="og:site_name" content="ChattanoogaCity"/>';
$images =& get_children( 'post_type=attachment&post_mime_type=image&posts_per_page=1&post_parent=' . get_the_id() );
foreach( $images as $image_id => $image_post ) :
if( !empty( $images ) ) {
$thumbnail_src = wp_get_attachment_image_src( $image_id, 'medium', true );
echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '" alt="' . get_the_title( $image_id ) . '"/>';
} else {
$default_image="http://www.mysitexoxoxox.com/fb_logo.png"; //replace this with a default image on your server or an image in your media library
echo '<meta property="og:image" content="' . $default_image . '"/>';
}
endforeach;
echo "\n";
}
add_action( 'wp_head', 'insert_fb_in_head', 5 );
Answers (3)
Martin Pham answers:
try this
function _get_image_id( $index = 0 ) {
global $post;
$image_ids = array_keys(
get_children(
array(
'post_parent' => $post->ID,
'post_type' => 'attachment',
'post_mime_type' => 'image',
'orderby' => 'menu_order',
'order' => 'ASC',
)
)
);
if ( isset( $image_ids[$index] ) )
return $image_ids[$index];
return false;
}
function get_att_images($args = array()) {
global $post;
$defaults = array(
'format' => 'url',
'size' => 'full',
'num' => 0,
'attr' => '',
);
$args = wp_parse_args( $args, $defaults );
if ( has_post_thumbnail() && ( 0 === $args['num'] ) ) {
$id = get_post_thumbnail_id();
$html = wp_get_attachment_image( $id, $args['size'], false, $args['attr'] );
list( $url ) = wp_get_attachment_image_src( $id, $args['size'], false, $args['attr'] );
} else {
$id = _get_image_id( $args['num'] );
$html = wp_get_attachment_image( $id, $args['size'], false, $args['attr'] );
list( $url ) = wp_get_attachment_image_src( $id, $args['size'], false, $args['attr'] );
}
$src = str_replace( home_url(), '', $url );
if ( 'html' === strtolower( $args['format'] ) )
$output = $html;
elseif ( 'url' === strtolower( $args['format'] ) )
$output = $url;
else
$output = $src;
if ( empty( $url ) ) $output = false;
return $output;
}
function insert_fb_in_head() {
global $post;
if ( !is_singular()) //if it is not a post or a page
return;
echo '<meta property="fb:app_id" content="249871715080543" />';
echo '<meta property="fb:admins" content="tommy.white.iv"/>';
echo '<meta property="og:url" content="' . get_permalink() . '"/>';
echo '<meta property="og:locale" content="en_US" />';
echo '<meta property="og:title" content="' . get_the_title() . '"/>';
echo '<meta property="og:type" content="article"/>';
echo '<meta property="og:site_name" content="ChattanoogaCity"/>';
$post_thumb = get_att_images();
echo '<meta property="og:image" content="' .( ($post_thumb) ? $post_thumb : 'http://www.mysitexoxoxox.com/fb_logo.png' ). '" />';
echo "\n";
}
add_action( 'wp_head', 'insert_fb_in_head', 5 );
twdesigns comments:
Martin!
That fixed my problem and now the attachments are selected first with a fall back to a static image if none is available.
THANK YOU!
Navjot Singh answers:
Try this plugin: [[LINK href="http://wordpress.org/extend/plugins/facebook-like-thumbnail/"]]Facebook Like Thumbnail[[/LINK]]
twdesigns comments:
Ty for the suggestion but I am not looking to use plugins for various reasons :) But ty again for the suggestion.
Daniel answers:
TWDesigns, you need to put that default image in your active theme's folder in FTP if you don't want the client to delete it. Make a folder: img
File directory: wp-content/themes/theme-folder-name/img/
And to get it: src="<?php bloginfo('template_directory'); ?>/img/fb_logo.png"
<strong>Replace:</strong>
} else {
$default_image="http://www.mysitexoxoxox.com/fb_logo.png"; //replace this with a default image on your server or an image in your media library
echo '<meta property="og:image" content="' . $default_image . '"/>';
}
<strong>With:</strong>
} else {
$default_image="<?php bloginfo('template_directory'); ?>/img/fb_logo.png"; //replace this with a default image on your server or an image in your media library
echo '<meta property="og:image" content="' . $default_image . '"/>';
}
Let me know if you need more help.
twdesigns comments:
That bit of code was actually my fault and I should have left the original path in there as I had it correct. As stated in my original post I could get it to work both ways at different times but never working together. But thank you for pointing that out :)