Just curious as I've tried to work this out, realizing the futility of working with iFrames. I've a client who insists on having his businesses facebook like box on his mobile site, as it's his main method of updating fans and followers of the business's happenings.
The main issue is the streaming content caps out at a height of 395px with no scrolling capability on mobile, thus it avails only a few of the latest entries and hides the rest.
Anyone know of a solution?
You could replace it with a combination of a Facebook like button, and code that reads and displays the Fan Page feed using the graph api's page's feed connection (/pageId/feed).
Related
Hope you can help with the below, which I've spent most of this weekend trying to resolve but to no avail.
I use a social share and vote plugin on my website, which works perfectly for G+ Twitter Pinterest etc etc. However my facebook like button simply does not want to work.
Example, yesterday I posted this on my websites facebook page.
https://www.facebook.com/116091541779464/photos/a.496114153777199.1073741829.116091541779464/696621417059804/?type=1
As you can see, this links to this page of my website which has its like, share, +1 counts etc at the bottom: http://www.superluigibros.com/evolution-of-mario
As you can see from the Facebook post it has 85 likes. Yet the website shows only 1 like?
The social plugin that I use asks for an App ID. I have created, and activated an App in Facebook and put the App ID in the relevant field of the plugin.
However I am not sure that the App is actually set up properly on the Facebook side, or maybe it lacks the permission to actually count the likes?
The only other point of note is that I am using another Facebook widget (the one that shows who likes our page) in a seperate module. Could this be conflicting in some way?
If anyone could help would be greatly appreciated. I really dont understand whats up with it
Best regards
Luke
This is the case because those are two completely different things:
On http://www.superluigibros.com/evolution-of-mario the number of likes is the number of times the URL was liked
With https://www.facebook.com/116091541779464/photos/a.496114153777199.1073741829.116091541779464/696621417059804/?type=1 you just posted an image also present on your page to your Facebook pages. The like count show the likes only for this image
So, what you need to do is to add the OpenGraph tags properly to your website, as described at https://developers.facebook.com/docs/opengraph/using-objects#selfhosted-creating Then, you shouldn't share just an image on your Facebook page's feed, but the URL instead. FB will then pull the content for the image etc. from your website upon sharing.
The like counter in your facebook post is handled separately from the likes of your website page. Each "like" that your post receive doesn't count towards the site's like counter.
EDIT: I've just tested your site's like counter, and it's counting correctly as I have just liked it myself.
I want a Like button on my web site that Likes my Facebook profile (rather than my web page), so that when a user clicks it they subscribe to my Facebook posts.
I've created the Like button using the tool at https://developers.facebook.com/docs/reference/plugins/like/
Further down that page there is an FAQ entry:
Can I link the Like button to my Facebook page?
Yes. Simply specify the URL of your Facebook page in the href
parameter of the button.
So, I've edited the href parameter to point to my Facebook page. eg:
https://www.facebook.com/myfacebookid
When a user clicks the Like button it has the desired effect. The user ends up having Liked my Facebook page. This is easily verified by the user going to my Facebook profile and checking that the Like button has changed to Liked.
But. When the user clicks the Like button, and entry appears in their News Feed with a generic Facebook description. ie:
Facebook is a social utility that connects people with friends and
others who work, study and live around them. People use Facebook to
keep up with friends, upload an unlimited number of photos, post links
and videos, and learn more about the people they meet.
I don't want a generic post about Facebook to appear. I want the description to relate to my Facebook account and/or web site.
Normally, I could modify this behavior with the Opengraph og: description tag, but as the page in the href is a Facebook page and not my own, I can't control the Opengraph tags.
I'm pretty sure that this was working okay before I enabled timeline for my account, so maybe this is a timeline bug?
So, how do I add a Like button which a) Likes my Facebook profile rather than one of my own web pages, and b) Posts a description of my Facebook profile rather than give a generic Facbook description?
Are all your fields in the info part of your page filled in, and/or completed? I just tested your theory and it seemed to work as expected, only thing is I know all fields in "info" are filled it. Give that a try.
This may happen if you have filled invalid/incomplete/wrong og tags in past and later changed them. Facebook's cache creates problem sometime.
Try putting all the entries (i.e. all og tags) and then debug them here http://developers.facebook.com/tools/debug. This debugger gives a detailed info about the url with og tags and also clears the cache for you.
This should solve the problem.
You have 3 important fields that used on page opengraph: Name,Description,Profile Image.
They are used when some one post your link on Facebook, or Google or some else web service that handle opengraph.
Actually, the suggested answers currently do not work and there is an open bug / ticket on Facebook for it. Up to now, there's no fix.
The problem is that you can not use simply https://www.facebook.com/myfacebookid. You should copy and paste the exact page URL. If you have a low number of likes it would look something like https://www.facebook.com/pages/[YourPageName]/[Your page Id]/, and this is the URL that you should use at this point.
If it does not work, try also https://www.facebook.com/[YourPageName]/[Your page Id]/.
In short, copy-paste the URL, do not type it manually.
Afternoon. I am currently working a drink search site and started work on adding social media to the search results and detail pages. After a user enters in their search criteria and the results are returned, I have added FB (Facebook) and TW (Twitter) buttons for each result, this way the user can Like or Tweet directly from the results page. However I ran into an issue, the FB and TW links are to the right of every result and I have a skyscraper ad about 10px to the right of the results, so when a user clicks on FB Like, the popup appears behind the ad. Obviously this won't work as it is against Google's TOS to render popups over their Ads, so it got me thinking, there are two ways I can handle this:
Remove the social media links from the results page and render them only on the detail page. I feel the page load impact of rendering social media links, for every result, is limited, as my pagination is currently set to 15 results per page and the JS is asynchronous.
Revisit the UI to move the social icons elsewhere so when a user clicks FB Like, the popup isn't obscuring any Ads.
Wanted to pose this question to the SO community to see if anyone else has come across this issue before and what they ended up doing to resolve it.
Thanks in advance.
I opted to keep the Twitter and Facebook links on the results pages along with detail pages, in order to avoid the overlap issue I just tweaked the UI so the buttons are more too the left and won't cover up the right ad.
I am currently developing UI for a facebook app. Basically, the game is shown on the canvas page and it has navigation in a tab form.
What I need is that when a user clicks "friends" to invite people, the page will show over the game(the game is still in background, and running as it should be). So the page must not reload. To do this I placed the url of the friends requests in the src of an <iframe> and using jquery to hide/show the divs but the problem is the <iframe> will also contain the header, footer and all like facebook.com, but I just want the content because the user is already on facebook. Is there a better approach than what I'm doing? How would I accomplish this?
A good visual example is the navigation of "City of Wonders" facebook app.
You'll need to write a server side script that uses the facebook API to get a list of friends. Then you simply generate the HTML that is necessary to display and use this information.
Also, instead of using a an <iframe></iframe>you could just use a <div>, and use javascript to populate it's innerhtml (via ajax).
Is there a way to embed a Facebook page wall into a website? Without using Graph API?
I want to have the wall exactly as styled from Facebook, with all actions to Like, Comment and Share but from my website.
I'm sorry but there is no way to easy reproduce your wall on your website. You can easily get contents (but it will not reflect the facebook's wall as some content is filtered), using facebook's javascript sdk or graph api, but you won't be able to add universal like button using javascript sdk for every posts, as facebook requires to like some objects (like pages) directly with their like social plugin.
You can check a lot of facebook widgets you can easily implement on your website using Javascript SDK on the fbrell application.
Happy facebook programming!
Based on these requirements, would an iframe produce the desired effect? Maybe even a regular frame? (I haven't used those in a long time, so I don't remember if there's some restriction that would prevent loading external content with them).
When you say you want these actions "from your website" what exactly do you mean? Do you just want to wrap the Facebook content with your own (in a frame) or do you want to actually do something locally with these actions, intercepting them somehow?
You will need to use FBML. or custom code from for using Graph API, i dont think you can do it any other way. look up facebook documentaion for details.
There is no way you can embed the same wall, yet you can use paste your wall's contents on your webpage,
If you want Share, Like and comment button to perform action on your webstie then you have to create your own db and user management
But...
Share, Like and Comment buttons which will effect your original wall in facebook is not possible.
double think. I have been working on a Wall Feed for Pages for some time now, what you are looking for can be done, but you would need to use the Graph API to accomplish..
Sample Here http://shawnsspace.com/plugins/wallfeed.php Likes, Commenting is disabled.
Emulates the Wall for http://facebook.com
I used a combination of Graph API "PHP-SDK 3.1.1", "Javascript SDK". This can be done with pure client side Javascript though.