I'm using the facebook like button on my website so that a user can like a predictions for a sports game.
I have the following code for the like button:
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=123456789";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<fb:like href="http://www.sportannica.com/games/mlb/1880/predictions/113" show_faces="false" data-send="true" font="verdana" layout="button_count"></fb:like>
In the head of the document, I have the following:
<meta property="og:title" content="Lance Newman's prediction for the Red Sox @ Yankees game on Friday, August 17" />
<meta property="og:description" content="Lance Newman predicted the Yankees to beat the Red Sox (6 to 4) on Friday, August 17 on Sportannica" />
<meta property="og:image" content="http://www.sportannica.com/img/team_icons/New York Yankees/1947.png" />
<meta property="og:site_name" content="Sportannica" />
<meta property="fb:app_id" content="123456789" />
<meta property="og:url" content='http://www.sportannica.com/games/mlb/1880/predictions/113' />
<meta property="og:restrictions:age" content="13+"/>
<meta property="og:determiner" content="auto" />
Someone told me that the reason for the like button triggering the creation of a new page was caused by having an og:type meta tag in the head. I used to have the following in the head of the document as well
<meta property="og:type" content="sportannica:victory" />
Since I do use this page for a custom action for my application as well. When a user makes a prediction for any game, their prediction is posted on their timeline.
If a user of my site made a prediction for the game found here, then when the form is submitted, the following code would be executed:
$queries = array(
array("method" => "POST", "relative_url" => "/me/sportannica:predict?victory=http://www.sportannica.com/games/".$league."/".$game."/predictions_post/".$_SESSION['id']."")
);
try
{
$postResponseA = $facebook->api('?batch='.json_encode($queries), 'POST');
} catch (FacebookApiException $e)
{
// echo 'AF error: '.$e.'';
}
Notice how in the above example, instead of the parameter being equal to "predictions", it's "predictions_post".
What's in the open graph tags of the document are contingent upon whether the parameter in the url is set to "predictions_post" or "predictions".
In the head of my document, I have the following php code:
<meta property="og:title" content="
<?php
if($tab == "predictions_post")
{
echo "".$winner_short." victory";
} elseif($tab == "predictions")
{
if($gram == 1)
{
echo "".$first_name." ".$last_name."'s prediction for the ".$away_team_short." @ ".$home_team_short." game on ".$game_date."";
} else
{
echo "Predictions for ".$away_team_short." @ ".$home_team_short." on ".$game_date."";
}
}
?>
" />
<meta property="og:description" content="
<?php
if($tab == "predictions_post")
{
echo "".$first_name." ".$last_name." predicted the ".$winner_short." to beat the ".$loser_short." (".$win_score." to ".$lose_score.") on ".$game_date." on Sportannica";
} elseif($tab == "predictions")
{
if($gram == 1)
{
echo "".$first_name." ".$last_name." predicted the ".$winner_short." to beat the ".$loser_short." (".$win_score." to ".$lose_score.") on ".$game_date." on Sportannica";
} else
{
echo "Predictions for ".$away_team_short." @ ".$home_team_short." ".$game_date."";
}
}
?>
" />
<?php
if($tab == "predictions_post")
{
?>
<meta property="og:type" content="sportannica:victory" />
<?php
}
?>
But, even when the parameter in the URL is set to "predictions" and the correct open graph tags are display, upon click of the like button, a new page is created and the wrong og:title is displayed.
Any ideas/suggestions?
Thanks,
Lance
