在 iOS WebView 中添加 Facebook 的 Like 按钮

Posted

技术标签:

【中文标题】在 iOS WebView 中添加 Facebook 的 Like 按钮【英文标题】:Adding Facebook's Like button inside iOS WebView 【发布时间】:2011-07-31 09:31:35 【问题描述】:

我使用 UIWebView 来运行 facebook 代码。问题是 WebView 未在 facebook 中进行身份验证,因此需要登录。

我的用户已经使用本机 API(使用 Safari)登录到 facebook。

如何使用访问令牌在后台 web 视图中对用户进行身份验证,以便在显示“like”时用户已经通过身份验证?

加载下面的html代码一次并执行登录。会话信息已存储,类似按钮将正常工作。 清理您的 facebook cookie 并重新加载 html。会话是从 localStorage 加载的,但需要再次登录。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />    
    <script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>  
</head>
<body onload="onload()">
    Hello Facebook, can you hear me?

    <div id="fb-root" >     
        <fb:like href='http://www.***.com' send='true' layout='button_count' width='220' show_faces='true' font='arial' ref='dropalert'></fb:like>        
    </div>

    <script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
    <script type="text/javascript">
        function onload()          
            var session = null;
            var sessionStr = localStorage.getItem("session");
            if (sessionStr)
                session = JSON.parse(sessionStr);
                alert("stored session " + sessionStr);
            
            else 
                alert("session not stored");
            
            FB.init(
                appId   : <your-app-id>,
                session : session,        
                cookie  : true,                     
                xfbml   : true              
            );

            FB.getLoginStatus(function(response) 
                alert("getLoginStatus");                
                if (response.status == "connected") 
                    alert("Logged in");
                    parseFBML();
                 
                else 
                    // no user session available, someone you dont know
                    alert("NOT Logged in");
                    login();
                               
            );
        

        function login() 
            alert("login starting");
            // Login to facebook to get an access-token
            FB.login(function (response)   
                if (response.session) 
                    var sessionStr = JSON.stringify(response.session)
                    alert("session: \n\n" + sessionStr + "\n\n\n\n");
                    localStorage.setItem("session", sessionStr);                    
                 
                else 
                    alert("Login failed");
                
            , scope:'publish_stream,offline_access');
            

        function parseFBML() 
            FB.XFBML.parse(document.getElementById('fb-root'));
               
    </script>
</body>
</html>

谢谢。

【问题讨论】:

【参考方案1】:

我不知道这是否适合您,但是,如果您可以将会话参数传递给您的 Web 内容,您可以使用它来初始化您的 Web 内容中的 JavaScript SDK。

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
  FB.init(
    appId  : <my-app-id>,
    session :  "uid":"<users facebook id>", "access_token":"<valid access token>", "expires": <expires value>, "sig":"<valid signature>",
    cookie : true, 
    xfbml  : true
  );
</script>

【讨论】:

谢谢,但这似乎不起作用。我清理了 facebook cookie 并尝试使用会话值。如果我调用 FB.login,则会显示登录表单。如果我尝试激活 API,则会返回无“access_token”错误。还有什么想法吗?你如何连接一个有效的会话? 您的会话应包含有效的访问令牌。你是如何生成会话参数的? 我目前在浏览器中进行测试。我调用 FB.init,然后调用 FB.login(具有离线访问权限)。我打印出 access_token 和 session-key。我清理了 Cookie,将 session-key 设置为 FB.init 会话属性。我不调用登录并尝试访问 API。它失败。如上所述,我尝试在会话属性中设置 access_token 值 - 也失败了。 谢谢,API现在可以访问了,但是点赞仍然需要登录。我用详细信息更新了我的问题。 您使用的是XFBML 还是iFrame 版本的like 按钮?

以上是关于在 iOS WebView 中添加 Facebook 的 Like 按钮的主要内容,如果未能解决你的问题,请参考以下文章

iOS Swift WebView 问题

ios滚动webview以在pdf中添加书签

如何将推送通知添加到 WebView 应用程序(Android 和 iOS)

iOS开发:webview动态添加配置返回、关闭按钮(简单又完美)

为啥 webview_flutter 在添加到应用程序(iOS)的情况下不起作用?

iOS开发-webView添加头部与尾部控件