共享状态后的JQuery重定向

时间:2014-09-04 11:36:54

标签: javascript jquery html facebook

我试图了解用户如何在Facebook上共享页面,然后重定向到另一个页面。

我从这个链接中学习:Link
也来自另一个stackoverflow:Link

我不知道哪里出错了,但这是我的源代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="jquery-latest.min.js"></script>
<script src="jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>

</head>

<style>


* {
    margin: 0px;
    padding: 0px;
    text-decoration:none;
    -moz-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}
body {
    background:rgb(249, 249, 249);
    font-family:"Lato", Calibri, Arial, sans-serif;
}
.container > div > p {
    text-align: center;
    margin:40px auto;   
}
.fsl, content-download {
    display: table;
    margin:40px auto;
    padding: 6px;
    border-radius: 2px;
    opacity: 0.6;
}
.fsl-facebook {
    background:#14A0E9;
}
.content-download {
    background:#6DC118;
    display: none;
}
.content-download.unlocked {
    display: table;
}
.fsl span {
    color: #FFF;
}
.fa-icons {
    font-family: FontAwesome;
    font-size: 20px;
    color: #FFF;
}
.fsl:hover {
    opacity: 1;
}
.hidden {
    display: none;
    opacity: 0;
}


</style>


<body>



<center>
<div class="container">

    <div>
       <p>This file is locked, to unlock and download it, share it</p>
       <p class="hidden">Thanks for sharing, the file is unlocked and ready for download</p>
       <p class="hidden">In order to download this file, you need to share it</p>
    </div>
    <a class="fsl fsl-facebook" href="#" id="facebook-share">
       <span class="fa-facebook fa-icons fa-lg"></span>
       <span class="sc-label">Share on Facebook</span>
    </a>

    <a class="fsl content-download" href="" id="download-file">
       <span class="fa-download fa-icons fa-lg"></span>
       <span class="sc-label">Download File</span>
    </a>

</div>

<div id="fb-root"></div>
<script>
$(document).ready(function () {

      window.fbAsyncInit = function() {
        FB.init({
          appId      : '553435274702353',
          version    : 'v2.0'
        });
      };   
    $('#facebook-share').on('click', function() {
      /** display the share dialog and wait for the response **/
      setTimeout(function(){ $('p').addClass('hidden') }, 1500);
      FB.ui({
            display: 'popup',
            method:  'share',
            href: 'https://developers.facebook.com/docs/',
            },
            /** our callback **/
            function(response) {
                     if (response && response.post_id) {
                        /** the user shared the content on their Facebook, go ahead and continue to download **/
                         $('p:eq(1)').removeClass('hidden');
                         $('p:eq(0), #facebook-share').addClass('hidden');
                         $('#download-file').addClass('unlocked');
                     } else {
                        /** the cancelled the share process, do something, for example **/
                         $('p:eq(2)').removeClass('hidden');
                     }
            });

     });
});

// Load the SDK
(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/sdk.js";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

      </center>
</body>
</html>

点击分享按钮后,我的错误如下: Link


此外,我找到了一种方法,让页面在分享后重定向。

我真的需要帮助。

0 个答案:

没有答案