2017-06-17 11 views
0

添付画像のように小さなウィンドウをクリックすると、Facebookの共有ボタンをクリックしようとしていました。

the pop-up showed when clicking the share button

私はdevelopers.facebook.comにそれを行うための方法を見つけましたが、問題は、私はすべてのでそのボタンをカスタマイズすることはできませんよですが、私は特定の幅で自分のボタンを作りたいです、高さ、背景画像、テキストなどが表示されますが、これはできないように見えます。共有ボタンを含むdivのクラスを変更するとその機能が無効になります。私はこの問題を捜したが、明確な解決策を見つけることができませんでした。StackOverflowの似たような質問さえも、問題ははっきりと答えておらず、答えもありません。Facebookの共有ボタンをカスタマイズする

Javascript、Jquery、またはブートストラップを使用していますか? ここに私のコードです:

<html> 
    <head> 

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
     <script src='http://connect.facebook.net/en_US/all.js'></script> 

    </head> 
    <body> 
     <div id="fb-root"></div> 
     <script> 

      (function(d, s, id) { 

      var js, fjs = d.getElementsByTagName(s)[0]; 

      if (d.getElementById(id)) return; 

      js = d.createElement(s); js.id = id; 

      js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9"; 

      fjs.parentNode.insertBefore(js, fjs); 

      }(document, 'script', 'facebook-jssdk')); 

     </script> 

     <div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-size="large" data-mobile-iframe="true"> 
      <a class="fb-xfbml-parse-ignore" title="Facebook share" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;src=sdkpreparse">Share</a> 
     </div> 

    </body> 
</html> 

答えて

0

私はそれをsloved、それは、私はここで解決

Custom image for Facebook share button

を非常に簡単見つかった 私は唯一のdivは、いくつかのコードのようにして onclickイベントを持つ作るために必要な

以下:

<div><img src="fbicon.PNG" alt="Share on Facebook" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent('https://developers.facebook.com/docs/plugins/'),'facebook-share-dialog','width=626,height=436'); return false;" /></div> 
関連する問題