将Facebook“读取”按钮添加到文章页面

时间:2012-06-22 15:03:55

标签: javascript facebook facebook-graph-api facebook-c#-sdk

我希望做一些我认为相当直接的事情,在新闻页面上的所有文章下面添加一个阅读按钮,该页面将发布到一个活动源...作为Facebook API的新手我发现当前例子并不容易。

- 该应用已创建 功能打开的图形对象 - 我在页面上登录

但是,我仍然会收到此错误 “消息:(#100)行动类型新闻:阅读未获批准,因此应用程序555555只能发布给应用程序的管理员,开发人员和测试人员。用户5555555不是其中之一。”

接近这个错误的方式?

   <!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 prefix="og:h ttp://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

    <meta property="fb:app_id" content="5555555" />
    <meta property="og:type" content="article" />
    <meta property="og:url" content="http://name.page.com/default.aspx" />
    <meta property="og:title" content="Second Article" />
    <meta property="og:image" content="http://ogp.me/logo.png" />
    <meta property="og:description" content="Second Article Description" />
    <meta property="article:author" content="http://name.page.com/">
    <meta property="article:section" content="Article" />
    <meta property="article:tag" content="Name" />

    <title>FACEBOOK</title>
    <link href="css/main.css" rel="stylesheet" type="text/css" />
</head>


<body>
    <div id="content" class="column">
        <div class="article">
            <form id="form1" runat="server">
                <asp:Button ID="Button1" runat="server" Text="Facebook Login" OnClick="Button1_Click" />
            </form>
        </div>
    </div>

    <div id="fb-root"></div>

    <script type="text/javascript">

        // Load the SDK Asynchronously
        (function (d) {
            var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
            if (d.getElementById(id)) { return; }
            js = d.createElement('script'); js.id = id; js.async = true;
            js.src = "//connect.facebook.net/en_US/all.js";
            ref.parentNode.insertBefore(js, ref);
        } (document));


        // Init the SDK upon load
        window.fbAsyncInit = function () {
            FB.init({
                appId: '5555555', // App ID
                channelUrl: '//' + window.location.hostname + '/channel.html', // Path to your Channel File
                status: true, // check login status
                cookie: true, // enable cookies to allow the server to access the session
                xfbml: true  // parse XFBML
            });

            // listen for and handle auth.statusChange events
            FB.Event.subscribe('auth.statusChange', function (response) {
                if (response.authResponse) {

                    // user has auth'd your app and is logged into Facebook
                    FB.api('/me', function (me) {
                        if (me.name) {
                            document.getElementById('auth-displayname').innerHTML = me.name;
                        }
                    })
                    document.getElementById('auth-loggedout').style.display = 'none';
                    document.getElementById('auth-loggedin').style.display = 'block';
                } else {

                    // user has not auth'd your app, or is not logged into Facebook
                    document.getElementById('auth-loggedout').style.display = 'block';
                    document.getElementById('auth-loggedin').style.display = 'none';
                }
            });

            // respond to clicks on the login and logout links
            document.getElementById('auth-loginlink').addEventListener('click', function () {
                FB.login();
            });
            document.getElementById('auth-logoutlink').addEventListener('click', function () {
                FB.logout();
            });
        }


        //Second Article
        function secondArticle() {

            //GET LOGIN STATUS
            FB.getLoginStatus(function (response) {
                if (response.status === 'connected') {
                    // the user is logged in and has authenticated your
                    // app, and response.authResponse supplies
                    // the user's ID, a valid access token, a signed
                    // request, and the time the access token 
                    // and signed request each expire
                    var uid = response.authResponse.userID;
                    var accessToken = response.authResponse.accessToken;
                    alert(accessToken);


                    FB.api('me/news.reads' + '?article=http://facebook.Name.com/default.aspx&access_token=' + accessToken, 'post',

                    function (response) {
                        var msg = 'Error occured';
                        if (!response || response.error) {
                            if (response.error) {
                                msg += "\n\nType: " + response.error.type + "\n\nMessage: " + response.error.message;
                            }
                            alert(msg);
                        }
                        else {
                            alert('Post was successful! Action ID: ' + response.id);
                        }
                    });


                } else if (response.status === 'not_authorized') {
                    // the user is logged in to Facebook, 
                    // but has not authenticated your app
                    alert("Authorize")
                } else {
                    // the user isn't logged in to Facebook.

                    alert("Login")
                }
            });
        }

    </script>



    <div id="contentContainer">
        <div id="login-container">           
            <h3>Login from site</h3>
            <div id="auth-status">
                <div id="auth-loggedout">
                    <a href="#" id="auth-loginlink">Login</a>
                </div>
                <div id="auth-loggedin" style="display: none">
                    Hi, <span id="auth-displayname"></span>(<a href="#" id="auth-logoutlink">logout</a>)
                </div>
            </div>
        </div>
        <div id="content" class="column">
            <div class="article">
                <h3>Name Article V2</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut magna ligula, malesuada pellentesque mollis malesuada, varius in dolor. Aenean mollis nisl condimentum felis commodo at tincidunt purus interdum. Vivamus consectetur sodales quam, volutpat feugiat sapien lobortis pulvinar. Proin consectetur blandit libero tristique dictum. Fusce consectetur massa non magna convallis ac congue felis sagittis. Nulla nec turpis dui, vitae egestas quam. Proin lobortis dictum faucibus. Aenean eget elit nec quam imperdiet fermentum a vel magna. Ut viverra eros sit amet nibh varius lacinia. Duis porttitor augue condimentum arcu bibendum ut accumsan turpis lobortis. Nam vulputate, mauris non fermentum ornare, dui metus commodo odio, id tempor neque leo vel turpis. Donec ultricies imperdiet tincidunt.</p>
                <p>Nulla facilisi. Donec laoreet lacinia vulputate. Proin accumsan commodo est, id aliquam dolor gravida eget. Duis quam nisl, rutrum vel lobortis sit amet, condimentum id purus. Integer ut dignissim augue. Fusce bibendum tempus elit, in fermentum odio sagittis et. Sed luctus viverra urna ac porttitor. Duis erat nisi, porta eu cursus sed, posuere at est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel erat vel diam vehicula posuere eu eu leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Nam mattis fringilla mi.</p>
                <p>Etiam id mi ipsum, non aliquam velit. Proin rutrum ante eget urna euismod accumsan. Nam id velit neque. Nunc aliquam, elit non porta aliquet, nisi orci malesuada tortor, quis interdum nisl mi a felis. Duis tristique, elit eu facilisis egestas, sem sapien porta orci, et imperdiet augue est ac velit. Nulla facilisi. Nam enim enim, sollicitudin at elementum vitae, varius vulputate magna. Nullam posuere lorem sit amet magna euismod sit amet ornare nisl tempus. </p>
                <input type="button" value="Read" onclick="secondArticle();" />
            </div>
        </div>
    </div>

1 个答案:

答案 0 :(得分:1)

您必须在应用中提交要在批准中使用的任何Open Graph操作(即使它是内置的)。

在您定义操作的应用设置中,有链接可以带您进入审批流程。

有关详细信息,请参阅:https://developers.facebook.com/docs/opengraph/opengraph-approval/