When you share your Personal Page on Facebook, why doesn't it upload the photo as a thumbnail image?

Jessica De Jesus

This really seems like it should be a basic and mandatory feature for TeamRaiser. It works for other event sites like FirstGiving and the Climate Ride's DonorDrive service provider. 

Kent Gilliam

Jessica,

 

The photo that displays is randomly selected by Facebook but you can control what photo shows, as well as the link title and description by putting the following code in your TeamRaiser wrapper:

 

<meta name="title" content="What you want in the bold link here" />
<meta name="description" content="You can put a description about your event here" />
<link rel="image_src" href="http://yourimageURL.jpg" />

And one little tip, Facebook will cache your pages for a long time. To reset the cache you can do the following: 

http://community.convio.com/t5/Best-Practices/Facebook-Share-Caching-Fix/m-p/13800/highlight/true#M343 

 

Let me know if you need any help.

 

Kent

Kent Gilliam

Kent Gilliam:

Jessica,

 

The photo that displays is randomly selected by Facebook but you can control what photo shows, as well as the link title and description by putting the following code in your TeamRaiser wrapper:

 

<meta name="title" content="What you want in the bold link here" />
<meta name="description" content="You can put a description about your event here" />
<link rel="image_src" href="http://yourimageURL.jpg" />

And one little tip, Facebook will cache your pages for a long time. To reset the cache you can do the following: 

http://community.convio.com/t5/Best-Practices/Facebook-Share-Caching-Fix/m-p/13800/highlight/true#M343 

 

Let me know if you need any help.

 

Kent

Jessica...

 

Just realized you were talking about the participant pages and not TeamRaiser pages in general. I've actually never had anyone want to share the participant's pic since promoting the event is the primary goal of encouraging someone to share on Facebook. I'll check around and see if there is any kind of script you can add to specifically grab the participant's picture when they share their page on Facebook. I'll let you know what I find.

Jessica De Jesus

Kent Gilliam:

Jessica...

 

Just realized you were talking about the participant pages and not TeamRaiser pages in general. I've actually never had anyone want to share the participant's pic since promoting the event is the primary goal of encouraging someone to share on Facebook. I'll check around and see if there is any kind of script you can add to specifically grab the participant's picture when they share their page on Facebook. I'll let you know what I find.

I can't believe this hasn't come up before. I thought the whole purpose of peer-to-peer fundraising is that people are asked by people they know. I would be more compelled to pay attention to a Facebook status that has a picture of my friend who's asking me for money rather than a generic status update that has an picture of something I'm not familiar with.

 

Appreciate you looking into this.

 

Jessica De Jesus

Jessica De Jesus:

I can't believe this hasn't come up before. I thought the whole purpose of peer-to-peer fundraising is that people are asked by people they know. I would be more compelled to pay attention to a Facebook status that has a picture of my friend who's asking me for money rather than a generic status update that has an picture of something I'm not familiar with.

 

Appreciate you looking into this.

 

Kent,

Here is an example of we'd like to see happen.  Post this link in Facebook (assuming you have a FB account!): http://climateride.donordrive.com/index.cfm?fuseaction=donorDrive.participant&participantID=1485

 

Thanks.

Jessica

Kent Gilliam

Jessica De Jesus:

Kent,

Here is an example of we'd like to see happen.  Post this link in Facebook (assuming you have a FB account!): http://climateride.donordrive.com/index.cfm?fuseaction=donorDrive.participant&participantID=1485

 

Thanks.

Jessica

That's cool. Let me contact some coding folks and see what they recommend. I'll post back here when I hear back from them.

Kent Gilliam

Kent Gilliam:

That's cool. Let me contact some coding folks and see what they recommend. I'll post back here when I hear back from them.

Jessica,

 

I found out that the only way to have something like this enabled for your TeamRaiser is to contract some customization work. You'll have to contact your AM to see what kind of price you'd be looking at for this.

Josh Weinstein

Kent Gilliam:

Jessica,

 

I found out that the only way to have something like this enabled for your TeamRaiser is to contract some customization work. You'll have to contact your AM to see what kind of price you'd be looking at for this.

I had a thought about this, since we're having the same issue. Is there an S-tag that will pull the URL of the image that is displayed on a personal page? In that way, you could add some code to the header like:

 

<meta type="og:image" content="[[S??:IMAGE]]">

 

That would show FB that the image on the page is the one to display as the thumbnail.

Josh Weinstein

Kent Gilliam:

Jessica,

 

I found out that the only way to have something like this enabled for your TeamRaiser is to contract some customization work. You'll have to contact your AM to see what kind of price you'd be looking at for this.

Can you elaborate on the solution that you found, Kent? I am not averse to getting my hands dirty with some coding, but everything I've tried so far has failed. 

 

I can't insert the url of the photo into the meta tag for the fb og image tag because the FB scraper doesn't render js and therefore only pulls the default property for the page image. 

 

I thought there might be an s-tag solution but I can't seem to find it.

Kent Gilliam

Josh Weinstein:

Can you elaborate on the solution that you found, Kent? I am not averse to getting my hands dirty with some coding, but everything I've tried so far has failed. 

 

I can't insert the url of the photo into the meta tag for the fb og image tag because the FB scraper doesn't render js and therefore only pulls the default property for the page image. 

 

I thought there might be an s-tag solution but I can't seem to find it.

Hi Josh,

 

Sorry but I've been out of the office a lot the past month with family emergency. 

 

I never was able to find a way to do this without some customization work by someone here at Blackbaud. I know in the past that Facebook would give you about five options of photos to share with your post that were scraped from the page being shared if there wasn't a hard-coded meta link image in the wrapper. This is where the big challenge is. You want to be able to promote the event and control the image that is shared so you hard-code the event image in the meta data in your wrapper for the event, but then that same wrapper is used for the personal pages so it forces the event image there too. The only way I can think of a conditional that just may work would be to force the image on the homepage of the event but then (hopefully) let Facebook scrape all the images on a page when not on the homepage. 

 

I worked with someone on my team and he came up with the codes below. Basically you put in meta data that you want to render on the event homepage in the "entry" conditional. This meta data would include your forced event pic. Then you wouldn't force the pic on the personal page meta data, which should allow Facebook to scrape all of the images and let the participant choose which image they want to share. It's not forcing the participant's image but it's the best I can think of (if this does actually work) without having to do a costly customization. Let me know if it works.

 

Here's the code:

 

[[?xpersonalx::x[[S334g]]x::<!-- meta data info for personal page -->::]]
[[?xentryx::x[[S334g]]x::<!-- meta data info for greeting page --> ::]]

 

Josh Weinstein

Kent Gilliam:

Hi Josh,

 

Sorry but I've been out of the office a lot the past month with family emergency. 

 

I never was able to find a way to do this without some customization work by someone here at Blackbaud. I know in the past that Facebook would give you about five options of photos to share with your post that were scraped from the page being shared if there wasn't a hard-coded meta link image in the wrapper. This is where the big challenge is. You want to be able to promote the event and control the image that is shared so you hard-code the event image in the meta data in your wrapper for the event, but then that same wrapper is used for the personal pages so it forces the event image there too. The only way I can think of a conditional that just may work would be to force the image on the homepage of the event but then (hopefully) let Facebook scrape all the images on a page when not on the homepage. 

 

I worked with someone on my team and he came up with the codes below. Basically you put in meta data that you want to render on the event homepage in the "entry" conditional. This meta data would include your forced event pic. Then you wouldn't force the pic on the personal page meta data, which should allow Facebook to scrape all of the images and let the participant choose which image they want to share. It's not forcing the participant's image but it's the best I can think of (if this does actually work) without having to do a costly customization. Let me know if it works.

 

Here's the code:

 

[[?xpersonalx::x[[S334g]]x::<!-- meta data info for personal page -->::]]
[[?xentryx::x[[S334g]]x::<!-- meta data info for greeting page --> ::]]

 

I might try that. In the meantime, in order to add a custom FB button that shares the user pic and the title and text of the page, what I've done is to add custom social buttons using the FB API and jquery to to retrieve the meta information of the page and pass those as part of a social sharing link.

 

This is the code I used to do that:

 

<a class="zocial facebook" onclick="share_prompt()" href="javascript&colon;void(0)">Share on Facebook</a>
<div id="fb-root"></div>
<script type="text/javascript">
var imgURL = $('.imageFrame img').get(0).src;
var gemName = $('.gem-event-name-text').html();
var fbDescr = $('.main p').first().html();

if (gemName) {
pageName = gemName
}
else {
pageName = $('.header h2').html();
}

function share_prompt()
{

FB.ui(
  {
   method: 'feed',
   name: pageName,
   caption: '[[S8]]',
   description: fbDescr,
   link: '[[S8]]',
   picture: imgURL
  }
);
 }
</script>

 

Kent Gilliam

Josh Weinstein:

I might try that. In the meantime, in order to add a custom FB button that shares the user pic and the title and text of the page, what I've done is to add custom social buttons using the FB API and jquery to to retrieve the meta information of the page and pass those as part of a social sharing link.

 

This is the code I used to do that:

 

<a class="zocial facebook" onclick="share_prompt()" href="javascript&colon;void(0)">Share on Facebook</a>
<div id="fb-root"></div>
<script type="text/javascript">
var imgURL = $('.imageFrame img').get(0).src;
var gemName = $('.gem-event-name-text').html();
var fbDescr = $('.main p').first().html();

if (gemName) {
pageName = gemName
}
else {
pageName = $('.header h2').html();
}

function share_prompt()
{

FB.ui(
  {
   method: 'feed',
   name: pageName,
   caption: '[[S8]]',
   description: fbDescr,
   link: '[[S8]]',
   picture: imgURL
  }
);
 }
</script>

 

Honestly I like your option better. How's it working so far? Can you provide a link so I can go check it out?

Josh Weinstein

Kent Gilliam:

Honestly I like your option better. How's it working so far? Can you provide a link so I can go check it out?

Not yet Should have one live this afternoon. I'll update this thread when I've got it up and running.

Josh Weinstein

Kent Gilliam:

Honestly I like your option better. How's it working so far? Can you provide a link so I can go check it out?

Ok. Got it. You can check it out working here:

 

http://www2.michaeljfox.org/site/TR/Tribute/General?px=1005416&pg=personal&fr_id=1410

Kent Gilliam

Josh Weinstein:

Ok. Got it. You can check it out working here:

 

http://www2.michaeljfox.org/site/TR/Tribute/General?px=1005416&pg=personal&fr_id=1410

Where's the share button? Or do you only have it showing for the actual registered participant? When I just copy and paste the URL in Facebook it just pulls in the progress meter.