custom facebook share button - php

Question

I want to share my website articles on facebook (content,image,title)!
but facebook doesn't detect correct image.
in this case I put an static image URL.
this is my code:
<li>
<a id="buttton" href="http://www.facebook.com/sharer.php?s=100&p[title]=<?php echo $title;?>&p[summary]=<?php echo $summary;?>&p[url]=<?php echo urlencode($url);?>&p[images][0]=http://www.example.com/images/report/daily_report/KNDR/image(2).jpg" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=no,scrollbars=no,height=400,width=600'); return false;">
<img src="<?php echo base_url()?>media/images/share.png" alt=""/>
</a>
</li>

Answer 1

You can use facebook javascript sdk. First add FB Js SDK to your code (please refer to https://developers.facebook.com/docs/javascript)
window.fbAsyncInit = function(){
FB.init({
appId: 'xxxxx', status: true, cookie: true, 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: 'http://www.url.com/images/'+image,name: title,description: desc};
function callback(response){}
FB.ui(obj, callback);
}
So when you want to share something
Share
And finally JS to handle click:
$('.btnShare').click(function(){
elem = $(this);
postToFeed(elem.data('title'), elem.data('desc'), elem.prop('href'), elem.data('image'));
return false;
});

Answer 2

This solution is using javascript to open a new window when a user clicks on your custom share button.
HTML:
<a href="#" onclick="share_fb('http://urlhere.com/test/55d7258b61707022e3050000');return false;" rel="nofollow" share_url="http://urlhere.com/test/55d7258b61707022e3050000" target="_blank">
//using fontawesome
<i class="uk-icon-facebook uk-float-left"></i>
Share
</a>
and in your javascript file. note window.open params are (url, dialogue title, width, height)
function share_fb(url) {
window.open('https://www.facebook.com/sharer/sharer.php?u='+url,'facebook-share-dialog',"width=626, height=436")
}

Answer 3

Well, I use this method on my site:
<a class="share-btn" href="https://www.facebook.com/sharer/sharer.php?app_id=[your_app_id]&sdk=joey&u=[full_article_url]&display=popup&ref=plugin&src=share_button" onclick="return !window.open(this.href, 'Facebook', 'width=640,height=580')">
Works perfectly.

Answer 4

The best way is to use your code and then store the image in OG tags in the page you are linking to, then Facebook will pick them up.
<meta property="og:title" content="Facebook Open Graph Demo">
<meta property="og:image" content="http://example.com/main-image.png">
<meta property="og:site_name" content="Example Website">
<meta property="og:description" content="Here is a nice description">
You can find documentation to OG tags and how to use them with share buttons here

Answer 5

Given that we are in a php code context and the variable $url contains the link the user wants to share, you can try this to use a custom image :
<a class="facebook-share-button" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode($url); ?>" target="_blank"><img src="/img/facebook-share-button.png" /></a>
or this for just plain text :
<a class="facebook-share-button" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode($url); ?>" target="_blank">share</a>
You can also style the link purely with css.
The html code :
<a class="facebook-share-button" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode($url); ?>" target="_blank"></a>
The css code :
.facebook-share-button {
background-image: url("/img/facebook-share-button.png");
display: inline-block;
height: 32px;
width: 32px;
}
.facebook-share-button:active,
.facebook-share-button:focus,
.facebook-share-button:hover {
background-image: url("/img/facebook-share-button-hover.png");
}

Answer 6

You can simply do something like...
...
<head>
...
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id', // you need to create an facebook app
autoLogAppEvents : true,
xfbml : true,
version : 'v3.3'
});
};
</script>
<script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>
</head>
<body>
...
<button id="share-btn"></button>
<!-- load jquery -->
<script>
$('#share-btn').on('click', function () {
FB.ui({
method: 'share',
href: location.href, // Current url
}, function (response) { });
});
</script>
</body>

Answer 7

Include the facebook button on the page which you want to share
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://trial.com/news.php?newsid=<?php echo $content; ?>">
<img src="http://trial/new_img/facebook_link.png" style=" border: 1px solid #d9d9d9; box-shadow: 0 4px 7px 0 #a5a5a5; padding: 5px;" title="facebook_link" alt="facebook_link" />
</a>