I have a show page with articles, where people can comment and share using facebook. The problem is that the facebook comments and share button only appears after the second time we reload the page! Anyone know how to solve this issue? Here is my code:
<div class="fb-share-button" data-href="<%= request.original_url %>" data-type="button"></div>
<div class="fb-comments" data-href="<%= request.original_url %>" data-numposts="5" data-colorscheme="light"></div>
And in the layout I have this code:
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pt_BR/sdk.js#xfbml=1&appId=255630284624962&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
I added XFBML facebook like button plugin on my site for activity entities, but button shows only for one of them in random order. Code looks like:
<body>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
...
<fb:like href="<%=activiy1_url%>" send="false" layout="button_count" width="100" show_faces="false" font="verdana"></fb:like>
...
<fb:like href="<%=activiy2_url%>" send="false" layout="button_count" width="100" show_faces="false" font="verdana"></fb:like>
...
<fb:like href="<%=activiy3_url%>" send="false" layout="button_count" width="100" show_faces="false" font="verdana"></fb:like>
...
</body>
Open Graph tags are present on the page. The same problem for iFrame button. What can be the reason ?
Basically I want to display a list of friends (with pictures and names) and invite them to my app I'm creating in rails with the fb_graph gem. The link shows the flow of how this would work, basically you would click an "Invite Friends" button and a list of friends would pop up with a button allowing you to invite the respective user.
http://www.quora.com/User-Acquisition/What-is-the-best-invite-a-friend-flow-for-mobile
Is there a way to do this with fb_graph?
You bet. Assuming you have a working implementation of fb_graph, you can get a list of friends with the following command (from https://github.com/nov/fb_graph ):
FbGraph::User.me(fb_token).friends
You can use that to generate your UI for your friends list, then invite the selected friends, like so ( untested modification from the previous link, as well as https://developers.facebook.com/docs/reference/dialogs/requests/ ):
app_request = FbGraph::User.me(token).app_request!(
:message => 'invitation message',
:to => friend.uid
)
The previous code also can accept a comma separated collection of UIDs.
I'll leave you to design and code the UI, but it is possible, using fb_graph, for sure. Those two links should be solid gold, should you decide to expand the scope, at all.
Thanks for your interest for my gem.
Brad Werth's code works for existing (= already installed your app) users, but probably not for new users.
There are lots of limitations to send App Requests in background to avoid spamming.
That limitation directly affect fb_graph's sending App Request feature.
If you are developing iOS app, I recommend you to use FB official iOS SDK.
https://developers.facebook.com/docs/howtos/send-requests-using-ios-sdk/
Using iOS SDK (or JS SDK in html5 app), you have less limitations.
ps.
I'm not familiar with Android App development nor FB official Android SDK, but I assume they have something similar functionality in their Android SDK too.
Of course Facebook provides a beautiful dialog box to select friends that you want to send requests to. But there is also a nice tool, built in javascript, through which you have the same kind of Facebook Friends selector dialog box.
JQuery Facebook Multi-Friend Selector Plugin
This plugin will make a Graph API call to Facebook and collect your friend list. The advantage of this plugin is that it will load all the friends list in "lazy loading mode".
This might be of some help, I used it on my PHP server and it worked.
This code helps you post, send messages, and also send requests to your friends.
Head tag:
<script type="text/javascript">
function logResponse(response) {
if (console && console.log) {
console.log('The response was', response);
}
}
$(function(){
// Set up so we handle click on the buttons
$('#postToWall').click(function() {
FB.ui(
{
method : 'feed',
link : $(this).attr('data-url')
},
function (response) {
// If response is null the user canceled the dialog
if (response != null) {
logResponse(response);
}
}
);
});
$('#sendToFriends').click(function() {
FB.ui(
{
method : 'send',
link : $(this).attr('data-url')
},
function (response) {
// If response is null the user canceled the dialog
if (response != null) {
logResponse(response);
}
}
);
});
$('#sendRequest').click(function() {
FB.ui(
{
method : 'apprequests',
message : $(this).attr('data-message')
},
function (response) {
// If response is null the user canceled the dialog
if (response != null) {
logResponse(response);
}
}
);
});
});
</script>
Body Tag:
<body>
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxxxxxxxxxxxxx', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Listen to the auth.login which will be called when the user logs in
// using the Login button
FB.Event.subscribe('auth.login', function(response) {
// We want to reload the page now so PHP can read the cookie that the
// Javascript SDK sat. But we don't want to use
// window.location.reload() because if this is in a canvas there was a
// post made to this page and a reload will trigger a message to the
// user asking if they want to send data again.
window.location = window.location;
});
FB.Canvas.setAutoGrow();
};
// Load the SDK Asynchronously
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<header class="clearfix">
<?php if (isset($basic)) { ?>
<p id="picture" style="background-image: url(https://graph.facebook.com/<?php echo he($user_id); ?>/picture?type=normal)"></p>
<div>
<h1>Welcome, <strong><?php echo he(idx($basic, 'name')); ?></strong></h1>
<p class="tagline">
This is your app
<?php echo he($app_name); ?>
</p>
<div id="share-app">
<p>Share your app:</p>
<ul>
<li>
<a href="#" class="facebook-button" id="postToWall" data-url="<?php echo AppInfo::getUrl(); ?>">
<span class="plus">Post to Wall</span>
</a>
</li>
<li>
<a href="#" class="facebook-button speech-bubble" id="sendToFriends" data-url="<?php echo AppInfo::getUrl(); ?>">
<span class="speech-bubble">Send Message</span>
</a>
</li>
<li>
<a href="#" class="facebook-button apprequests" id="sendRequest" data-message="Test this awesome app">
<span class="apprequests">Send Requests</span>
</a>
</li>
</ul>
</div>
</div>
<?php } else { ?>
<div>
<h1>Welcome</h1>
<div class="fb-login-button" data-scope="user_likes,user_photos"></div>
</div>
<?php } ?>
</header>
I inserted the HTML5 likebutton code as described on the facebook developers pages into my HTML5 project.
But the likebutton won't show up on the iPad. Only when I use the old iframe version of the code.
Did I overlook something?
The code:
<!doctype html>
<html>
<head>
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div>
</body>
</html>
Reference: http://developers.facebook.com/docs/reference/plugins/like/
I found the like button would not show up on my iPad as I had already liked it. My wife had not and it showed up on hers. Both IOS 10.2.1 both iPad2 Air.
The like button works fine otherwise on an iPhone and desktops...
I have implemented the Like Facebook Button in my user control. This is my code:
<div id="fb-root"></div>
<script>
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-like" data-href="<%:FBUrl%>" data-send="true" data-width="450"
data-show-faces="true">
</div>
</div>
I tried to add this block on the top of my user control :
<meta property="og:title" content="Welcome to site!" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />
But it doesn't appeared the title either the description while I click on the like box.
Can anyone solve this?
You will need to have two user controls.
One for including in the <head> section that defines the og: tags.
And the other user control that you can include in the <body> that has the like html.
I would strongly suggest using the HTML5 version of the plugin code rather than the xfbml version.