I'm working on some new features for a CMS, and I'm having trouble finding the information about how Facebook interacts with other websites. If turn key solutions exist for this I'd love to hear about them, but I'm basically just looking for pointers to documentation of how this stuff works behind the scenes. Including php, wordpress, and drupal since those are the base technologies I'm working with, but other platform solutions are welcome.
When you paste a URL into Facebook's "What's on your Mind" box, Facebook will automatically fetch a short page description, as well as a list of possible thumbnails. If there's a video it will often auto-generate the needed HTML to embed the video. I've also seen features where you link to a business's main website, but then are prompted to "like" their Facebook page.
How can I, as an independent website owner, have my pages reacts to Facebook in this way. For example, on the following page (link to a personal website) I have four images. However, if I drop that URL into a Facebook status update, there are no thumbnails for those images.
Also, while I've inferred several features of the notification box, I'm curious if there's other's I'm not aware of.
Again, while turnkey solutions and existing plugins are of interest, what I'm really after is what sort of meta data I need to embed in my own page, or what special responses I need to make to Facebook requests. In other words, how do I program a website to response correctly to Facebook.
Basically you convey that information to user in terms of open graph meta tags. From that Facebook picks up what type of site it is. Is it about a book or some music or some commerical brand or may be has a FB page linked to it? Check this documentation for general idea about graph objects - https://developers.facebook.com/docs/opengraph/using-objects/
Coming to specifically the image used as thumbnail, it is specified with og:image meta tag. Important thing to note about it is that FB caches that for ~24hours so don't sweat it if it doesn't show up. You can use this tool to check for your values which fetches it in realtime - https://developers.facebook.com/tools/debug
Also Facebook happens to have quite a lot of bugs around this, so it might take really long before it start showing up. If its picked up debug tool, then you are fine at code level. Not much that you can do about it.
I happen to know about this as I authored a tiny WordPress plugin for that and boy I know the support requests that used to come in. http://wordpress.org/extend/plugins/facebook-like-thumbnail/
Now for 3rd part of your question, even this is specified through meta tags only, like you have primary video content on your website, and you would like it to embed on Facebook when someone puts a link in the status box, so for that this link has code samples http://garethhooper.com/articles/social-media/45-integration/166-how-to-embed-your-own-videos-on-facebook-using-the-facebook-like-and-share-buttons.html
Hope that sets you on track giving you a head start :)
Related
I have like/share buttons on my website and am not currently using an appid. Finding information on whether this is a necessity for the above configuration is difficult to confirm. When going through the Facebook app "create" forms, I'm really confused by a lot of the requirements as it seems to be more focused around actual apps rather than websites, which login via fb etc.
In the past I have created an app for one of my other websites and I don't believe there was any verification/submission process at this point (about 2-3 years ago). Reviewing my old app configuration now I can see that it is not "live" - does anyone know whether Facebook implemented this submission process in the last couple of years, and then de-activated any live apps that were created prior to this?
I now want to setup a new app for my new website and I'm unsure what the different 'action types' mean and what I would need to simply use like/share buttons on the website. Could someone give me a quick run down of what I'd need and what they are?
Any other info/tips people can provide would be greatly appreciated. I'm finding that the like/share DO still work without the app, but sometimes the share button doesn't work properly (I have a feeling this is something to do with the app).
Thanks
If you are just using the Social Plugins, you don't need to have a Facebook App ID.
If you want more integration, it will be required. Creating an App ID is like registering your App, wether an iOS or Android App or just a website, so that you can make Graph API calls for it.
The easiest way to register your website is to go the quickstart: https://developers.facebook.com/quickstarts/?platform=web (or https://developers.facebook.com/apps). There you can type a name and follow the steps.
You can then follow the "Sharing best practices" (https://developers.facebook.com/docs/sharing/best-practices#tags) on how to use the App ID. For example, by including an fb:app_id meta tag on your pages.
There is a review process, since last April, but that is only needed if you use permissions for your App. If you just use the plugins, that is not needed.
Can you explain more what is exactly not working?
Update
The time you create a page the Facebook crawler does not know yet what the Opengraph data for that one is. This will happen after the first share, but if you want to ensure it is correct from the first share on, you can force a re-scrape.
This section explains how that works:
https://developers.facebook.com/docs/sharing/opengraph/using-objects#update
When an app triggers a scrape using an API endpoint This Graph API
endpoint is simply a call to:
POST /?id={object-instance-id or object-url}&scrape=true
Please have a look at the following images:
As you can see these two links both send to an external website but, the big link misleads the user into thinking that it is a picture, therefore boosting clicks, likens and shares on the item.
On the other hand the second picture is generated using the traditional sharer.php feature. Does anyone know how to get a large image for link previews? Or is it something achievable only via paid advertising? (I am not sure about this one, that big link is just a blog post, no reason for paid ads)
I am new to Facebook API and app development. I am trying to build a facebook timeline cover website where users can auto upload and publish the cover to a new album created in the website/app name. Then they would be redirected to another page on my website with instructions on how to setup the cover on their profile timeline. Most profile cover websites are using the same method such as myfbcovers.com, facebookprofilecovers.com, profilephotocovers.com, facebook.coversdaddy.com, fbcoverlover.com and newfbcovers.com to name a few. I have been searching the facebook developer pages and several tutorials over the net. Some tutorials I checked are:
http://thinkdiff.net/facebook/graph-api-iframe-base-facebook-application-development/
http://daipratt.co.uk/facebook-api-upload-photo/
http://developers.facebook.com/blog/post/498/
And also several youtube videos.
But there are several confusions I have about the app. Sorry for the questions if they are too basic as I am a complete newbie who is willing to learn. One of the main problems is that most of the tutorials are outdated as the facebook app creation page etc. Now is different and there is no callback url etc. or canvas etc. in options now which are used in the tutorials. In the tutorials, it is mentioned that for creating a website app or facebook app for page, I need a callback URL which I cannot see now. Secondly, if it is mentioned in those tutorials that I need SSL in my website for an app but none of the facebook cover websites listed above have SSL it seems. I also do not have SSL on my server. So, not sure if that is needed and if an app is needed at all on my local server. And all the apps are doing things different such as I can see these URLs on clicking on some of the clickable links for uploading the cover button. Here are a few examples:
http://facebookprofilecovers.com/wp-content/themes/fbcovers/fb/?i=http%3A%2F%2Ffacebookprofilecovers.com%2Fwp-content%2Fuploads%2FHappily-Married-Facebook-Timeline-Cover.png
http://freetimelinecovers.net/facebook/?cov_img=/images/sports-covers/manchester-united.jpg
Some have direct link to the facebook app page such as:
http://apps.facebook.com/profilephotocovers/index.php?id=35 broken link
And only one website seems to have the publish_stream etc. in the url itself
https://facebook.com/dialog/oauth?client_id=162046520556852&redirect_uri=http%3A%2F%2Ffacebook.coversdaddy.com%2Fi-m-not-a-monster-1242.html&state=e4abcdc1d9288be8233a7ac4aa243997&scope=user_photos%2Cpublish_stream
On checking through Live HTTP header, it seems all websites are following a similar pattern which is directly used in the URL in the last website. For example, here are a few steps of the other websites I saw while checking with Live HTTP header.
https://graph.facebook.com/oauth/authorize?client_id=112308188876405&redirect_uri=http://www.myfbcovers.com/oauth/callback&scope=publish_stream,user_photos,email
https://facebook.com/dialog/oauth?client_id=237897089598589&redirect_uri=http%3A%2F%2Ffacebookprofilecovers.com%2Fwp-content%2Fthemes%2Ffbcovers%2Ffb%2Findex.php&state=0ca1581f006bdd80bd5da78e95179f3a&scope=publish_stream
And so on.
I could also notice that almost all websites were taking auth for only publish_stream and nothing else. Only myfbcovers.com is an exception which also asks for user_photos and email. Rest are not asking for the same and so perhaps publish_stream is the only permission needed.
So, to create the app is there any tutorial. And do I need to host the app on my own server in a sub directory of the website or does it make direct call to facebook. The reason I am asking is because it seems Facebook apps if hosted on local server needs SSL mandatory whereas none of the above websites have SSL/https. And if I do not need to host the app on my own server then how can I make the photo upload link to facebook and then return back to the website for the rest of the instructions. I am using Wordpress on my website like most of the other sites are doing and so, that should not be a problem I suppose. Any help would be highly appreciated. I am willing to learn properly and some good tutorials for creating the photo album and then uploading the photo to the user's album etc. would be fine too if not with the full code. Any help would be highly appreciated.
NOTE: I have removed the HTTP and WWW part in many of the above URLs as I can only post a maximum of two links being a new user. Please add them if needed in those where they are not present.
Ok, I did not install all the applications above to see exactly what they did. I think your question is long... but pretty straight forward. This is what I understand your question to be :
You would like to create a cover photo generator that will allow users to customize their cover photo by uploading files, maybe doing some editing to them. Also maybe using templates of cool ideas and in the end being able to update their cool new cover photo directly into their profile.
This is not very complicated to do although to this date there is no real documentation (by facebook) about how to dynamically update the cover photo. However there are ways of creating photo albums and uploading photos to there.
If you are planning to make your application run with in facebook - that means use the apps.facebook.com/your_app_name, and have canvas or tab URLS, then you will have to purchase an SSL certificate.
Finnaly, in order to get as close to the functionality your want, you might have to make some sacrifices (becuase changing the cover photo is not possible yet with the Graph API).
To locate the cover photo album you'll have to manually scan through all the users albums names - and for that you'll need the user_photos permission.
Once you have created the photo you want, you could possibly let the user upload it (publish_stream permission needed for this) to a different album, and then give the user some detailed instructions using screen shots and direct them exactly how to change their cover photo.
I recommend you read through the Authentication documentation decide what permissions you need (such as user_photos for the users photos and publish_stream for uploading a new picture or creating an album.)
In addition, there are many many tutorials on the Official Facebook Documentation Pages and their Developers Blog- check them out before going onto other sites that have written their own tutorials. Facebook does update their API quite a bit - but they also (recently) have been pretty good on updating their documentation to mirror the changes to the API...
As serious developers using a 3rd party API (
Graph API ), it is solely our responsibility to keep up to date with changes and to write code and applications that comply with their platform policies.
I want to add a link to my Facebook page that will open new information within my page. Not a website, but information from a scoring program my bowlers use. I'm not a programmer by any means and have no programmer on staff I am trying to teach myself these things as I go along.
First of all, I have no idea if what I want to add is called a "tab" or an "app." I can't really seem to find a good explanation as to what the difference is. They both kind of sound the same to me. I've tried to figure out how to add both and have found a lot of great websites and information on Facebook that kind of leads you through the process.
The problem is all of them seem to expect me to already know what things like, JavaScript, canvas urls, FBML, etc... and I don't. So I'm getting tripped up on the steps even as I'm trying to work my way through the steps. I guess I'm kind of looking for a page entitled something like "Facebook developing for ignorant people."
I really appreciate any help you can give me.
Please forgive my ignorance here but I have searched and searched for how to do this and just keep coming up against a wall.
What are Facebook Tabs?
The tabbed structure multiplies your possibilities. Tabs help keep Pages organized so people know where to go to get different pieces of information. The Wall tab is for dynamic content, the Info tab has static information, the
Photos tab contains photos albums and Fan photos, etc
What are Facebook Apps?
Apps on Facebook are web apps that are loaded in the context of Facebook in what we refer to as a Canvas Page.
What is a Canvas Page?
A Canvas Page is quite literally a blank canvas within Facebook on which to run your app.
Now where you may have been confused is that you have ability for your app to be used within the context of a Facebook Page via a tab. So it is a custom tab
So now to what you want
I want to add a link to my Facebook page that will open new information within my page.
You want to add a new piece of information to the page. Is it static content. If it is just the rules of the scoring program, then you can use a Tab. Previously one was able to accomplish this using a simple FBML tab. Put Facebook has phased this out.
FBML will no longer be supported as of January 1, 2012
Two quick ways to deal with your problem
Use the Info tab description to place the information
Search for apps that offer this functionality for example TabPress
The longer way (long term) would be to follow this guide and bite the bullet for learning web hosting and development
http://developers.facebook.com/docs/appsonfacebook/pagetabs/
Any more information in terms of languages, and steps depends on exactly what you would like to do. I am not really sure what you mean by showing the bowling information. For the moment I am thinking it is just static information. So all you need to know is how to use the following HTML tags
html
head
body
p
I just want to get some opinions before I tackle this head on. So far, I've set up a wordpress site and managed to get all post made on this site, appear on facebook on notes. However, all the plugins that do the following functionality that I require, have either been discontinued, or stopped working due to facebook changing their layout.
This is what i need:
The site can be either Drupal or Wordpress (but I'm willing to sacrifice that if there is some other app that I don't know of that can do the points to follow)
All posts made on my site, must be able to appear on Facebook as NOTES (both Drupal, Wordpress and pretty much anything with RSS feed capability can do this)
Any comments made on my site, must go to Facebook and appear there too. (this is probably NOT going to be possible, unless people end up logging in with their facebook details, which is not what I want)
Any comments made on Facebook MUST appear on my site
Point 4 is more important than point 3. I can live without point 3, but I CANT live without point 4. There are quite a few wordpress plugins that claim that they can do this, but I assure you, they don't work! They worked on the principle of scanning the page for content, and due to layout changes, it won't find the right values anymore.
Any input would be greatly appreciated!
Have you had a look at Facebook for Drupal and Facebook Connect. They seem promising.