Sharing profile with right description and image WordPress
- SOLVED
Hi,
I want members of my site be able to share their profile on social media. That problem sorted out by using a plugin. The real problem is that their profile photo is random added by open graph, but I'm getting the right name but no description. So I want:
A custom code:
That bring the right profile photo of the member.
Target right description of the member
and additional copyright info in the description.
We are using buddypress and the share shortcode is added to member-header.php
I found a thread in the buddypress forum having exactly the same problem as me:
https://buddypress.org/support/topic/facebook-share-button-in-profile/:
So, I don't need help to make the button as that is solved. Is getting the right profile photo and description.
I'll send the link you the link to the site on pm, just let me know.
Answers (4)
Dbranes answers:
Hi, I guess you need the Facebook open graph meta, something like this (totally untested):
add_action('wp_head', 'wpq_facebook_meta' );
function wpq_facebook_meta() {
if( bp_is_user_profile() ){
$img_src = bp_get_displayed_user_avatar( array( 'type' => 'large', 'html' => false ) );
$ud = get_userdata( bp_displayed_user_id() );
$title = $ud->display_name;
$description = $ud->user_description;
$url = bp_get_displayed_user_link();
$site_name = get_bloginfo( 'name' );
?>
<meta property="og:title" content="<?php echo esc_attr( $title ); ?>"/>
<meta property="og:image" content="<?php echo esc_attr( $img_src );?>"/>
<meta property="og:description" content="<?php echo esc_attr( $description ); ?>"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="<?php echo esc_attr( $url ); ?>"/>
<meta property="og:site_name" content="<?php echo esc_attr( $site_name ); ?>"/>
<?php
}
}
where you might have to adjust this further to your needs.
Veritus comments:
I'll test this and see what happens..
Dbranes comments:
Hi Felipe, any luck?
Veritus comments:
It work in a way but don't in another way.. Bob helped me out and did some custom work. The problem is Facebook requires a min 200x200 image. I have set it to that. But I won't refereed to it when you click the share button and takes another picture. Then when you paste it on facebook. It takes the right picture of the profile. Hehe.. So it's a very strange behaviour. If you want to have a link to see it. I can send you that on pm.
Veritus comments:
Other problems is when sharing from image, it takes the profile photo. We must add an exception that excludes the gallery. We can talk about it tomorrow.
Bob answers:
Have you tried with bigger image?
Veritus comments:
I tested at max with 250x250 px, but showing 120px on the page.
Veritus comments:
So it is the same problem but showing the correct image when posting on facebook but not when you click the button on sharing to facebook.
Veritus comments:
Hi Bob,
function __construct() {
$essb_options = EasySocialShareButtons_Options::get_instance();
$this->options = $essb_options->options;
$this->loadDefaultFromOptions();
if ($this->sso_active) {
add_filter ( 'language_attributes', array ($this, 'insertLanguageAttributes' ) );
if(! strpos($_SERVER['REQUEST_URI'],"members") )
add_action ( 'wp_head', array ($this, 'outputMeta' ) );
}
}
We must add an exclude to the code for this url http://www.site.com/members/name/media/, after the members name, the media folder. Otherwise you will share from the media "gallery" folder with the member profile avatar profile photo. That is incorrect and is should be the image from the gallery not the profile photo.
Bob comments:
Okay I will check it.
Veritus comments:
Right Now:
1. The problem right now is that overrides the wall code for sharing images which is not good.
Sharing profile
2.It the same problems as usual even with 315x315, but it works when sharing profile.
3. The alternative is that feeds from the gallery folder when sharing profile instead when it comes to have bigger sizes that facebook requires. As the gallery size image are much bigger.
4. It must not override the wall code for sharing.
Let me know if you can fix this or not.
All the best
Bob comments:
It just need to modify if condtion in the code.
tonight i will help you to solve it.
Bob comments:
change this line
if(! strpos($_SERVER['REQUEST_URI'],"members") )
to this
if(! strpos($_SERVER['REQUEST_URI'],"members") || strpos($_SERVER['REQUEST_URI'],"medias") )
we also need to modify one line in functions.php file.
Bob comments:
if( (!strpos($_SERVER['REQUEST_URI'],"members")) || (strpos($_SERVER['REQUEST_URI'],"medias")) )
Bob comments:
Do you found any issue now?
Veritus comments:
No or now it seems to work as we know if it should.
Reigel Gallarde answers:
Follow up, you can use facebook debugger to see how facebook scrape your link or url...
[[LINK href="https://developers.facebook.com/tools/debug/og/object/"]]https://developers.facebook.com/tools/debug/og/object/[[/LINK]]
Please note that facebook are caching the data of the url.
You will find there <strong>When and how we last scraped the URL</strong> and some other helpful information.
Veritus comments:
Thank you, already done that.
Reigel Gallarde comments:
can I see the link I'll try to help.
Veritus comments:
Seems that Bob have solved problem.
Romel Apuya answers:
perhaps this will help solve the image issue.. i read that
<blockquote>BuddyPress will save those images with a dimension of 150x150px (by default).
This is much too small for Facebook or any other social website to use when a member or group webpage is shared.
To include the custom BuddyPress member and group images in the webpage meta tags, you must adjust the BuddyPress full size image dimensions.
Add the following to your wp-config.php, and increase the default BP_AVATAR_FULL_WIDTH and BP_AVATAR_FULL_HEIGHT from 150 to 200 or more (larger is better).
samples
if ( ! defined( 'BP_AVATAR_THUMB_WIDTH' ) )
define( 'BP_AVATAR_THUMB_WIDTH', 50 );
if ( ! defined( 'BP_AVATAR_THUMB_HEIGHT' ) )
define( 'BP_AVATAR_THUMB_HEIGHT', 50 );
if ( ! defined( 'BP_AVATAR_FULL_WIDTH' ) )
define( 'BP_AVATAR_FULL_WIDTH', 150 );
if ( ! defined( 'BP_AVATAR_FULL_HEIGHT' ) )
define( 'BP_AVATAR_FULL_HEIGHT', 150 );</blockquote>
Romel Apuya comments:
and in the member-header.php
<?php
$ud = get_userdata( bp_displayed_user_id() );
$description = $ud->user_description;
?>
<a onclick='window.open("http://www.facebook.com/sharer.php?u=<?php bp_user_link() ?>&t=<?php bp_displayed_user_fullname() ?>", "facebook", "toolbar=no, width=550, height=550"); return false;' href='http://www.facebook.com/sharer.php?u=<?php bp_user_link() ?>&t=<?php bp_displayed_user_username() ?>' class='facebookShare'>
<?php echo bp_core_get_avatar( bp_displayed_user_id(), 1 ) ?>
<?php echo $description; ?>
</a>
Veritus comments:
Thank you Romel. But that is not what we need.