personnalisée facebook bouton partager

Je veux partager mes articles sur le site sur facebook (contenu,l'image,le titre)!

mais facebook ne détecte pas d'image correcte.

dans ce cas, j'ai mis une image statique de l'URL.

c'est mon 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>
  • facebook dosnt partager mes présenté image!
InformationsquelleAutor Bahrami-Reza | 2014-02-26
  1. 38

    Vous pouvez utiliser facebook sdk javascript. D'abord ajouter FB Js SDK de 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);
}

    Ainsi, lorsque vous voulez 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 cliquez sur:

    $('.btnShare').click(function(){
elem = $(this);
postToFeed(elem.data('title'), elem.data('desc'), elem.prop('href'), elem.data('image'));

return false;
});
    • Cela ne fonctionne pas, vous obtenez postToFeed est pas défini.
    • il fonctionne très bien, êtes-vous sûr que vous avez ajout de la fonction postToFeed? Pouvez-vous fournir votre code de @jetlej
    • Superbe!!. Cela a fonctionné. J'ai besoin de changer dynamiquement les données et c'est la solution
    • dieu merci, j'ai finalement reçu...il fonctionne
    • Cela nécessite que vous disposiez d'un id d'application, à droite?
    • Oui @DragosRizescu
    • J'ai obtenu l'erreur elem is undefined. Nécessaire de modifier la deuxième ligne de var elem = $(this);
    • Quelqu'un peut-il fournir de l'exemple de cette fonctionnalité

    InformationsquelleAutor artuc
  2. 8

    Le meilleur moyen est d'utiliser votre code, puis stocker l'image dans OG balises dans la page que vous liez, puis Facebook va les ramasser.

    <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 à l'OG balises et comment les utiliser avec des boutons de partage ici

    • Le code ci-dessus ne fonctionne pas..
    • Pouvez-vous m'envoyer un lien et je peux regarder?
    • J'ai ajouté tout comme vous l'avez dit mais ça n'a pas fonctionné jusqu'à ce que j'ai ajouté de la solution fournie par @artuc. Le projet est sur localhost, donc je suis incapable de vous fournir l'url de maintenant.
    • Il ne fonctionnera pas sur localhost comme lorsque vous partagez le lien de la facebooks propres serveurs de vérifier que les url pour les balises meta.
    • Drôle, je reçois vers le bas voté sur ce point, mais il est toujours recommandé de...
    InformationsquelleAutor Adam
  3. 7

    Cette solution est l'utilisation de javascript pour ouvrir une nouvelle fenêtre lorsque l'utilisateur clique sur mesure pour votre bouton de partage.

    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. remarque la fenêtre.ouvrir params sont (url, le dialogue titre, largeur, hauteur)

    function share_fb(url) {
  window.open('https://www.facebook.com/sharer/sharer.php?u='+url,'facebook-share-dialog',"width=626, height=436")
}
    InformationsquelleAutor Emil Reña Enriquez
  4. 6

    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.

    InformationsquelleAutor Valery Levitsky
  5. 3

    Étant donné que nous sommes dans un code php contexte et la variable $url contient le lien que l'utilisateur veut partager, vous pouvez essayer ce 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 cela pour seulement le 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 aussi le style le lien uniquement avec du 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");
}
    • bonne réponse, je voudrais juste ajouter un target="_blank" ou il ferme la fenêtre de partage après la partager
    • belle idée, merci
    InformationsquelleAutor Daishi
  6. 0

    Inclure le facebook bouton sur la page qui 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>
    • c'est un navigateur dépendant de la solution, si le navigateur de l'utilisateur est configuré pour ouvrir les liens dans un nouvel onglet, alors il n'y a aucun moyen de le pop up serait comme nouvelle fenêtre. sauf si vous faites une fonction js pour elle. stackoverflow.com/a/32158402/1418771
    InformationsquelleAutor sabin
  7. 0

    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>
    InformationsquelleAutor Nuno Alex