I am new to facebook API. I've integrated feed dialog successfully. I want to add some CSS to feed dialog. How can I load a FB feed dialog in a DIV tag so that I can add some text above the FB dialog. (For ex: text like share it with your friends... and some instructions)
To display the feed dialog I've used JavaScript SDK. Below is the code...
FB.ui({
method: 'feed',
name: 'Feed dialog',
link: 'http://testmysite.com',
display: 'iframe'
}function(response) {
if (response && response.post_id) {
alert("successful");
});
Any help would be appreciated.
Thanks
Facebook Dialogs are not customizable in this fashion. From Facebook's documentation (emphasis mine):
Dialogs provide a simple, consistent interface to display dialogs to users.
You might want to create your own dialog and use the appropriate Facebook Graph API calls to post to a user's feed.
You cannot style Facebook ui elements, such as the like button share button, ui dialog etc. You can only customize the ui through the parameters Facebook provides you. For the full list of parameters look https://developers.facebook.com/docs/reference/dialogs/feed/. A quick look, and I dont think you can customize the text on the ui dialog.
Hope this helps,
Tyrone
Related
Im trying to share some content with the share dialog of facebook.
My target is to share a product that a costumer bought. I like to share a custom text, an image of the product and the product link.
It should look like that:
I know that Facebook scrapes the URL I pass and gets it information based on the page, but I really wish that I can pass the text at least to the share dialog.
So the question is how to customize the informations that are being shared.
I tried different solutions, like using the sharer.php link and with the FB SDK with share_button that uses FB.ui.
Sharer.php
<div class="fb-share-button"
data-href="http://www.facebook.com/sharer.php?s=100
&p[url]=http://bit.ly/myelection&p[images][0]=http://election.gv.my/assets/vote.png
&p[title]=My customized title
&p[summary]=My customized summary"a-width="100">
</div>
Share-Button with JDK
<div class="fb-share-button" data-href="http://www.gartenxxl.de/p-1473049000">
</div>
I did not try to use the Javascript SDK and the FB.Ui method to create a share-dialog, because I did not want to register as Facebook-Developer yet and create an App for the FB-Api-Key, but maybe thats the only way.
Then I would try that like this:
JS
$('#'#'#share_button').click(
function(e){e.preventDefault();
FB.ui(
{
method: 'feed',
name: 'This is the content of the "name" field.',
link: 'http://www.groupstudy.in/articlePost.php?id=A_111213073144',
picture: 'http://www.groupstudy.in/img/logo3.jpeg',
caption: 'Top 3 reasons why you should care about your finance',
description: 'This is a Description',
message: ''
});
});
});
Unfortunately, dynamic content is not really possible anymore:
The feed dialog is deprecated and should not be used anymore.
Facebook will probably remove it sooner or later so i would not count
on it.
Even if it would be possible to add a custom message with a parameter, it would not be allowed. According to the platform policy, the message must be 100% user generated, prefilling is not allowed.
All the existing (and NOT deprecated) possibilities only take the URL as parameter and they read the title/description/image from the Open Graph tags of that URL.
The best you can do for bought products is to use the sharer.php, the Share Social Plugin or the FB.ui share dialog. If you want a custom share button design, you would need to go with sharer.php or FB.ui share, of course.
Btw, this link may be helpful for the Open Graph tags: http://ogp.me/
Im looking for a way to customize the standard "Feed Dialog" screen the Graph API offers.
https://developers.facebook.com/docs/reference/dialogs/feed/
The idea is that the Feed Dialog matches the layout of my application and not the standard Facebook layout.
First thought was creating a seperate Dialog Box, which offers the same functionalities as the original box and passing that to the function which posts everything on the users wall.
But I am unable to find a way to implement the textarea, that gives Users the ability to enter aditional text to post.
Anyone who knows if this is possible and can point me in the right direction?
If you want your own interface for posting to facebook, don't use their dialog. Create your own form however you like, and then submit the information with
FB.api('/me/feed', 'post', { message: myMessage }, function(response) {
});
https://developers.facebook.com/docs/reference/javascript/FB.api/
I want to add Facebook OpenGraph tags to my page, but I also want to stick with the style of Facebook Like button that I currently have (a custom image tag).
The OpenGraph plugin instructions suggest you have to use Facebook's own Like button styles, and the customization options are limited.
Is there any way I can apply the Facebook Like code to my own image button?
UPDATE: to be clear, what I mean is that I have an image on my page that links to https://www.facebook.com/sharer/sharer.php?.... I don't have a standard Facebook Like button. Will this mean that the OpenGraph tags on my page don't actually do anything?
The old sharer.php endpoint will read the same meta tags as the Like button - when shared, the Facebook crawler accesses your site and pulls the metadata for the post (image, description, etc)
If you want to generate some sample metadata there's a form on the like button documentation (see 'step 2') to output tags in the correct format.
Use the Debug tool to see what tags Facebook detects on your site.
It's against facebook's policies to try and replicate or re-create the like button.
Adding open graph tags won't affect your page, but they will improve how it appears when shared or liked in Facebook.
You may create a button called share which opens the feed dialog (sharer.php is deprecated) but you must use the real like button, not a custom image tag.
Is it possible to show users custom message with a single OK button in a Facebook-style dialog box, say, in an iframe app? Is this dialog box available in the Facebook (Javascript) API?
Example:
I don't believe that Facebook allows you to display dialogs outside the ones listed in the FB:Dialog documentation on their webpage.
However, this should be possible to implement yourself. Download a copy of the Facebook.js SDK, and look for the code where it draws the dialog. You could then use this wherever you want to draw as many Facebook-esque dialogs as you like!
Edit: This thread from the Facebook developers forum has some good stuff on already-developed FB.ui lightbox clones: reuse facebook lightbox JS
I'd simply like to make an image-click in my FBML page to trigger facebook's ajax dialog box. How do I accomplish this?
I have an FBML tab on my facebook fan page. In the content of that tab, I would like an image to function as a share button.
By following these directions, I can customize a share button, but the image itself that the user clicks on is not customizable. I want to be able to provide my own image, not use the silver share button provided by facebook.
By following these alternative directions I can use my own image. Perfect! Except on thing... Share.php opens as a page instead of as a javascript dialog. So when the user completes the dialog, it closes the whole page!
Here's what it looks like right now. Sorry, you have to click "Like" to see the share image. When you click the image, the share page opens, but I just want the ajax dialog.
I believe you can do what you want using the facebook feed dialogs:
http://developers.facebook.com/docs/reference/dialogs/
this is the javascript that you will have to bind to your onClick event of your link:
FB.ui(
{
method: 'feed',
name: "Name",
link: "http:\\www.facebook.com\pages\#\page_id_here",
picture: "http:\\path\to\image\file.jpg",
caption: "Caption",
description: "Description",
message: "Message"
},
function(response) {
//callback function
}
);