TwのツイートボタンとFBのシェアボタンをカスタマイズする方法

  • 2013-07-20 (土) 8:00
  • Coding

結構苦戦したので、書いておこうと思います。Twitterのツイートボタンと、Facebookのシェアボタンをデフォルトの表示から、自分の好きな画像などに変更する方法です。

socialBtn-custom

きっかけはFacebookのデフォルトのいいね!ボタンがあまりに重く、画面のロードに大きな影響を与えていたことです。そもそも見た目がイケてない!というわけで、Twitterボタンも含めてカスタマイズすることにしました。

 

まずはデフォルトのソーシャルボタンが生成出来るリンクを載せておきましょう。作り方は他のサイトさんに譲ります。

Facebook いいね!ボタン:Like Button
Twitter ツイートボタン:ツイートボタン

 

で、生成されたコードを見てみるとJavaScriptが含まれていて、その処理でiframeタグを生成して画面に表示しているんですね。どのように処理しているのか詳しくはわかっていないのですが、とにかく重いです。こんな感じで出来上がります。まぁよく見ますよね。

socialBtn-custom-demo-0

 

というわけでカスタマイズするために色々調べ始めたわけですが、僕には譲れない1個の条件があるんですね。それは「別タブではなく、新しい小窓のウィンドウで開くこと」です。その方が明らかに楽だし、イケてます。というわけでその条件を満たす方法を模索しました。

 

さっさとコード書けって話ですよね。。それでは!

Facebook:
本当は”いいね!”ボタンで実現したかったのですが、解決策がわかりませんでした。なので、簡単に実現出来る”シェア”ボタンで代用。

<span id="fbBtn">
  <a href="#" onclick=" 
      window.open('https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href),
      'facebook-share-dialog',
      'width=626,height=436');
      return false;">
    <img src="./images/facebook.png">
  </a>
</span>

 

結果はこの通り。fbボタンを押します。

socialBtn-custom-demo-1

すると新しいウィンドウが開かれました。

socialBtn-custom-demo-2

 

Twitter:
デフォルトのものでも軽いし、条件は実現できるのでよかったのですが、アイコンをFBのものと合わせたかったので。

<span class="twBtn">
  <a href="http://twitter.com/intent/tweet?text=[ここにツイートしたい内容を書きます]"
      onClick="window.open(encodeURI(decodeURI(this.href)),
      'tweetwindow',
      'width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=!'
      ); return false;">
    <img src="./images/twitter.png">
  </a>
</span>

 

結果はこの通り。twiボタンを押します。

socialBtn-custom-demo-3

 

すると新しいウィンドウが開かれました。

socialBtn-custom-demo-4

非常にサクサク動くので、とても満足!ここではimgタグで画像を入れてますけど、文字でも何でもOKです。
色々な記事を参考にさせていただいたのですが、何を見たのか忘れました。ごめんなさい。そしてありがとうございます。

 

Home > Coding > TwのツイートボタンとFBのシェアボタンをカスタマイズする方法

Return to page top