Facebook Graph API: rendering posts like Facebook - php

is there any public code of PHP/CSS to integrate my Facebook-Posts on my own WebPage in the style of Facebook?
I mean the Step after fetching the Data from the Facebook Graph API (fetch-facebook-posts-using-graph-api)

It should be quite straight-forward to reproduce the same appearance. You might find an inspection/debugging tool like FireBug quite helpful.
Basically, open up a Facebook page, inspect a post-box, experiment around (by checking/unchecking styles) to see what each of the style rules does, discard the unnecessary ones and take the ones you need.

Related

Parse or crawl Facebook comments

I´d like to use the Facebook Comments plugin for my website.
As Facebook is offering this as an iFrame, the actual comments are not part of my content.
Therefore I am looking for a solution to read the comments and render them into my website.
So far with no luck.
There is an older article, which also links to code that seemed to work.
https://moz.com/blog/make-facebook-comments-box-indexable-by-search-engines
However, changes on the Facebook side seem to have made that code unusable. Has anyone found a new solution for this?
Maybe via curl or file_get_contents or even the official API?
Please note, I am referring to the comments plugin for URLs (https://developers.facebook.com/docs/plugins/comments/)
not comments from Facebook Pages or Profiles.

AddThis - Posting a variable score to Facebook and Twitter

Is it possible to have facebook and twitter "AddThis" links pull a user's score from a game?
Im developing a simple HTML5 "quiz". There is a score counter set up that I would like to be able to echo to the Twitter and Facebook share options, but I cant seem to make this work and im not sure if it's even possible...
The counter is handled through JS and displays dynamically in "#score":
<div id="score-counter"><span id="score"></span<span>/20</span></div>
I would like to be able to share something like "I got '__'/20 on this game, can you beat me?"
Looked through a ton of documentation but still can't seem to figure it out... Can anyone advise how to go about accomplishing this?
Since the open graph is essentially a page scraper, you can't dynamically generate meta tags via javascript. Essentially, this answer is probably the right one which will ultimately lead you to this question/answer.
You would basically need to create a separate share url where you'd pass in query parameters for the page to read in order to dynamically spit out the correct meta tags for the open graph to see.

Facebook page activity feed

We want to add an activity feed for a Facebook page as a widget to our Wordpress blog. This seems like it should be a simple thing to do, the Facebook documentation refuses to yield the relevant description though. It seems like 'perhaps' an app is required, although maybe not...
Any tips much appreciated.
Toby
You can grab an RSS feed from a facebook page through the graph API; which will be written in XML
Edit:
Most of the necessary steps are outlined here: http://sem-group.net/search-engine-optimization-blog/subscribe-to-your-favorite-facebook-page-via-rss/
Although you'll need to get the id of your page as part of the steps above.
To get Facebook page id: http://rieglerova.net/how-to-get-a-facebook-fan-page-id/
Wordpress seems to have its own specific plugin for importing RSS feeds:
http://wordpress.org/extend/plugins/rss-import/
(P.S. IF you find that this answers your question would there be any chance you could accept it?)

Paste a link and get thumbnails

I want to add a function to my PHP/mysql/jQuery website.
The function is that if user paste a link in a input box,
the server will retrieve all representative pics
just as facebook does.
Is there any PHP code project or jQuery plugin satisfying my demand?
There are lots of services.
Take a look at websnaper for example:
or just google it
It is not hard to write your own from scratch.
Facebook uses the Open Graph Protocol - it retrieves the page and then looks for special meta tags that describe the images associated with that page (og:image).
I guess you can write a basic HTML parser that would do the same.
EDIT: Someone has already written an Open Graph parser

How to extract images from a webpage as Facebook does?

If I insert in my wall a link like this:
http://blog.bonsai.tv/news/il-nuovo-vezzo-della-lega-nord-favorire-i-lombardi-alluniversita/
then facebook extract the image in the post and not the first image in the webpage ( not image logo or other little images for example ) !!
How facebook does that ?
Hm, impossible to say without more information about the algorithm they use.
However, from looking at the page's source code you can see that while the image of Bossi is not the first image in the page, it's the first inside the divs "page_content" and "post_content". Maybe Facebooks knows the HTML IDs that the blogging system (Wordpress in this case) uses, and uses these to find the first image that is actually part of the page content.
That would actually be a good idea, and is essentially an implementation of the "semantic web"...
As others have said, we have no idea how Facebook decides what to choose in the absence of any relevant metadata (though Sleske's guesses seem reasonable; I'd also guess that they look at the first big image), but you can avoid that by going the correct route and simply giving facebook (and similar services) addiotnal metadata about your page by using Open Graph Protocol tags, for example if you want to specify a particular image to use for a facebook like, you'd include this in your head tag:
<meta property="og:image" content="<your image URL>" />
OGP is also used by LinkedIn, Google+ and many others.
If you're in Wordpress you can control these tags with an open graph plugin. Other systems can do it manually or via their own plugins.
I can imagine that the Facebook crawler can identify the actual content part, and select an image from it. Similar functionality is used by the Safari Reader functionality. It probably helps that the software used is Wordpress, which is the most popular blogging software. It's a quick win for Facebook to add specific support for this software.
My guess is facebook has built some algorithms for distinguishing the actual content from the other data in a html page. When looking at the page you provided it's quite easy since the html element that contains the page content has id="page_content" which is self-explanatory.

Categories