CODEWITHSUNDEEP
javascriptfacebookfacebook-opengraphfacebook-timeline
Ben
Ben

Reputation: 9001

How to publish an article using Open Graph to timeline?

I've been working tirelessly for the last eight or so hours trying to format my Wordpress blog in a way that means that a user can click a button and publish the article to a ticker, by using the Open Graph settings for Article.

I have been using the tutorial found here.

Unfortunately, I have not been able to complete it as every time I click the "Publish" button I have created, I get an error message pops up.

When using Facebook's debugger I see no problems and all the necessary tags are in place (I have a plugin that does it for me, which is perfect).

Here are the alterations I have made to my header.php file to fit in with the tutorial:

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"
      xmlns:fb="https://www.facebook.com/2008/fbml">

Added the following before </head>:

<script type="text/javascript">
  function postArticle()
  {
      FB.api(
        '/me/[NAMESPACE]:read?Article=<?php get_permalink() ?>',
        'post',
        function(response) {
           if (!response || response.error) {
              alert('Error occured');
           } else {
              alert('Successful! Action ID: ' + response.id);
           }
        });
  }
  </script>

Placed a login button clearly that asks permission:

    <div id="fb-root"></div>
     <script>
     window.fbAsyncInit = function() {
      FB.init({
        appId      : '[APPLICATION ID]', // App ID
        status     : true, // check login status
        cookie     : true, // enable cookies to allow the server to access the session
        xfbml      : true  // parse XFBML
      });
     };

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

     <fb:login-button perms="email,publish_actions,user_actions.news">
    Login with Facebook
    </fb:login-button>

And finally placed the following at the point on the page where I want the button to appear:

<fb:add-to-timeline></fb:add-to-timeline>
 <form>
 <input type="button" value="Publish" onclick="postArticle()" />
 </form>

On my Open Graph settings, I have the action type 'Read' as well as the object type 'Article'.

How come this isn't working for me?

Upvotes: 1

Views: 3313

Answers (2)

Mithilesh
Mithilesh

Reputation: 9

You action Type must be Publish

Upvotes: 0

Rishi Php
Rishi Php

Reputation: 1418

Its works for me, trough that tutorial.

Did you add opengraph tags in your Head Section, like..

<head prefix="og: http://ogp.me/ns# [YOUR_APP_NAMESPACE]: 
                  http://ogp.me/ns/apps/[YOUR_APP_NAMESPACE]#">
  <title>OG Tutorial App</title>
  <meta property="fb:app_id" content="[YOUR_APP_ID]" /> 
  <meta property="og:type" content="[YOUR_APP_NAMESPACE]:recipe" /> 
  <meta property="og:title" content="[YOUR_TITLEIts]" /> 
  <meta property="og:image" content="http://fbwerks.com:8000/zhen/cookie.jpg" /> 
  <meta property="og:description" content="The Turducken of Cookies" /> 
  <meta property="og:url" content="http://fbwerks.com:8000/zhen/cookie.html">
</head>

New things about og:article

Upvotes: 1

Related Questions