19

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&amp;p[title]=<?php echo $title;?>&amp;p[summary]=<?php echo $summary;?>&amp;p[url]=<?php echo urlencode($url);?>&amp;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>
Improve this question
1
  • facebook dosnt share my presented image! Commented Feb 26, 2014 at 9:58

7 Answers 7

Reset to default
46

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

<a href="someurl.com/some-article" data-image="article-1.jpg" data-title="Article Title" data-desc="Some description for this article" class="btnShare">Share</a>

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; });
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

This does not work, you get postToFeed is undefined.
it works great, are you sure you've added the function postToFeed? Can you provide your code @jetlej
Superb!!. This worked. I need to dynamically change the data and this is the solution
Yes @DragosRizescu
I got the error elem is undefined. Needed to change the second line to var elem = $(this);
|
12

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") }
Improve this answer

Comments

9

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

Improve this answer

3 Comments

Can you send me a link and I can look at it?
I added all as you said but it did't worked until I added solution provided by @artuc. The project is on localhost so I'm unable to provide you url as of now.
It won't work on localhost as when you share the link facebooks own servers will check that url for the meta tags.
8

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.

Improve this answer

Comments

4

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"); }
Improve this answer

1 Comment

good answer, i would just add a target="_blank" or it closes the sharing window after the share
2

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>
Improve this answer

Comments

0

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>
Improve this answer

1 Comment

this is a browser dependent solution, if the user's browser setting is set to open links in new tab, then there is no way it would pop up as new window. except if you make a js function for it. stackoverflow.com/a/32158402/1418771

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.