Facebook sharing score feature (solution)

  • I am opening this topic to share with you the solution I have for sharing the result score via Facebook.

    I replied in a closed topic to mail me for that solution but the amount of mails I got is quite high and I was replying with big delay to most of them. Also, some of my replies wasn’t delivered for some reason. And these are the reasons to open a new topic.

    You can see the feature live on my page: https://brain-burn.com/

    Instructions:
    The only file you need to edit is WpProQuiz_View_FrontQuiz.php and you can find it following these folders: wp-content/plugins/wp-pro-quiz/lib/view/

    Before that, you have to do two more things, so here is what you do step by step:
    1. Create one html file (i called it shared.html but you can use sth else, doesn’t matter) and place it somewhere (not a must to be inside the plugin directory). The file should contain:

    <!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="content-type">
    <title>Shared!</title>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
window.close();
}
</script>
</body>
</html>

    2. Create Facebook App (go to https://developers.facebook.com/ and My Apps->Add a New App and follow the steps, you will need only the App ID but make sure you typed your domain on App Domains and Site URL fields)

    3. We can start with editing the file WpProQuiz_View_FrontQuiz.php now:

    You have to place this javascript code somewhere (make sure you are not inside <?php ?> tags):

    <script type="text/javascript">
jQuery(document).ready(function($) {
$("body").on("click", "#fbSharer", function() {
var $temp = $(".wpProQuiz_points").find("span");
var score = $temp.eq(2).text();
var pageUrlEncoded = encodeURIComponent( document.URL );
var popUpTop = window.screen.height/2 - 218;
var popUpLeft = window.screen.width/2 - 313;
var shareOptions = "height=400,width=580,toolbar=0,status=0,location=0,menubar=0,directories=0,scrollbars=0,top=" + popUpTop + ",left=" + popUpLeft;

var facebookUrl = "https://www.facebook.com/dialog/feed?"
+ "display=popup&"
+ "app_id=000000000000000&"
+ "link=" + pageUrlEncoded + "&"
+ "name=<?php echo 'Text before result ';?>" + score + "<?php echo ' Text after the result?'; ?>&"
+ "description=<?php echo 'The description here'; ?>&"
+ "redirect_uri=https://somewhere.com/shared.html";

window.open( facebookUrl, "facebookShare", shareOptions );
return false;
});
});
</script>

    Place somewhere inside <?php ?> tags the following line to display the text, of course you can replace the text with an image using the img html tag:
    echo '<div><a id="fbSharer" href="#">Share your result via Facebook</a></div>';

    There are few things you have to replace in the javascript code:
    on app_id ‘000000000000000’ with your facebook app id
    on name and description the text you want to show on facebook when shared (keep in mind ‘score’ is the result variable so delete it from the description only if you are going to put it into the name)
    on redirect_uri ‘https://somewhere.com/shared.html&#8217; with the url of the html file you’ve already created.

    I am going to receive mails when someone reply here so you know what to do if you have problems implementing this. Hope this is helpful to someone ??

    https://www.ads-software.com/plugins/wp-pro-quiz/

  • The topic ‘Facebook sharing score feature (solution)’ is closed to new replies.

Tags