Je souhaite partager les articles de mon site internet sur facebook (contenu, image, titre)!
mais facebook ne détecte pas l'image correcte.
dans ce cas, j'ai mis une URL d'image statique.
voici mon 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>
Vous pouvez utiliser facebook javascript sdk. Ajoutez d'abord le SDK FB Js à votre code (veuillez vous référer à 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);
}
Alors quand tu veux partager quelque chose
<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>
Et enfin JS pour gérer le clic:
$('.btnShare').click(function(){
elem = $(this);
postToFeed(elem.data('title'), elem.data('desc'), elem.prop('href'), elem.data('image'));
return false;
});
La meilleure façon est d'utiliser votre code, puis de stocker l'image dans des balises OG dans la page vers laquelle vous créez un lien, puis Facebook les récupérera.
<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">
Vous pouvez trouver de la documentation sur les balises OG et comment les utiliser avec les boutons de partage ici
Cette solution utilise javascript pour ouvrir une nouvelle fenêtre lorsqu'un utilisateur clique sur votre bouton de partage personnalisé.
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>
et dans votre fichier javascript. note les paramètres window.open sont (url, titre du dialogue, largeur, hauteur)
function share_fb(url) {
window.open('https://www.facebook.com/sharer/sharer.php?u='+url,'facebook-share-dialog',"width=626, height=436")
}
Eh bien, j'utilise cette méthode sur mon 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')">
Fonctionne parfaitement.
Étant donné que nous sommes dans un contexte de code php et la variable $url
contient le lien que l'utilisateur souhaite partager, vous pouvez essayer ceci pour utiliser une image personnalisée:
<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>
ou ceci pour du texte brut:
<a class="facebook-share-button" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode($url); ?>" target="_blank">share</a>
Vous pouvez également styliser le lien uniquement avec CSS.
Le code html:
<a class="facebook-share-button" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode($url); ?>" target="_blank"></a>
Le code CSS:
.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");
}
Vous pouvez simplement faire quelque chose comme ...
...
<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>
Inclure le bouton facebook sur la page que vous souhaitez partager
<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>