custom facebook share button

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    lt li gt       lt a id  buttton   href  http   www facebook com sharer php s 100 amp amp p title   lt  php echo  title   gt  amp amp p summary   lt  php echo  summary   gt  amp amp p url   lt  php echo urlencode  url    gt  amp 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   gt           lt img src   lt  php echo base url    gt media images share png  alt     gt       lt  a gt   lt  li gt

User · Answer

Well  I use this method on my site    lt a class  share-btn  href  https   www facebook com sharer sharer php app id  your app id  amp sdk joey amp u  full article url  amp display popup amp ref plugin amp src share button  onclick  return  window open this href   Facebook    width 640 height 580    gt    Works perfectly

User · Answer

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   lt a href  someurl com some-article  data-image  article-1 jpg  data-title  Article Title  data-desc  Some description for this article  class  btnShare  gt Share lt  a gt    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

User · Answer

Include the facebook button on the page which you want to share   lt a target   blank  href  https   www facebook com sharer sharer php u http   trial com news php newsid  lt  php echo  content    gt   gt                         lt 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    gt                        lt  a gt

User · Answer

This solution is using javascript to open a new window when a user clicks on your custom share button    HTML    lt a href     onclick  share fb  http   urlhere com test 55d7258b61707022e3050000   return false   rel  nofollow  share url  http   urlhere com test 55d7258b61707022e3050000  target   blank  gt       using fontawesome    lt i class  uk-icon-facebook uk-float-left  gt  lt  i gt      Share  lt  a gt    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

User · Answer

You can simply do something like          lt head gt       lt script gt    window fbAsyncInit   function         FB init         appId               your-app-id      you need to create an facebook app       autoLogAppEvents   true        xfbml              true        version             v3 3                lt  script gt   lt script async defer src  https   connect facebook net en US sdk js  gt  lt  script gt   lt  head gt   lt body gt       lt button id  share-btn  gt  lt  button gt   lt  -- load jquery -- gt   lt script gt          share-btn   on  click   function              FB ui               method   share               href  location href     Current url            function  response                 lt  script gt   lt  body gt

User · Answer

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    lt meta property  og title  content  Facebook Open Graph Demo  gt   lt meta property  og image  content  http   example com main-image png  gt   lt meta property  og site name  content  Example Website  gt   lt meta property  og description  content  Here is a nice description  gt    You can find documentation to OG tags and how to use them with share buttons here

User · Answer

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     lt a class  facebook-share-button  href  https   www facebook com sharer sharer php u  lt  php echo urlencode  url     gt   target   blank  gt  lt img src   img facebook-share-button png    gt  lt  a gt    or this for just plain text     lt a class  facebook-share-button  href  https   www facebook com sharer sharer php u  lt  php echo urlencode  url     gt   target   blank  gt share lt  a gt    You can also style the link purely with css   The html code     lt a class  facebook-share-button  href  https   www facebook com sharer sharer php u  lt  php echo urlencode  url     gt   target   blank  gt  lt  a gt    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

[php] custom facebook share button

Examples related to php

Examples related to facebook

[php] custom facebook share button

Examples related to php

Examples related to facebook

Examples related to share