• 締切済み

Facebook「いいね」ボタンのサイズ変更

Facebook「いいね」ボタンのサイズの変更方法を教えてください。 下記サイトから「いいね」ボタンを表示させるコードを作成しました。 https://developers.facebook.com/docs/reference/plugins/like/ しかし、サイズが少し小さいので大きくしようと思いCSSで変更できないか試したのですが、私の知識が低くなかなかうまくいきません。 どなたか「いいね」ボタンのサイズの変更方法か、オリジナル画像にする方法をご存知の方がいらっしゃいましたらご教授お願いします。

みんなの回答

  • shockatz
  • ベストアンサー率80% (153/191)
回答No.2

いくら何でもCSSじゃ無理かと。。 そもそもFacebookサーバ取得だし。 CSSで不可能なら全部NGとかは暴論だけど(笑 画像にしてしまえば問題ないと思います。 http://indigonote.com/2011/09/14/original-like-button/

tsyok
質問者

お礼

shockatzさん ご回答ありがとうございます。 やっぱりCSSでは無理なのですね。。。 画像で対応してみようと思います。 URLありがとうございます、大変参考になりました。 ただ、タイトルは『Facebookの「いいね!」ボタンをオリジナルデザインに変更する』なのですが、内容が「いいね」ボタンではなくて「シェア」ボタンを画像にするでした。 自分なりに「いいね」ボタンを画像にする方法を調べてみます。 ちょうど「シェア」ボタンも設置しようと思っていたところだったので、大変参考になりました。 ありがとうございます。

全文を見る
すると、全ての回答が全文表示されます。
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

firefox + firebugで調べれば、それがどこかはすぐわかります。 ただ、それはiframeで外部のHTMLを埋め込んでいる部分なので、こちらでは無理です。  ficebookのサーバーにあるスタイルシートを書き換えてもらわないとできません。 具体的には、https://www.facebook.com/plugins/like.php?api_key=113869198637480&locale=ja_JP&sdk=joey&channel_url=https%3A%2F%2Fs-static.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D17%23cb%3Df7d908e4094d16%26origin%3Dhttps%253A%252F%252Fdevelopers.facebook.com%252Ffaceb57b8883da%26domain%3Ddevelopers.facebook.com%26relation%3Dparent.parent&href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Freference%2Fplugins%2Flike%2F&node_type=link&width=450&layout=standard&colorscheme=light&show_faces=true&send=true&extended_social_context=false のHTML中の70行目当りに書かれているスタイルシートです。  結論から言うと不可能です。

tsyok
質問者

お礼

ORUKA1951さん ご回答ありがとうございます。 Facebookのサーバーにあるスタイルシートを書き換えてもらわなければいけないのですね。。。 リンクについて大変勉強になりました。 .pluginButton...というところですね、 『https://static.xx.fbcdn.net/rsrc.php/v2/y7/x/IJYgcESal33.png』に手の画像があったのですね。 いつも回答していただきありがとうございます。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • Facebookのいいねボタンについて

    ホームページに、下記のサイトのサービスを利用して、Facebookのいいねボタンを設置しようと考えています。 【Like Button】 http://developers.facebook.com/docs/reference/plugins/like/ Facebookのいいねボタンの設置は無料ですか? 初歩的なことですいません。ご教授お願いします。

  • ブログにFacebookのいいねボタンを設置したい

    質問があります。 掲題の通りです。 FC2の掲示板で聞いたのですが、2日ほど返事がないのでこちらで質問させて頂きます。 http://developers.facebook.com/docs/reference/plugins/like-box/ このFacebookのページのGetcodeで文字コードを入手できるのですが、 それを自分のブログのどこにどうすれば設置出来るようになるのかがわかりません。 FC2というブログサービスを利用しています。 このコードをどこに入れればいいねボタンを設置出来るようになるのか・・・。 ちなみにFacebookでもブログの宣伝用ページを持っていて、 ブログにいいねボタンを設置して、いいねを押すと、Facebookの宣伝用ページのいいねが増えるという形にしたいです。 よろしくお願いいたします。

  • FacebookのLike Boxが真っ白

    FacebookのLike Box内の記事が今日(昨日?)から突然表示されなくなりました。 公式サイトでコードを取得し直そうとしてみたのですが、「Show Posts」にチェックを入れるとやはり記事が表示されない状態となります。 https://developers.facebook.com/docs/plugins/like-box-for-pages 同様の現象に遭遇された方、また対策をご存じの方はいらっしゃいますでしょうか?

  • HPに「いいね!」を追加したいが何故かできません。

    https://developers.facebook.com/docs/reference/plugins/like-box/ Facebook Page URLに自分のFacebookページのURLを入力すると右側にプレビューが表示されるのですが プラグインコードを入手しホームページ製作ソフトでプレビューすると20秒くらい固まってから 「このプログラムではこのWEBページを表示できません」と出るか何も表示されません。 HTML5 XFBML IFRAME と3種類コードができますがどれもだめです。 できればIFRAMEで配置したいのですがどこが間違っているのでしょうか?

  • FBのいいねボタンが表示されません!

    https://developers.facebook.com/docs/plugins/like-button このページを参考にして、Get codeでソースを拾ったのですが、まず上のコードを<body>直下に、下のコードを表示したい場所に記述しましたが、何も表示されません。 ローカルでの確認です。 もしかしてサーバー上でないと確認できないのでしょうか? それと、いいね!ではなく、海外のサイトなのでlike!にしたいと思います。ソースのどこかをen-USなど変換すればいいのでしょうか。 どうぞ宜しくお願い致します。

  • WORDPRESSでFACEBOOKいいねボタンを

    WORDPRESS(無料版使用、ドメインのみ取得)でFACEBOOKの「いいね」ボタンを投稿につけたいと思い試行錯誤を重ねましたが、うまくいきません。いろいろググり、次の様に記述しましたのですが、狙い通りボタンが表示されません。 <タイトル>いいねボタンのテスト 以下投稿の本文 (HTMLというのでしょうか?) いいね <a href="https://www.facebook.com/plugins/like.php?href=https://brasileiro365.wordpress.com/?p=1438&preview=true&width=450&layout=standard&action=like&size=small&show_faces=true&share=true&height=80&appId=フェイスブックのID">https://www.facebook.com/plugins/like.php?href=https://brasileiro365.wordpress.com/?p=1438&preview=true&width=450&layout=standard&action=like&size=small&show_faces=true&share=true&height=80&appId=フェイスブックのID</a> 上記を保存してプレビューしますと、添付画像上部のスクリーンコピーのように表示されます。リンクされた文字の部分をクリックしますと新しくページが開かれ、「いいね」ボタンが下部のスクリーンコピーのように出てきます。 このボタンを投稿したページの下に表示したいのですが、どこが悪いのでしょうか。どのようにすれば、良いのでしょうか教えてください。

  • facebookのAPP IDが確認できない

    facebook developersの「アプリ」ボタンを押すと 自社のfacebookページに遷移してしまいます。 facebookページを作った際、 facebook developersでAPP IDを取得した記憶はあるのですが 内容を忘れてしまいました。 それを確認する方法を調べたのですが http://developers.facebook.com/apps 以下のページに飛ぼうとすると全て 自社ページに遷移してしまい、その先に進むことができません。 原因や対処法がわかりましたらお教えいただけると幸いです。 よろしくお願いいたします。

  • facebook いいね!ボタンについて

    会社のホームページを製作し ページごとにfacebookのいいね!ボタンを配置しようとしています とりあえず数ページにいいね!ボタンを配置し ボタンをおしているのですが 自分のfacebookのタイムライン、友達のニュースフィードに記事が反映されません ただアクティビティログには反映され、友達のページから自分のfacebookページを見ると いいね!の記事が反映されています ページ内のタグは下記のような感じです <html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml"> <head> <meta property="og:title" content=""> <meta property="og:description" content="" /> <meta property="og:type" content="website"> <meta property="og:image" content=""> <meta property="og:url" content=""> <meta property="og:site_name" content=""> ※og内の""の中は、実際は入れてあります 下記も入れたりしていますがダメでした・・・ <meta property="fb:admins" content="" /> <meta property="fb:app_id" content="" /> </head> <body> <script type="text/javascript"> var url = document.URL; document.write('<iframe src="http://www.facebook.com/plugins/like.php?href='+ … scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe>'); </script> もしくは <iframe src="http://www.facebook.com/plugins/like.php?href=ht … scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe> ※ボタン内のURLは実際のものとは違います </body> </html> 現状のURLがテスト用のアドレスだからなのかもしれませんが 行き詰っています・・・ 何卒よろしくお願い致します

    • ベストアンサー
    • CSS
  • いいねボタンのコメント用ポップアップが消える

    こんにちは. HTML初心者です. Facebookのいいねボタンを設置したところ,正常に動作しないようなので質問させていただきます. 【症状】 ウェブページに設置したFacebookのいいねボタンを動作確認のためにボタンをクリックしたところ, 表示されるはずのコメント用ポップアップが一瞬表示された後,何も操作していないのにすぐに消えてしまい困っています. この時点ではいいねボタンのカウントは増えません. ポップアップが消えた後は,いいねボタンが「承認」という文字になり,クリックすると別ウィンドウで「「いいね!」を認証」というページのポップアップが現れ,「いいね!」または「キャンセル」を選べるようになります. ここで「いいね!」を押すとカウントは増えるのですが,コメントを書き込むことができません. コメントを書いた上でいいね!と押せるようにしたいのです. 【動作確認したパソコン】 Windows XP 【動作確認したブラウザ】 Google Chrome (バージョン 24.0.1312.57 m) Firefox (バージョン 16.0.2) 以下にソースコードの一部を示します. 埋め込みコードはFacebookコネクトのページ (http://developers.facebook.com/docs/reference/plugins/like/) から発行しました. HTML5で記述しています. (XFBMLでも試しましたが,同様の症状が出ました.) ======================================== 【HTMLタグ】 <html xmlns="http://www.w3.org/TR/xhtml1" lang="ja"> 【BODYタグ内】 <!-- Facebook共有ボタンスクリプトここから --> <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/ja_JP/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <!-- Facebook共有ボタンスクリプトここまで --> <!-- Facebook共有ボタンここから --> <div class="fb-like" data-href="<!-- 表示させたいページのURL -->" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div> <!-- Facebook共有ボタンここまで --> ======================================== オブジェクトデバッガ(http://developers.facebook.com/tools/debug/og/object)で確認しても, 特にエラーや警告はありませんでした. コメント用ポップアップを正常に表示させるにはどのようにしたらよいでしょうか. iframe版は正常に動作することを確認済みです. iframe版のほうがIEでも表示できるなどのメリットがあり,そちらのほうが推奨されていますが, コメントも書き込めたほうがいいので,HTML5かXFBMLで設置したいと考えております. なにか足りない情報やご指摘がありましたらご連絡ください. よろしくお願いいたします.

  • フォントサイズを変更するボタンについて

    JQUERYでフォントサイズを変更するボタンを導入したのですが、CSSでフォントサイズを指定していると変更ボタンを押しても変更しません。 下記のようなソースなのですが、CSSのimportantのような事はJQUERYでは出来ないのでしょうか? 優先順位はCSSより低いのでしょうか? <script type="text/javascript" src="js/jquery.textresizer.min.js"></script> <script> $(function(){ $("h1+ul+ul a").textresizer({ target: "#contentsleft,#contentsright,.copyright,address",type: "fontSize",// サイズ指定方法 sizes: [ "13px", "15px", "20px"],// フォントサイズ selectedIndex: 1 // 初期表示 }); }); </script> また、最近あまり見なくなったのですが、WEBのプロは閲覧者にサイズは決めてもらったほうが良いのでもう今後は使わない方向に行っているのでしょうか?