Facebook share not posting image to user wall - php

I am trying to share image and content from a webpage to User's FB wall but it is not posting it. Image is shown in share pop up but not shown in User's wall.
I have following code for this purpose.
In head section i have
<meta property="og:url" content="http://objdevelopment.com/notice/ddfdf" />
<meta property="og:type" content="website" />
<meta property="og:title" content=" Notice of Passing" />
<meta property="og:description" content="Notice of Passing " />
<meta property="og:image" content="http://objdevelopment.com/notice/wp-content/uploads/65a4465e9258729f8085c4d780700dad.jpg" />
and in HTML i have
<div id="fb-root"></div>
<script type='text/javascript'>
(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 = "http://connect.facebook.net/en_US/sdk.js#version=v2.3&appId=937475996303874&status=true&cookie=true&xfbml=true";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Your share button code -->
<div class="fb-share-button" data-href="http://objdevelopment.com/notice/onope/ddfdf/"
data-layout="button_count">
</div>
and it is showing like this http://www.awesomescreenshot.com/image/510674/5e1cdc7572ab3946a36a23ff2c49b014
Clicking on Share button it opens following window
https://drive.google.com/file/d/0B54OjkhFLGPXNXI2MWgya1RRWFU/view?usp=sharing
and on wall it is showing like this http://www.awesomescreenshot.com/image/510678/ca4fc6be51aed2db5049b96546a6cd99
where as my expectations are:
https://drive.google.com/file/d/0B54OjkhFLGPXdGluaF9PNzdEakk/view?usp=sharing
For live testing please visit
http://objdevelopment.com/notice/onope/ddfdf/

Found some resources on web and fixed this issue. i have used following code to fix this
HTML
<a class="fb-share-button fb_share" href="#" data-href="[page_url]" data-image="[image_url]" data-title="[Post_title] " data-desc="[Post_description]" > <i class="fa fa-facebook"></i> </a>
Javascript
<script>
/**FB SHARE**/
window.fbAsyncInit = function() {
FB.init({
appId: 937475996303874,
status: true,
cookie: false,
xfbml: true
});
};
(function(d, debug){var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];if (d.getElementById(id)) {return;}js = d.createElement('script'); js.id = id; js.async = true;js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";ref.parentNode.insertBefore(js, ref);}(document, /*debug*/ false));
function postToFeed(title, desc, url, image) {
var obj = {method: 'feed',link: url, picture: image,name: title,description: desc};
function callback(response) {}
FB.ui(obj, callback);
}
var fbShareBtn = document.querySelector('.fb_share');
//fbShareBtn.addEventListener('click', function(e) {
jQuery('.fb_share').click(function(e){
e.preventDefault();
//alert();
var title = fbShareBtn.getAttribute('data-title'),
desc = fbShareBtn.getAttribute('data-desc'),
url = fbShareBtn.getAttribute('href'),
image = fbShareBtn.getAttribute('data-image');
//console.log(image+ "Hello");
postToFeed(title, desc, url, image);
return false;
});
/**FB SHARE**/
</script>
In Html replace text between [ ] with your own values.

I looked at the source of the provided page, and found no open graph meta tags. You should make sure those meta tags are printed.
You're seeing the correct image on the share box because you specified the path in the data-image attribute on the share button. But Facebook uses a crawler to pick up stuff from your page to show on the wall, and that crawler depends on open graph meta tags, which are missing

I think you have to debug your website url, Here you can see what image facebook is sharing. (https://developers.facebook.com/tools/debug/). Please try it.

Related

Codeigniter: facebook messanger in site, fine with desktop and mobile phones also. But if fb app installed in mobile then cause blank page issue

I have integrated facebook messanger with codeigniter website.
everything is working properly.. for desktop and mobile phones also..
but if fb app installed in mobile, then fb messanger cause blank page redirect issue
My code snippet:
<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
xfbml : true,
version : 'v3.2'
});
};
(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 = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Your customer chat code -->
<div class="fb-customerchat"
attribution=setup_tool
page_id="XXXXXXXXXXXXX"
greeting_dialog_display="hide">
</div>
please suggest me the changes to solve this..

Login With Facebook Button do not work

Currently, I am using this code for login with Facebook link:
<?php Login With Facebook ?>
It works perfectly fine. But I am trying to use official login with facebook button
I placed this code, at the starting of body tag:
<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/sdk.js#xfbml=1&version=v2.9&appId=15885xxxxx491691";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
And using this where i want the button to appear:
<div class="fb-login-button" data-max-rows="1" data-size="medium" data-button-type="login_with" data-show-faces="false" data-auto-logout-link="false" data-use-continue-as="false"></div>
But when i click on the button, It pop-up a new window (to facebook), and then close itself within 1 sec. That's all.
Do i need to change the URL in Javascript or something?
I tried to change the URL in java script like this:
<?php echo'js.src = "'; echo htmlspecialchars($loginURL); echo '";'; ?>
But then even the login button do not show up

how to get javascript code as a responce and set in div from ajax page?

I want to get Facebook comments box, which I am getting from AJAX page in response. But when the data is coming from ajax, I am alerting it. It is showing in alert box, but when I am trying to set it in my div, it's not setting properly.
Here is my piece of code in which I want to set in div to get from the AJAX page.
<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-comments" data-href="https://www.facebook.com/video/embed?video_id=23423424242" data-width="470"></div>
Why is it not setting in the div?
Assign ajax response to div like this
$('#your_div').html(response);

Recommend Button Doesn't show in Firefox

I am using the Facebook Recommend button on my site and it doesn't appear to show up in FireFox browsers. It works in IE, Chrome, Safari, just not FireFox... I have it being shown next to a twitter button which shows up properly in all browsers. Any idea what could be happening?
Javascript:
<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/en_US/all.js#xfbml=1&appId=324704914260494";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Where it should display:
Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<div class="fb-like" data-href="http://www.example.com/index/billdets.php?billnum=<?php echo $billnum?>" data-send="true" data-layout="button_count" data-width="200" data-show-faces="true" data-action="recommend"></div>
Like I said it works in every browser but Fire Fox... any idea? I tried turning on Fire Bug and I get this:
document.defaultView.getComputedStyle(a, null) is null
http://connect.facebook.net/en_US/all.js
Line 67
I have a feeling it could be that I am using Jquery and wowwindow to open this page in a pop-up window but not sure why it is only breaking in one browser.

Social Media Buttons in PHP, HTML: Taking too much time to load and distorting page

I've added social media buttons on my sidebar using PHP and HTML syntax. However everytime I refresh the page, it takes 4-5 secs to load and during the last second it distorts all the context of the page, then it becomes normal and looks exactly the way I want it.
Is there a way to remove this time-lag and distortion of page?
Here is the 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/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script> <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
And I've put this part of the code inside the body.
<div> <g:plusone></g:plusone> </div></br>
Tweet
<div class="fb-like" data-href="http://ph.one.un.org/omt" data-send="true" data-layout="button_count" data-width="800" data-show-faces="true" data-font="arial"></div></br></br></br>
Try and make it so you only have one request. I generally use AddThis for that kind of thing. It's pretty nifty.

Categories