Accessible Facebook Like Button - facebook-graph-api

Has anyone created a custom Open Graph solution that queries the number of likes and creates an accessible button? Facebook's iFrame and XFBML solutions are both completely inaccessible via the keyboard and screen readers -- and no one seems to care.
The count is super easy to grab, it's the like URL that I'm not sure about. The anchors inside of Facebook's iFrames don't even have hrefs, so I'm currently digging through their scripts for some actionable targets.
Hit this URL with JS or in a browser and you'll get an ID and # of shares (are likes different though? better than nothing i guess): https://graph.facebook.com/http://putyourUrlhere
Any idea how to trigger a like without Facebook's provided code? It's ok if the button is only accessible with Javascript on since screen readers can use JS. Their code obviously requires it anyway. Has anyone done something like this with the Javascript SDK?
I'm trying to figure out if this is even possible, so I'd appreciate any insight!
PS -- iFrames are not inherently inaccessible. The problem is that Facebook's code inside of it is not. http://webaim.org/techniques/frames/#iframe

Facebook finally got around to making the like button keyboard accessible. Just took a while.
https://developers.facebook.com/docs/reference/plugins/like/

It is not supported. Automated likes would compromise the authenticity of the Graph.

Related

Are you able to get hints from what template a message is coming from with dev tools?

I have this website that I'm editing for a friend and they want to get rid of this message at the checkout screen but their boss doesnt know who implemented it. Its an error message at the top in read that says "If you are having trouble checking out, please contact us at sales#cbobaby.com" and is in the check out page. This is an open cart website and I only work with wordpress sites so I'm having trouble figuring out where the source of the message is coming from. I've dug through some of the template files in the theme and I can't seem to find or delete anything that gets rid of it. My question is if there is anything in Chrome dev tools that would help me identify the source or template it lives in? I only use dev tools for adjusting css but I know there's so much more you can do it with. Thanks.
No, DevTools can't relate your front-end code to what generates it for the DOM. For the exact same reason we are unable to persist edits in the DOM to your source.
You need to use grep, or some code editor with "find all" functionality and look for some part of the string. If that fails, search your database and see if it is coming out of there. You can then either edit the database and hope nothing breaks, or try to back-track through the application logic to find where is calling that part of the DB. It should give you some ground as to where to look.
In the Sources tab, you can see the resources, that are loaded when you are on a particular page. You can also use the Inspect tool in the Elements tab to find the element that hosts that bit of text to narrow things down in your search.
To add to this, if content is generated on the server side, the resources you see will likely be a merge from multiple generated sources, e.g. with templates in your case. You can search your solution for aspects of the DOM elements you see in Chrome Developer Tools, but look for the static parts instead of the dynamic parts. For example, the text itself won't be part of the template file, a placeholder will exist - a CSS class could be useful.

List all friends which a user is also following using Facebook Graph API

As a personal utility, I'm trying to write a short script (preferably in python but essentially I'm looking for the proper REST calls) to get a list of all my friends who I am also following (actually, list all friends and for each one see whether I am also following them).
I tried playing with the API but:
Could not get the pagination right. There seems to be a link to the next results "page", but when I follow this link, the next page is always empty. I do realize this is mainly do to my incompetence with this API, but I just didn't think it would be so difficult.
When I view a specific friend's connection to my user, I can't seem to find this information. This data is obviously stored somewhere, as it is available using standard methods (i.e, open up a friend's facebook page in the browser and look for the "Following" part)
This may sound like a silly question and I did try playing around with the graph explorer, after generating a token with all possible permissions, but I did not get far.
Please help me make my life a little easier by not having to resort to the manual way of opening up every single friend page, this sounds exhausting.
PS: This may sound like a personal question and not very professional, but as I was struggling with this task, I though it may be of use to other individuals looking for this functionality
Thanks!
Listing all friends isn't possible with v2.0 API. https://developers.facebook.com/docs/apps/upgrading/
As long as you have an application that can still run v1.0 API calls then you can do an FQL call
SELECT is_following, target_id FROM connection WHERE source_id=me() AND target_id IN (SELECT uid2 FROM friend WHERE uid1=me())

Controlling Internet Explorer in order to enter username/password

I was looking into trying to get my C++ application to do the following:
Open internet explorer
Open a webpage
Enter a name and password into specific forms in the webpage
Click the submit button on the webpage to open a new page
From my searching on the Internet it seems like using COM may make this possible, although I may be incorrect on that. I am doing my best to learn COM at the moment but some help would be great. I'm looking to do this without using MFC.
I have noticed this question which I kind of what I am looking for but I am having trouble understanding the suggested solutions. For example, I do not have a IWebBrowser2 option in my toolbox.
EDIT:
To make my question clearer, I had this task complete in a C# version by simply running a coded UI test but this will not work with C++. I am looking to open IE (not in the application itself), find the username and password forms, pass them string, then find the submit button on the page and click it.
This is very possible from c++. You will have to dive into the winapi to do some Keystroke stuff as well as window handling.
I'm not going to go into all of the code, but you have to do something like the following:
Start ie (if you give it a command line arg with the webpage, it will
open that page).
Make sure the ie window is focused (either just wait
if you want to keep it simple or use window's api to go through each
open HANDLE and find the window you want)
Use SendInput to send an Alt + D (to gain focus to the url bar, in firefox it will be a CTRL + L instead)
Use SendInput and javascript injection to modify the DOM as necessary
You can also submit the form (after everything is as you want it) using the above JS injection capability.
Yes, it is possible, but you have to embed a web browser control in your application, and it is not straightforward (I don't think you can automate DHTML in an external instance of Internet Explorer via COM).
I see that you don't want to use MFC, and this complicates even more the problem. Perhaps you can do it via ATL, I advise against even trying to do it without a framework.
If you could use MFC, then you could use a CDHtmlDialog form and access the underlying COM interfaces to automate the actions.
In the past, I developed an MFC application that used HTML as its user interface, but I used the CDHTMLView class that you can find here: http://www.codeproject.com/Articles/1783/Integrating-DHTML-into-MFC-Views
You can use this as an entry point for learning how to deal with DHTML events and how to play around with the IWebBrowser2 interface.
You should really take a look at WebDriver which is able to do exactly what you are describing. See (http://code.google.com/p/selenium/wiki/InternetExplorerDriverInternals) for more information about the InternetExplorerDriver internals. Even if you are not able to use the project directly, you can certainly browse the source to get a better idea of how what you want to do can be achieved.
What you want to do makes not much sense.
There are many APIs available to embed a browser view into your program. For example Qt offers this.
Then you can just do your HTTP POST request yourself and display the answer you get in your browser view.
That is a much cleaner solution.
Pro tip: Don't use Internet Explorer.

How to use Frictionless sharing to post to the users wall with open graph

So I've heard we can now post to the users wall without them prompting it, and without them confirming the text that is posted. First of all is that correct? I don't want to do anything that risks my app being blocked for breaking policy! I can't find much on this new subject. If that is correct do I have to do anything special to enable it or do I literally just start posting to their wall? Obviously I have requested the wall post permission.
Here you find the documentation of Frictionless Requests
http://developers.facebook.com/docs/reference/dialogs/requests/
I just looked for the same thing and this is what I found. You need to define objects and actions in order to use frictionless sharing.
https://developers.facebook.com/docs/opengraph/tutorial/#define

Facebook comments box: Possibility to really set num_posts = 0?

I'm using the comments box on my site to get more users socially involved and at the same time I'm reading the Graph API to print those comments on the same site to make it crawlable for search engines. Problem is now that for a real user the comments show up twice (through my graph api print AND through the actual fb:comments plugin box).
Any ideas how I could solve this ?
Would prefer to show only the comment-field from FB and use my own echo to show the comments as this way enables it to REALLY moderate the comments (not just set it to limited visibility). Thanks for any suggestion!
I found some sort of solution for my problem. It's not perfect, but the closest one can get to what I wanted:
Instead of directly returning the query from the Graph API, I attached a script to the comment.create event. This script writes the new comment into my database, where I can moderate again. This way I have to double-moderate, but therefore I don't have any unwanted comments on my site.
I also found out that with the old deprecated comment-box you can set the comments that get natively shown by facebook to 0. That way only the already moderated comments get shown by my own script coupled with my database. It works the way I want it, even for friends of the unwanted commenter.
Hope that helps someone else too!