Ask your WordPress questions! Pay money and get answers fast! (more info)

Need a bit of a hand... WordPress

  • REFUNDED

I had an issue with getting the correct ogg info to be sent to Facebook. Now I have an issue or the image size being pulled being the incorrect size.

Following Navjot Singh's advice and guidance I was able to solve the issue pretty quickly as he walked me through it. Thank Navjot.

Navjot led me to this article [[LINK href="http://webgilde.com/en/wordpress-seo-facebook-image-open-graph/"]][[/LINK]]. It looks to be a pretty straight forward answer and pretty simple solution and from the comments pretty successful.

I've cut and pasted the snippets as suggested in my themes/functions.php file and rerun the thumb regeneration. As it ran the regeneration I didn't see the size suggested, 600, 315.

Looking further at the attached meta data it appears that there IS a size for Facebook and one side of each image is 315 so It's properly rendered and created the image. The problem is that it isn't sending 'that' image to Facebook.

<em>Part of my function.php file</em>


// exterior plugins
if(!class_exists('ReallySimpleCaptcha') && (get_option(THEME_SHORT_NAME.'_enable_comment_captcha', 'enable') == 'enable')){
$temp_root = get_root_directory('include/plugin/really-simple-captcha/really-simple-captcha.php');
include_once($temp_root . 'include/plugin/really-simple-captcha/really-simple-captcha.php'); // capcha comment plugin class
$temp_root = get_root_directory('include/plugin/really-simple-captcha/cbnet-really-simple-captcha-comments.php');
include_once($temp_root . 'include/plugin/really-simple-captcha/cbnet-really-simple-captcha-comments.php'); // capcha comment plugin
}

if(!class_exists('Filosofo_Custom_Image_Sizes')){
$temp_root = get_root_directory('include/plugin/filosofo-image/filosofo-custom-image-sizes.php');
include_once($temp_root . 'include/plugin/filosofo-image/filosofo-custom-image-sizes.php'); // Custom image size plugin

}

$temp_root = get_root_directory('include/plugin/dropdown-menus.php');
include_once($temp_root . 'include/plugin/dropdown-menus.php'); // Custom dropdown menu
$temp_root = get_root_directory('include/plugin/description-menu.php');
include_once($temp_root . 'include/plugin/description-menu.php'); // Description menu

// unregister all widgets
function unregister_default_widgets() {
unregister_widget('WP_Widget_Pages');
unregister_widget('WP_Widget_Calendar');
unregister_widget('WP_Widget_Archives');
unregister_widget('WP_Widget_Links');
unregister_widget('WP_Widget_Meta');
unregister_widget('WP_Widget_Search');
unregister_widget('WP_Widget_Text');
unregister_widget('WP_Widget_Categories');
unregister_widget('WP_Widget_Recent_Posts');
unregister_widget('WP_Widget_Recent_Comments');
unregister_widget('WP_Widget_RSS');
unregister_widget('WP_Widget_Tag_Cloud');
unregister_widget('Twenty_Eleven_Ephemera_Widget');
}
add_action('widgets_init', 'unregister_default_widgets', 11);

add_filter('the_content', 'my_addlightboxrel');
function my_addlightboxrel($content) {
global $post;
$pattern ="/<a(.*?)href=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
$replacement = '<a$1href=$2$3.$4$5 rel="lightbox" title="'.$post->post_title.'"$6>';
$content = preg_replace($pattern, $replacement, $content);
return $content;
}

if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'facebook', 600, 315 );
}

add_filter('wpseo_opengraph_image_size', 'mysite_opengraph_image_size');
function mysite_opengraph_image_size($val) {
return ' ';
}
?>


<strong>Image metadata:</strong>
'facebook' =>
array (
'file' => 'black_epc_8cognac-315x315.jpg',
'width' => 315,
'height' => 315,
'mime-type' => 'image/jpeg',
),


Anyone with some ideas?

Thanks in advance,
Doug

Answers (2)

2014-02-02

Sabby Sam answers:

Hi,
Try this plugin now and it should work.

http://wordpress.org/plugins/simple-image-sizes/

Please read the instruction before using.
I hope this will solve.


Doug Montgomery comments:

Thanks but I'm not interested in another thumbnail regeneration program. The thumbnails are created it's just that the wrong image is being sent to FB.


Doug Montgomery comments:

Thanks but I'm not interested in another thumbnail regeneration program. The thumbnails are created it's just that the wrong image is being sent to FB.


Doug Montgomery comments:

Not sure why that posted twice...but I also notice that that particular plugin hasn't been updated in 8 months and has a couple of horror stories in the comments. Something I'm not wanting to 'test the waters' with.


Sabby Sam comments:

Hi Doug,

See if you add this ( add_image_size( 'facebook', 600, 315 );) then it will not work unless you regenerate thumbnails.
Please try this plugin and I am 100% sure it will work. You need to regenerate thumbnails first then only it will work.


Doug Montgomery comments:

I did regenerate the thumbnails after making the change. All images have the facebook array in their image metadata. Also in the uploads folders there is a new thumb. Most of them are 315x315 because they are square but this is the regenerated thumbnail.

2014-02-02

Bob answers:

There is one question here is, If you have regenerated all images, do you have images available with 600 x 315 size?

One problem in your code


add_filter('wpseo_opengraph_image_size', 'mysite_opengraph_image_size');
function mysite_opengraph_image_size($val) {
return ' ';
}


in above code you are returning nothing. actually this code should be something like this


add_filter('wpseo_opengraph_image_size', 'mysite_opengraph_image_size');
function mysite_opengraph_image_size($val) {
return 'facebook';
}


Doug Montgomery comments:

My images aren't all exactly 600x315 because I did it proportionally. But there are new images created where at least one side is 315. I'm fixing the code error now. I'll keep you posted. THanks


Doug Montgomery comments:

Just checked the code... That is part you mention is there...it was a bad cut and paste on my part.


if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'facebook', 600, 315 );
}

add_filter('wpseo_opengraph_image_size', 'mysite_opengraph_image_size');
function mysite_opengraph_image_size($val) {
return 'facebook';
}


Bob comments:

In your site I have randomly select one image try to find image with 600x315 size. That means regeneration of image is done and you have image with proper size.

http://unglove.me/wp-content/uploads/2013/11/Fingerwraps-black-600x315.jpg

not it is possible that seo plugin is taking image from content in our case woo commerce thumbnail.
to force it not to take image from there.


// do not take image from content
add_filter('wpseo_pre_analysis_post_content', 'mysite_opengraph_content');
function mysite_opengraph_content($val) {
return '';
}


You can also try below code to force wp seo to set particular size image


// checking if there is image with -600x in name/url
add_filter('wpseo_opengraph_image', 'mysite_opengraph_single_image_filter');
function mysite_opengraph_single_image_filter($val) {
if ( preg_match('/-600x/', $val) ) return $val;
}


Bob comments:

add above two code in functions.php file and check what happans.


Doug Montgomery comments:

I added the second code and changed -600x to-315y and it worked....once.

I've since pulled the code, resaved and tried to repeat the problem and the fix. Now the fix isn't working. Is there a cache in FB? This is weird....worked only once.

I've since added both code snippets you suggest and no change. I'm baffled


Doug Montgomery comments:

Here's my funtions.php file...

<?php
/*
* Goodlayers Function File
* ---------------------------------------------------------------------
* This file include all of important function and features of the theme
* to make it available for later use.
* ---------------------------------------------------------------------
*/

// constants
define('THEME_SHORT_NAME','kpw');
define('THEME_FULL_NAME','King Power');
define('GOODLAYERS_PATH', get_template_directory_uri() );
define('SERVER_PATH', get_template_directory() );
define('AJAX_URL', admin_url('admin-ajax.php') );
define('FONT_SAMPLE_TEXT', 'Sample Font'); // sample font text of the goodlayers backoffice panel

// constants from user settings
$gdl_date_format = get_option(THEME_SHORT_NAME.'_default_date_format','d M Y');
$gdl_widget_date_format = get_option(THEME_SHORT_NAME.'_default_widget_date_format','d M Y');

$gdl_admin_translator = get_option(THEME_SHORT_NAME.'_enable_admin_translator','enable');
$gdl_is_responsive = (get_option(THEME_SHORT_NAME.'_enable_responsive','enable') == 'enable')? true: false;
$gdl_word_excerpt = ( get_option(THEME_SHORT_NAME.'_space_excerpt','enable') == 'enable' )? true : false;

$gdl_element_id = 0;
$gdl_item_row_size = 0;

$default_post_sidebar = get_option(THEME_SHORT_NAME.'_default_post_sidebar','post-no-sidebar');
$default_post_sidebar = str_replace('post-', '', $default_post_sidebar);
$default_post_left_sidebar = get_option(THEME_SHORT_NAME.'_default_post_left_sidebar','');
$default_post_right_sidebar = get_option(THEME_SHORT_NAME.'_default_post_right_sidebar','');

// for multisite file
$gdl_custom_stylesheet_name = 'style-custom.css';
if( is_multisite() && get_current_blog_id() > 1 ){
$gdl_custom_stylesheet_name = 'style-custom' . get_current_blog_id() . '.css';
}

// get the path for the file ( to support child theme )
if( !function_exists('get_root_directory') ){
function get_root_directory( $path ){
if( file_exists( get_stylesheet_directory() . '/' . $path ) ){
return get_stylesheet_directory() . '/';
}else{
return SERVER_PATH . '/';
}
}
}

// include the image size in the theme
$temp_root = get_root_directory('gdl-variable.php');
include_once($temp_root . 'gdl-variable.php'); // misc function to use at font-end

$temp_root = get_root_directory('include/include-script.php');
include_once($temp_root . 'include/include-script.php'); // include all javascript and style in to the theme
$temp_root = get_root_directory('include/plugin/utility.php');
include_once($temp_root . 'include/plugin/utility.php'); // utility function
$temp_root = get_root_directory('include/function-regist.php');
include_once($temp_root . 'include/function-regist.php'); // registered wordpress function
$temp_root = get_root_directory('include/plugin/fontloader.php');
include_once($temp_root . 'include/plugin/fontloader.php'); // load necessary font
$temp_root = get_root_directory('include/goodlayers-option.php');
include_once($temp_root . 'include/goodlayers-option.php'); // goodlayers panel
$temp_root = get_root_directory('include/plugin/shortcode-generator.php');
include_once($temp_root . 'include/plugin/shortcode-generator.php'); // shortcode
$temp_root = get_root_directory('include/script-custom.php');
include_once($temp_root . 'include/script-custom.php'); // this file will include the script in footer
$temp_root = get_root_directory('include/style-custom.php');
include_once($temp_root . 'include/style-custom.php'); // include this file to write style-custom.css file
$temp_root = get_root_directory('include/theme-customizer.php');
include_once($temp_root . 'include/theme-customizer.php'); // include this file to add color customization

$temp_root = get_root_directory('include/plugin/misc.php');
include_once($temp_root . 'include/plugin/misc.php'); // misc function to use at font-end
$temp_root = get_root_directory('include/plugin/page-item.php');
include_once($temp_root . 'include/plugin/page-item.php'); // organize page item element
$temp_root = get_root_directory('include/plugin/blog-item.php');
include_once($temp_root . 'include/plugin/blog-item.php'); // organize blog item element
$temp_root = get_root_directory('include/plugin/portfolio-item.php');
include_once($temp_root . 'include/plugin/portfolio-item.php'); // organize port/page element
$temp_root = get_root_directory('include/plugin/comment.php');
include_once($temp_root . 'include/plugin/comment.php'); // function to get list of comment
$temp_root = get_root_directory('include/plugin/pagination.php');
include_once($temp_root . 'include/plugin/pagination.php'); // page divider plugin
$temp_root = get_root_directory('include/plugin/social-shares.php');
include_once($temp_root . 'include/plugin/social-shares.php'); // page divider plugin

// dashboard option - custom post type
$temp_root = get_root_directory('include/meta-template.php');
include_once($temp_root . 'include/meta-template.php'); // template for post portfolio and gallery
$temp_root = get_root_directory('include/post-option.php');
include_once($temp_root . 'include/post-option.php'); // meta of post post_type
$temp_root = get_root_directory('include/page-option.php');
include_once($temp_root . 'include/page-option.php'); // meta of page post_type
$temp_root = get_root_directory('include/portfolio-option.php');
include_once($temp_root . 'include/portfolio-option.php'); // meta of portfolio post_type
$temp_root = get_root_directory('include/testimonial-option.php');
include_once($temp_root . 'include/testimonial-option.php'); // meta of testimonial post_type
$temp_root = get_root_directory('include/price-table-option.php');
include_once($temp_root . 'include/price-table-option.php'); // meta of price table post_type
$temp_root = get_root_directory('include/gallery-option.php');
include_once($temp_root . 'include/gallery-option.php'); // meta of gallery post_type
$temp_root = get_root_directory('include/personnal-option.php');
include_once($temp_root . 'include/personnal-option.php'); // meta of personnal post_type

// include custom widget
$temp_root = get_root_directory('include/plugin/custom-widget/custom-blog-widget.php');
include_once($temp_root . 'include/plugin/custom-widget/custom-blog-widget.php');
$temp_root = get_root_directory('include/plugin/custom-widget/custom-port-widget.php');
include_once($temp_root . 'include/plugin/custom-widget/custom-port-widget.php');
$temp_root = get_root_directory('include/plugin/custom-widget/custom-port-widget-2.php');
include_once($temp_root . 'include/plugin/custom-widget/custom-port-widget-2.php');
$temp_root = get_root_directory('include/plugin/custom-widget/popular-post-widget.php');
include_once($temp_root . 'include/plugin/custom-widget/popular-post-widget.php');
$temp_root = get_root_directory('include/plugin/custom-widget/contact-widget.php');
include_once($temp_root . 'include/plugin/custom-widget/contact-widget.php');
$temp_root = get_root_directory('include/plugin/custom-widget/flickr-widget.php');
include_once($temp_root . 'include/plugin/custom-widget/flickr-widget.php');
$temp_root = get_root_directory('include/plugin/custom-widget/twitter-widget.php');
include_once($temp_root . 'include/plugin/custom-widget/twitter-widget.php');
$temp_root = get_root_directory('include/plugin/custom-widget/personnal-widget.php');
include_once($temp_root . 'include/plugin/custom-widget/personnal-widget.php');

// exterior plugins
if(!class_exists('ReallySimpleCaptcha') && (get_option(THEME_SHORT_NAME.'_enable_comment_captcha', 'enable') == 'enable')){
$temp_root = get_root_directory('include/plugin/really-simple-captcha/really-simple-captcha.php');
include_once($temp_root . 'include/plugin/really-simple-captcha/really-simple-captcha.php'); // capcha comment plugin class
$temp_root = get_root_directory('include/plugin/really-simple-captcha/cbnet-really-simple-captcha-comments.php');
include_once($temp_root . 'include/plugin/really-simple-captcha/cbnet-really-simple-captcha-comments.php'); // capcha comment plugin
}

if(!class_exists('Filosofo_Custom_Image_Sizes')){
$temp_root = get_root_directory('include/plugin/filosofo-image/filosofo-custom-image-sizes.php');
include_once($temp_root . 'include/plugin/filosofo-image/filosofo-custom-image-sizes.php'); // Custom image size plugin

}

$temp_root = get_root_directory('include/plugin/dropdown-menus.php');
include_once($temp_root . 'include/plugin/dropdown-menus.php'); // Custom dropdown menu
$temp_root = get_root_directory('include/plugin/description-menu.php');
include_once($temp_root . 'include/plugin/description-menu.php'); // Description menu

// unregister all widgets
function unregister_default_widgets() {
unregister_widget('WP_Widget_Pages');
unregister_widget('WP_Widget_Calendar');
unregister_widget('WP_Widget_Archives');
unregister_widget('WP_Widget_Links');
unregister_widget('WP_Widget_Meta');
unregister_widget('WP_Widget_Search');
unregister_widget('WP_Widget_Text');
unregister_widget('WP_Widget_Categories');
unregister_widget('WP_Widget_Recent_Posts');
unregister_widget('WP_Widget_Recent_Comments');
unregister_widget('WP_Widget_RSS');
unregister_widget('WP_Widget_Tag_Cloud');
unregister_widget('Twenty_Eleven_Ephemera_Widget');
}
add_action('widgets_init', 'unregister_default_widgets', 11);

add_filter('the_content', 'my_addlightboxrel');
function my_addlightboxrel($content) {
global $post;
$pattern ="/<a(.*?)href=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
$replacement = '<a$1href=$2$3.$4$5 rel="lightbox" title="'.$post->post_title.'"$6>';
$content = preg_replace($pattern, $replacement, $content);
return $content;
}

// add facebook image

if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'facebook', 600, 315 );
}

add_filter('wpseo_opengraph_image_size', 'mysite_opengraph_image_size');

function mysite_opengraph_image_size($val) {

return 'facebook';

}

// do not take image from content

add_filter('wpseo_pre_analysis_post_content', 'mysite_opengraph_content');

function mysite_opengraph_content($val) {

return '';

}

// checking if there is image with -315y in name/url

add_filter('wpseo_opengraph_image', 'mysite_opengraph_single_image_filter');

function mysite_opengraph_single_image_filter($val) {

if ( preg_match('/-315y/', $val) ) return $val;

}
?>


Bob comments:

you can not use -315y there will be no such name in url
instead of you should write x315

currently when I see view source of your one product I do not get og tag for image. it was there last time.
it might be because of above change.

sometime whatever we do facebook can not find image from post.

after doing change try to view source of your product and find if it is adding og:image tag properly?

if it do not show such tag then remove last chunk of code


add_filter('wpseo_opengraph_image', 'mysite_opengraph_single_image_filter');

function mysite_opengraph_single_image_filter($val) {

if ( preg_match('/x315/', $val) ) return $val;

}

.


Doug Montgomery comments:

Ok, I've messed around a bit with this number.... No matter what I change it too it won't pull any image unless it has this value /x315/ and then it still pulls the biggest image available.

Here's an index of images
http://unglove.me/wp-content/uploads/2013/11/


Doug Montgomery comments:

And thanks for the wake up call...I've been using Facebook to test it instead of looking at the source...much quicker that is...duh


Bob comments:

I am not able to see any og:image tag in your view source. please remove last code so that i can get image.

and you have many images which name has x315 so if any image is there on available page then it may take that image as like 315x315 image or 427x315 image.


Doug Montgomery comments:

Ok..I changed it


Doug Montgomery comments:

Ok...I just noticed something....

All my "featured" images have an image that is 600x315 and they are cropped. The other images didn't get the 600x315 thumb, not in this folder anyways...

http://unglove.me/wp-content/uploads/2013/11/

Should I maybe just delete the 600x315 images? Most all of my images are square.


Bob comments:

okay now your post and go:image tag.

I tried to post it on facebook and found that facebook is cropping it by it self to display on timeline.

and it is taking 600x315 image because of the code that we set.

add_filter('wpseo_opengraph_image_size', 'mysite_opengraph_image_size');
function mysite_opengraph_image_size($val) {
return 'facebook';
}


I think this is the way it should work. and it's working but facebook is cropping it while displaying on timeline.


Doug Montgomery comments:

I probably should have asked this before...but why the 600 image? I got that number from the post I mentioned above, that was their recommendation but isn't 600 a bit large? What if I were to delete those 600 images, would it pull the 315?


Bob comments:


add_filter('wpseo_pre_analysis_post_content', 'mysite_opengraph_content');
function mysite_opengraph_content($val) {
return '';
}


this code help to not send any other image from content to facebook. so combination of above and this code helps your page to send only necessary image.

I am going to sleep now so will not be available for few hours. Hope you get your solution.


Doug Montgomery comments:

Ok...here is something for you...

I've deleted the photo 600x315.
When I then put the url in the browser it can not find it, as it should be that way.

When I refresh the page it recreates the cropped image at 600x315


Doug Montgomery comments:

Thank you for all your help. Get some sleep. I'll be up for the next 9hrs in front of the computer...watching the Superbowl here in a few hours.


Doug Montgomery comments:

Still trying to get this resolved.