FB OG:Image Tag in BuddyPress

Hi evanspress,

That’s a great suggestion!

The next update (2.6.0) will feature all kinds of author SEO features. I’ll be sure to include this one!

Until then, you could use the following code (untested!):

add_filter( 'the_seo_framework_og_image_after_featured', 'my_buddypress_profile_img' );
/**
 * Adjusts after Featured Image URL for BuddyPress profile images.
 *
 * @return string $url The Avatar URL.
 */
function my_buddypress_profile_img( $url = '' ) {

	if ( function_exists( 'bb_is_profile' ) && bb_is_profile() {
		//* We're on a profile page.
		if ( $id = bp_displayed_user_id() ) {
			/**
			 * We've found the displayed user ID. Fetch avatar URL.
			 * If no avatar is found, return empty string.
			 */
			$url = get_avatar_url( $id, array( 'size' => 512, 'default' = '' ) );
		}
	}

	return $url;
}

If you need information regarding implementing such filters, please take a look at this tutorial.

I hope this helps!

Let me know if you require any more assistance and I’ll be happy to get back to you :). Have a wonderful day!

Thanks for the quick response, but I placed the following code into my functions.php and it threw an error…

add_filter( 'the_seo_framework_og_image_after_featured', 'my_buddypress_profile_img' );

function my_buddypress_profile_img( $url = '' ) {

	if ( function_exists( 'bb_is_profile' ) && bb_is_profile() {
		if ( $id = bp_displayed_user_id() ) {
			$url = get_avatar_url( $id, array( 'size' => 512, 'default' = '' ) );
		}
	}

	return $url;
}

Hi evanspress,

I see the error, my mistake! It was a missing ) symbol.

add_filter( 'the_seo_framework_og_image_after_featured', 'my_buddypress_profile_img' );
/**
 * Adjusts after Featured Image URL for BuddyPress profile images.
 *
 * @return string $url The Avatar URL.
 */
function my_buddypress_profile_img( $url = '' ) {

	if ( function_exists( 'bb_is_profile' ) && bb_is_profile() ) {
		//* We're on a profile page.
		if ( $id = bp_displayed_user_id() ) {
			/**
			 * We've found the displayed user ID. Fetch avatar URL.
			 * If no avatar is found, return empty string.
			 */
			$url = get_avatar_url( $id, array( 'size' => 512, 'default' = '' ) );
		}
	}

	return $url;
}

I think this one works :).

Still erroring out for me but I ran it through https://www.phpcodechecker.com and there was a double equals missing after default and $url. So I put that in and it validated. Still no luck though. The URL in question here…

https://modelcompete.com/members/pampak/

Hi evanspress,

It’s 6:07 AM right here, maybe it was time for me to stop writing code :P.

Nevertheless, I activated BuddyPress to test it out myself. I’m sorry for the inconvenience.
The next mistake I made was using “=” rather than “=>”.

However, this wouldn’t work in the first place, as BuddyPress profile pages do not render an ID (and no image will be rendered at that point to save processing power). Also, the whole bb_is_profile() function was never found… ugh :).
To evade this, we need another few filters, and we need to do our own sanitation.

Here’s the working version, and this time it’s tested!
I also took the liberty to cache it, enjoy!

add_filter( 'the_seo_framework_twitterimage_output', 'my_buddypress_profile_img' );
add_filter( 'the_seo_framework_ogimage_output', 'my_buddypress_profile_img' );
/**
 * Adjusts after Featured Image URL for BuddyPress profile images.
 *
 * @staticvar string $iamge
 *
 * @return string $url The Escaped Avatar Image URL.
 */
function my_buddypress_profile_img( $image = '' ) {

	static $image = null;

	if ( isset( $image ) )
		return $image;

	if ( function_exists( 'bp_displayed_user_id' ) && $id = bp_displayed_user_id() ) {
		/**
		 * We're on a profile page and we've found the displayed user ID. Fetch avatar URL.
		 * If no avatar is found, return empty string.
		 */
		$image = get_avatar_url( $id, array( 'size' => 512, 'default' => false ) );
	}

	return $image = esc_url( $image );
}

add_filter( 'the_seo_framework_twittercard_output', 'my_twittercard_adjustment' );
/**
 * Adjusts Twitter Card type output when an image is found.
 *
 * @return string Twitter Card type
 */
function my_twittercard_adjustment( $type ) {

	if ( my_buddypress_profile_img() ) {
		//* Get default type from settings if image is found.
		return tsf_get_option( 'twitter_card' );
	} else {
		//* Evaluate further.
		return $type;
	}

}

add_filter( 'the_seo_framework_ogtype_output', 'my_ogtype_adjustment' );
/**
 * Adjusts OG Type output when an image is found.
 *
 * @return string OG type
 */
function my_ogtype_adjustment( $type ) {

	if ( my_buddypress_profile_img() ) {
		return 'profile';
	} else {
		//* Evaluate further.
		return $type;
	}

	return $type;
}

I hope this helps! ??

I seriously appreciate all your help but still not working. =(

It just keeps showing that header image.

Hi evanspress,

To me it looks like it’s all working with the example link you gave me :)!
Facebook, Twitter as well as your website might retain some cached versions.

Alas, the profile image I see there isn’t being shown in og:image, but rather the default Gravatar one. This means the user doesn’t have a WordPress.com network image.

How did you upload or allowed users to upload their profile picture?
From there we can fine-tune the solution :).

Thanks!

I’m going to have the blog owner setup another test account. I do appreciate all of your assistance. Do you take tips?

Hi evanspress,

Sounds great! Keep me posted :).

And yes I do, right here.

Thanks and have a wonderful day!

We setup another account and things have changed. This time it just outputs no image with the share request to Facebook. Which is honestly better than at least associating the wrong image.

Hi evanspress,

Thanks for the feedback. Did the blog owner took note of how the member images are added to the profiles?

Testing out the changes directly on Facebook doesn’t yield promised results, as Facebook has a stubborn caching system where you have little to no control over. It’s best to simply check out the generated code within the meta tags output by The SEO Framework.

Other than that, I’m wondering… are you using object caching?

I see a ridiculously low meta tag generation time, as well as incorrect title and description properties (they’re taken from the wrong member).

I believe the cache key generation for BuddyPress member pages need more refining (this is done by assumption) – or the object cache has to be switched off.

What I advice to do is to turn off object caching for The SEO Framework until I’ve sorted this out. You can do so with the following filter:

add_filter( 'the_seo_framework_use_object_cache', '__return_false' );

The performance impact is extremely minor and this will fix most meta tags from being incorrect on the profiles.

From there, testing should also be easier as you no longer need to flush your caches every time :).

If the description still holds the same for the members, I recommend filling in a manual one.

I hope this helps!

OK. I disabled it. Thanks for the tips. It is hosted on GoDaddy Managed WordPress Hosting for the record. It is actually a fairly good product but it is problematic with BuddyPress.

Anytime :).

It’s all looking great now with the descriptions and titles!

The only problem to solve now is: Where do we pull the image from?
Is the Extended Profile “Profile Photo” used (at the right side of the user edit screen)?

If that’s the case, I’ll see if I can adjust the code above to make it all work as expected.

If you are referring to the black and white that is part of the site design. The profile photo is actual BP photo. I’m assuming this Is a common issue with BP. Do you do side work? Sent you a donation btw. Not much but I have already integrated you plugin with 5 clients. I have a WP stack I use for all websites and plan installing yours on all projects. Never used an SEO framework previously honestly due to the overly complex setup. Not for me but for my users.

Hi evanspress,

Thank you so much for the donation! It’s really appreciated :).

It’s not a common issue with BuddyPress, it’s just another parameter to be checked.
I’ve adjusted the code to also support this BuddyPress upload, instead of only the Gravatar version:

add_filter( 'the_seo_framework_twitterimage_output', 'my_buddypress_profile_img' );
add_filter( 'the_seo_framework_ogimage_output', 'my_buddypress_profile_img' );
/**
 * Adjusts after Featured Image URL for BuddyPress profile images.
 *
 * @staticvar string $iamge
 *
 * @return string $url The Escaped Avatar Image URL.
 */
function my_buddypress_profile_img( $image = '' ) {

	static $image = null;

	if ( isset( $image ) )
		return $image;

	if ( function_exists( 'bp_displayed_user_id' ) && $id = bp_displayed_user_id() ) {
		if ( function_exists( 'bp_core_fetch_avatar' ) ) {
			$image = bp_core_fetch_avatar( array( 'item_id' => $id, 'type' => 'full', 'no_grav' => true, 'html' => false ) );
		}

		/**
		 * We're on a profile page and we've found the displayed user ID. Fetch avatar URL.
		 * If no avatar is found, return empty string.
		 */
		$image = $image ? $image : get_avatar_url( $id, array( 'size' => 512, 'default' => false ) );
	}

	return $image = esc_url( $image );
}

add_filter( 'the_seo_framework_twittercard_output', 'my_twittercard_adjustment' );
/**
 * Adjusts Twitter Card type output when an image is found.
 *
 * @return string Twitter Card type
 */
function my_twittercard_adjustment( $type ) {

	if ( my_buddypress_profile_img() ) {
		//* Get default type from settings if image is found.
		return tsf_get_option( 'twitter_card' );
	} else {
		//* Evaluate further.
		return $type;
	}

}

add_filter( 'the_seo_framework_ogtype_output', 'my_ogtype_adjustment' );
/**
 * Adjusts OG Type output when an image is found.
 *
 * @return string OG type
 */
function my_ogtype_adjustment( $type ) {

	if ( my_buddypress_profile_img() ) {
		return 'profile';
	} else {
		//* Evaluate further.
		return $type;
	}

	return $type;
}

I hope this helps! Good luck with the website and have a wonderful day :)!