CODEWITHSUNDEEP
facebookwordpressfacebook-opengraph
Wawan Den Frastøtende
Wawan Den Frastøtende

Reputation: 119

News.Read Facebook Opengraph

I have some trouble here, do you know Yahoo! News? I want to create a widget like that (when you read an article it is published on your Facebook).

I've just created the Facebook apps and the Open Graph, but I don't understand how to insert it into my website, I am using Wordpress, and I was searching on Google but I still don't understand, hope you can help me.

I still dont understand, i've just create the apps and also the opengraph, also insert the opengraph tag on my header and the function, but when i try to open the post page, i get "Error Occured" How? can you help me?

Upvotes: 1

Views: 1395

Answers (1)

phwd
phwd

Reputation: 19995

You need to understand how the concepts work by reading the documentation

  1. User takes an action in the app, such as read an article
  2. App invokes a HTTP POST to the Graph API end-point /me/action:object=Object_URL
  3. Facebook will crawl the object webpage (your WordPress page), read its meta tags and connect the object to the user via the action.

Your action is news.reads, so you would call as follows

POST https://graph.facebook.com/me/news.reads?article=[article object URL in your Wordpress Blog]

In order to have this work you need to set up the built action type read in your app settings: https://developers.facebook.com/apps/YOUR_APP_ID/opengraph

news.read in app settings

Then you must have the article type for the object set.

Article Object

Then you must set up an object url on your WordPress blog these are done by inserting meta tags

<html>
    <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# 
                  article: http://ogp.me/ns/article#">
     <meta property="fb:app_id"               content="YOUR_APP_ID"> 
     <meta property="og:type"                 content="article"> 
     <meta property="og:url"                  content="URL of this object">
     <meta property="og:site_name"            content="Name of site hosting article">
     <meta property="og:image"                content="URL to an image">
     <meta property="og:title"                content="Name of article">
     <meta property="og:description"          content="Description of object"> 
     <meta property="article:published_time"  content="DateTime"> 
     <meta property="article:modified_time"   content="DateTime"> 
     <meta property="article:expiration_time" content="DateTime">
     <meta property="article:author"          content="URL to Author object">
     <meta property="article:section"         content="Section of article">
     <meta property="article:tag"             content="Keyword">
    </head>
<body>
    <!-- main article body -->
</body>
</html>

So you would put these in your header.php or index.php file based on your theme setup. Then you would have to insert functions and if statements based on your theme setup such as

The URL of the post 

<meta property="og:url" content="<?php the_permalink() ?>"/>

A single post title

<meta property="og:title" content="<?php single_post_title(''); ?>" />

Then you need to lint this url to ensure you have setup properly, you can do this via 

http://developers.facebook.com/tools/debug

Once you are sure the meta tags are set properly you need to test the action as mentioned earlier

POST https://graph.facebook.com/me/news.reads?article=[article object URL in your Wordpress Blog]

If everything is set this should return the id of the action.

Then you must implement the logic for authentication using the JS SDK

<div id="fb-root"></div>
  <script>
    window.fbAsyncInit = function() {
      FB.init({
        appId      : '[YOUR_APP_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>

and the login button plugin

<fb:login-button show-faces="true" width="200" max-rows="1" scope="publish_actions"> </fb:login-button>

Either in a functions.php file or directly within the single.php and index.php pages

From there you must create a function to call the action below on page load

<script type="text/javascript">
  function readArticle()
  {
      FB.api(
        '/me/news.reads',
        'post',
        { article: 'http://yourwordpress.com/site/' },
        function(response) {
           if (!response || response.error) {
              alert('Error occured');
           } else {
              alert('Article read was successful! Action ID: ' + response.id);
           }
        });
  }
  </script>

Upvotes: 5

Related Questions