Facebook Like Boxを可変レイアウトにして横幅ピッタリにするカスタマイズCSS
昨日公開した当ブログのスマートフォン版デザイン。 このデザインを作成するにあたって、ちょっとカスタマイズしたのが、Facebookのソーシャルプラグイン「Like Box」です。 デフォルトだと固定幅レイアウトになるので、スマートフォンサイトでは可変幅になるようCSSで調整しました。その実装方法をご紹介します。 Page Pluginでは不要です 追記 「Like Box」が取下げられ、その代替として「Page Plugin」というソーシャルプラグインが登場しました。 こちらのプラグインは、最大幅が500pxしかありませんが、自動的にデバイスに合わせて幅が可変されるようになっており、本記事で紹介しているカスタマイズが不要になります。 「Like Box」は今後一切使えなくなりますので、速やかに新しいコードへ移行することをオススメします。 実装するとこんな感じになります! まずは縦向きで表示
【特定のURL（記事）の、Facebookの「いいね！」「シェア」「コメント」数を取得する】graph apiじゃなくてFQLで取得する｜今村だけがよくわかるブログ
【特定のURL（記事）の、Facebookの「いいね！」「シェア」「コメント」数を取得する】graph apiじゃなくてFQLで取得する このブログのある箇所では、記事一つ一つに対して、Facebookでの「いいね！」「シェア」「コメント」数を、プレーンテキストで取得しています。それでですが・・・去年の末あたりから（12/27,28あたりかな、厳密にはわかっていません）以降に公開した記事に対しては、「graph api」を使用しても取得できなくなっていました。 具体的には、以下のような現象です。 取得できていた例以下は、2012/12/17に公開した記事です。 http://graph.facebook.com/https://www.imamura.biz/blog/web/7998{ "id": "https://www.imamura.biz/blog/web/7998", "sha
【JQuery】主なソーシャルボタンをサイトに一括設置する方法 – ysklog
サイトのアクセスアップは主に検索エンジン対策（SEO）のみという方もまだまだ多いと思いますが、数年前からツイッターやフェイスブックなどのソーシャルメディアを活用したアクセスアップも大きな手段となっています。 ツイッターでツイートされたり、フェイスブックでいいね！を押されたり、はてなブックマークがついたりして拡散すれば、とてつもないアクセスが来る可能性があります。そのため、特別な理由がない場合は、設置しておいたほうが良いと思います。 ここでは、JQueryと「jQuery.socialbutton」プラグインを利用した、主流なソーシャルボタンをサイトに一括設置する方法を説明します。 各種ファイルの取得JQuery本体JQueryの本体はGoogleのライブラリを使用します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/
【WordPress】ブログにレスポンシブ対応したFacebookコメントを設置する方法
いや、そりゃあ嬉しいさ。 「いいね！」されると。 ということで、今回はFacebookのコメント欄をWordPressのブログに設置してみようってお話です。 Facebook使ってないけどあったほうがいいと思って。 だってFacebook流行ってるって聞いたもんね(´・ω・｀) コメントをFacebookコメントにしたら、実名ってことから荒らしコメントが減るとか良い面が多いって噂です。 今回は通常のブログコメントも残すパターンなのであまり関係ないですけど。 まあ、スパムはAkismetが守ってくれてるし、荒らされるほどコメントもらったことないんだけどね。ははっ。 で、Facebookのコメント欄を、そのまま設置しても幅が固定されているのではみ出します。 せっかくレスポンシブテーマを使ってるので何とかしたいと思い、（人のを参考に）何とかした方法です。 こんな感じ。 Facebookコメントの
OGP画像シミュレータ | og:image Simulator
OGP画像シミュレータとは？ FacebookのOGP画像は正方形で表示されたり横長で表示されたりするため、デザインがとても大変。 そんな時に便利なのがこのOGP画像シミュレータ。 デザインしたOGP画像をドラッグ&ドロップし、タイムライン上でどう見えるかシミュレートしてみましょう。 https://ogimage.tsmallfield.com/ 1200 x 630 px 以上推奨 https://developers.facebook.com/docs/opengraph/creating-object-types/#properties 最低でも 600 x 315 px、また大きければ大きいほど良いため 1200 x 630 px 以上の画像サイズが推奨されています。画像がクリッピングされるのを防ぐため、縦横比をなるべく1.91:1に近づけるようにしましょう。 （2014年01月
IFTTTで WordPressの投稿記事をFacebook ページに連携させる方法
IFTTT でWordPressの記事をTwitter やFacebook（個人）のタイムラインに連携する方法を紹介させていただきましたが、Facebook ページへの連携の方が個人的にも利用頻度が高そうだったので、今回はWordPress とFacebook ページとの連携方法を紹介させていただきます。 過去に紹介させていただいたTwitter との連携、Facbeook（個人）との連携の記事と重複する内容もありますので、IFTTT で連携先（Facebookページ）を設定する方法からご覧になる方はこちら も参考にしてみてください。 （１）まずは下準備 IFTTT を利用してWordPress の投稿記事をSNS に連携させる場合ですが、下準備としてWordPress 管理画面メニュー 設定 > 投稿設定より の項目にチェックを入れておく必要があります。 Facebook 側は、Face
SNSのシェアボタンを作る為のURL&パラメータメモ - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） ソーシャルブックマークサービスやソーシャルネットワークサービスが巷に多く溢れる昨今、 ページの下部にシェアボタンを追加しているサイトを目にすることも多くなってきました。 ほとんどのサービスがブログパーツとしてコードを配布していますが、勿論仕様もまちまちです。 そこでちょっと備忘録としてまとめておきます。 シェアボタンについて Twitter Facebook Livedoorクリップ はてなブックマーク Delicious Googleブックマーク Yahoo!ブックマーク おわりに シェアボタンについて よくブログ記事の下部に設置されている連中ですね。 基本的にどのサービスも共有用のURLが用意されていて、 そこにシェアしたいURLとタイトルをパラメータで添えてアクセスします。 （サービスによってはタイトルを自動的に取得しに行
OGPの「fb:app_id」とか「fb:admins」って何のために必要なの？
さて。OGPについてのエントリーを書いたばかりですが。 色々頑張って、このブログのOGPは↓こんな感じになりました。 <meta property="fb:app_id" content="1234567890" /> <meta property="og:type" content="blog"> <meta property="og:description" content="***記事抜粋***"> <meta property="og:title" content="***記事タイトル***"> <meta property="og:url" content="***記事URL***"> <meta property="og:site_name" content="Sunday In The Park"> <meta property="og:image" content="htt
HerokuのFacebookアプリテンプレートを使ってみた(準備編) - hongo.dev
クラウド, PHP, Facebook | 00:59 | 少し前に発表された、Facebookに関するこのお話。Heroku | Facebook and Heroku 内容としては、Facebookアプリの管理画面からポチっとすれば、Heroku上にアプリケーションのテンプレートが作成されて、さくっと開発→デプロイ出来ますよ！っていうもの。 ちょうど、運用しているFacebookアプリ(ページ)の環境移行とか検討していて、また、このアプリケーションのテンプレートがどんなものか気になって、Python以外の各言語を実際に使って実験してみました。その過程を残しておきます。 なお、テンプレートのソースはgithubで公開されているので、Heroku無しでも自分で実験することは出来ます。heroku/facebook-template-nodejs - GitHubheroku/faceboo
『SNS企画の参考に！FacebookチェックインとPHPでユニクロキャンペーン風に連動させる』
本を買わずに解決するWeb制作の小技 ホームページ作成でちょっとしたことを参考書を買わずに解決する方法をPHP CSS Webデザイン jQuery Flashを中心に便利な技をまとめていきます！現在、長野県長野市の制作会社でWeb作成中！ これからソーシャルメディアと連携した仕事が増えてくると思う・・・。 イヤ、きっとくると思うので勉強のためにデータを取得してみた。 今回は最近始まったユニクロのキャンペーン「UNIQLO CHECK-IN CHANCE 」がfacebookのチェックイン機能と連動していた仕組みが気になったので、連携部分の実現方法を調べてみた。 Facebook APIを初めて触ってみたが、PHPと連携させてなんとなくそれっぽいものが作成できたので、方法を紹介。 Twitter APIやInstagram APIに比べてFacebook APIは凄い簡単だったのアイデア次
『involverの使い方』
flash＆AIRアプリ研究所別館。 Facebookとは何か？や、 flashとFacebookの連携の仕方を中心に紹介します。 ファンページを作成したら、 今度はいろいろとコンテンツを追加して、 ファンページをにぎやかにしたいものです。 例えば、Welcomeページの追加や、 ウォールへのつぶやき、Facebookアプリによるタブの追加など。 まずは、すでに持っている コンテンツの活かし方を考えたいと思います。 まずは以前紹介した熊坂さんの本で紹介されていた、 TwitterでのつぶやきやYouTube動画を自動的にタブに表示してくれる 「involver」について紹介します。 本に書いていた内容ではわかりにくい部分があったので、 やり方をまとめてみました。 １．involverの公式サイトへアクセス 通常だと、Facebookアプリは Facebookのアプリページから追加することが
【Facebook応用篇】Facebookページの作り方（すぐに使えるテンプレートデータもあるよ） - TokyoHeadTerminal
Facebookページをカスタマイズする方法はいくつかあるみたいですが、Web制作ができる人だったらこれが一番やりやすいと思います。 とりあえず早くテンプレートデータが欲しい！って人はこちらから facebook_page_2011-04-07.zip FacebookページにiFrameを読み込む Facebookページのトップページに iFrame（インラインフレーム）を読み込むことができます。いくつかの制限はありますが、自由にページをデザインできますね。ザックリとした流れはこんな感じです。 Facebookページを作成 開発者登録をする Facebookアプリケーションを作成 iFrame で読み込むページを作成 レッツショータイム！ このページの内容に沿って進んでいけば問題なしと思います。 FacebookページにiFrameを組み込もう｜Social Media Experien
簡単にTwitterのツイートボタンやFacebookのいいね！を設置できるjQueryプラグイン「jQuery.multiSocialService」
簡単にTwitterのツイートボタンやFacebookのいいね！を設置できるjQueryプラグイン「jQuery.multiSocialService」 バージョンアップにて以下の機能が追加されています！ 軽量・簡易版のFacebook Likeやツイートボタン、Like数やツイート数の表示が可能に（バージョンアップ説明ページ） このjQueryプラグインはWebページに簡単にTwitterのツイートボタンなどを設置できるようにしたものです。 現在、以下のサービスに対応しています。 現在対応しているサービス Twitter(Tweet Button) Twitter(Follow Button)(2011/11/10から) Facebook(Like Button) Facebook(Comments Button)(2011/11/10から) はてなブックマーク Evernote(cli
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
FacebookのOGP画像の仕様がまた変更。ニュースフィードでもタイムラインでも欠けないようにする方法。（スマホ対応！最新版 ※9.21追記）