ブログにあらゆる外部コンテンツを埋め込めるWebサービス「Iframely」の使い方 | Takumon Blog
なにこれ SNSのコンテンツ、動画といった外部コンテンツを自分のブログに載せる場合、 単純にリンクを張り付けるよりも、以下のようにHTMLの埋め込みコードを張り付けたほうがビジュアル面で効果的です。 ただTwitterやYouTubeなどの埋め込み対応サイトでも、サイトごとに埋め込みコードを取得する方法が異なるため結構めんどくさかったりします。 また埋め込みコードに対応していないサイトも多いのが現状です。 「Iframely」は、そのような問題を一挙に解決してくれるWebサービスです。 実際このブログでもIframelyを使って外部コンテンツを埋め込んでいますが、かなり便利です。 今回は、「Iframelyでどんなことができるか」、**「実際使ってみた感想」などについてご紹介したいと思います。 最後のほうに「GatsbyでIframelyを使う方法」**も紹介しています。 Iframely
wivern.com | 埋め込み動画のサイズをレスポンシブにする方法
サイバーセキュリティ＆人工知能研究所 サイバーセキュリティや人工知能(機械学習等)を中心に、最新技術を研究しています。 埋め込み動画のサイズをレスポンシブにする方法 YouTube の埋め込み動画のサイズをレスポンシブにする方法 2013/08/02 : TechReports はじめに サイトで Youtube の動画を紹介する場合に、iframe タグで囲まれた「埋め込みコード」を貼りつけますが、固定サイズのため、画面サイズがレスポンシブに変わってくれません。 せっかく、Twitter Bootstrap 等でレスポンシブに対応しても、動画のサイズが固定なままでは、はみ出したりして見た目が台無しです。 そこでいろいろと調べたり試行錯誤した結果、比較的簡単に実装できる方法を見つけたので公開します。 方法は下記のように、CSS で定義した YoutubeWrapper クラスを指定した d
たった一行でさまざまな要素をレスポンシブ対応にするスタイルシート -Fluidity | コリス
iframeを使った地図 Fluidityの使い方 使い方は簡単です。 Step 1: 外部ファイル head内に当スタイルシートを追加するだけで完了です。 <link rel="stylesheet" href="css/fluidity.min.css"> Step 2: HTML あとは、通常通りにHTMLを記述するだけです。 画像の場合 <img src="image.png"> テーブルの場合 テーブルの時はclassを加えます。 <div class="overflow-container"> <table> <!-- table contents --> </table> </div> 地図の場合 <iframe src="https://www.google.com/maps/embed?マップのコード" width="100%" height="450" framebor
Youtubeとかの色々なiframeをレスポンシブ対応する対策 - MEMOGRAPHIX
レスポンシブデザイン、iframeと相性悪くて、普通に作るとスマホでyoutubeはみ出るみたいになる。そこで、よく使うiframeのレスポンシブ対策をまとめた。 Facebook Like Boxまずfb-like-boxをdivで囲う <div class="likebox-container"> <div class="fb-like-box"></div> </div> 次に下記のスタイルを書く。と幅可変になる div.likebox-container .fbcomments, div.likebox-container .fb_iframe_widget, div.likebox-container .fb_iframe_widget[style], div.likebox-container .fb_iframe_widget iframe[style], div.likeb
HugeDomains.com
Captcha security check actyway.com is for sale Please prove you're not a robot View Price Processing
カウントダウンタイマー
ブログやホームページで使えるカウントダウンツールです。 オリジナルカウントダウンタイマーで記念日、締め切り日までをCOUNTDOWN。 カウント終了時間やコメントの設定が簡単に設定でき、ブログパーツとして貼り付けたりできます。カウントアップもできます。 カウントダウンタイマーNEO 終了時間 タイマー表示 例：「日まで」を選択した場合、時間以下は表示されません。 注：「日まで」で24時間を切ると「0日」のみの表示になります。必要に応じて終了時間を1日伸ばすなどしてください。 0表示を消す 0になったカウント・単位を非表示にします。 0日の表示を消す(中コメントと改行も消えます) 時間換算 例：「時間に換算」を選択した場合、日を時間に換算して表示 標準時地域 標準時を設定するとその地域（国）の時間を基準にカウントします（世界中で同じ時間にカウントダウンが終了します）。 「設定しない」を選択す
Facebookページへのページタブ追加が一瞬で行えるブックマークレット
以前、「FacebookページへのIFrameタブ追加方法が変更」で紹介したとおり、FacebookページにIFrameタブ（以下ページタブ）を追加するには、次のようなURLをたたき、表示された画面でページタブを追加したいFacebookページを選択する必要があります。 https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&display=popup&next=YOUR_URL が、手動でURLを入力するのは面倒なので、その後「Facebookページ IFrameタブ追加ツール（下）」を作りました。 Facebookページ IFrameタブ追加ツール 気がついたら340いいね！ほど頂いてます。ありがとうございます。 が、これもアプリIDやページタブURLの入力をしないといけないのでやや面倒です。 ということで前置きが長くなりま
FacebookページへのIFrameタブ追加方法が変更
Facebookの開発者ブログで、「2012年2月1日にすべてのアプリケーションのプロフィールページを削除します」というアナウンスがありました。 Removing App Profile Pages この関係で、2011年12月10日以降に新しく作成したアプリケーションについては、「アプリのプロフィールページを見る」というリンクが表示されなくなりました。 2011年12月10日以前に作成したアプリケーションのメニュー 2011年12月10日以降に作成したアプリケーションのメニュー また、このリンクがなくなったことでFacebookへのIFrameタブ追加方法も変更されています。 ということで、FacebookページへのIFrameタブ追加方法および、アプリのプロフィールページの作成方法を紹介します。アプリの作成手順については省略しているので、「Facebookのタイムラインにアプリを追加す
ページタブアプリ(iframe)の作成とFacebookページへの追加方法
すでにお持ちの方も多いと思いますし、設定自体簡単ですのでFacebookページ自体の登録方法は割愛させていただきます。 ページタブアプリの作成方法 まず、Facebook開発者にアクセスしましょう。 右上にある「新しいアプリケーションを作成」をクリック。 アプリの名称を入力します。 Herokuを使ってiframe内のコンテンツを作成する場合、下の「Web Hosting」にチェックします。 Herokuは、ウェブサービスのホスティングサービスですが、私は使ったことがないので、ここからは自分でサーバーを用意することを前提に説明を続けます。 セキュリティチェックをします。ほんと見にくいです。 ページタブをクリックして内容を入力します。 今まで私は、http:// で始まるURLのみ「Page Tab URL」の欄に登録していたのですが、セキュアな接続をしているユーザーが閲覧した場合に備え、h
WordPressでiFrameが消えないようにする記述が必要なくなったようです – うにまくら.jp
以前、WordPressでiFrameが消える時の解決方法で書きましたが、今まではWordpressの投稿画面のHTML編集モードでiFrameを直接入力しても、ビジュアル編集モードにするとiFrameのタグがごそっと消えてしまう問題がありました。 この問題が、WordPress3.2.0では解消しているようです。 先ほど、functions.phpから必要な記述を消した上で試したところ、今までは消えていたiFrameが、消えなくなっていました。 正式にそういう対応をしたという情報を見かけたわけではないので、もう少し前から解消しているのかもしれませんね。 ↑ビジュアル編集モードに切り替えても、デフォルトで消えない。また、表示も少し変わったようです。 今後、最新のWordpressを導入する際は、この問題を気にしなくてすみそうです、よかったー！ ただ、あくまで3.2.0以降の話なので、PHP
WordPressでiFrameが消える時の解決方法 – うにまくら.jp
WordPressで記事を投稿する際、HTML編集モードでiFrameを直接入れても、ビジュアル編集モードに切り替えるとiFrameが勝手に消されてしまいます。 あまりないかもしれませんが、例の1つとしてはGooglemapがあげられます。 その時の対処法をご紹介します。 iFrameがごっそり消える GooglemapをWordpressのブログに貼ろうと、コードをコピペします。 ビジュアルモードだとタグがそのまま表示されてしまうので、コピペする時はHTMLモードです。 このまま保存して公開すれば問題ないのですが、ビジュアルモードに変えた途端、iFrameのタグがごっそりと消えてしまいます。 HTMLモードに戻してみると、こんな感じです。 コードが半分以下になってしまっているのが、目に見えて明らかです。 iFrameが消えないようにする 各テーマフォルダ内にある「functions.ph
Facebookページの作り方 2012年1月版
2013年3月23日 Webサイト制作 一年ちょっと前に「Facebookページを自由にカスタマイズする方法」という記事でFacebookページの作成方法を説明したのですが、Facebookはコロコロ仕様を変更するため、その記事を読んでもFacebookページは作れませんｗ 今や使い物にならない記事にもかかわらずアクセス数はかなりあるので、訂正…というか新仕様にあわせたFacebookページの作成方法を説明します。 ↑私が10年以上利用している会計ソフト！ 冒頭でも書きましたが、Facebookページの作り方についての記事は、半年以上前に書かれたものはアテにしないほうがいいです。それほどFacebookは仕様変更のスパンが短いのです。この記事もあと半年後には書き直しなのか…そうなのか…。 基本的なFacebookページの作り方 まずはFacebookページを新規作成します。こちらの「Fac
WordPressで作成したFacebookページのIFrameタブデザインを崩さない方法
WordPressで作成したFacebookページのIFrameタブで、デザインを崩さずにきちんと表示させるためのTipsを紹介します。 １．問題点 次のような、WordPressとjQuery Tabs UIを使ったタブページを、FacebookページのIFrameタブに表示するものと仮定します。 上の場合は期待通りの表示になっていますが、場合によっては次のようにjQuery UI Tabsのスタイルが適用されず、崩れて表示される可能性があります。 余談ですが、WordPressを使って上記のjQuery UI Tabsによるタブページを表示するカスタマイズは「Facebookページプロフェッショナルガイド」に掲載しています。宣伝です（笑）。 Facebookページ プロフェッショナルガイドposted with amazlet at 11.07.16蒲生トシヒロ 竹村詠美 原裕 大元隆
jQuery で iframe 内の要素にアクセス ： iframe 内を書き換え - 実験室 - ぐたり
jQuery で iframe 内の要素にアクセス (iframe 内を書き換え) ※ このページでの jQuery は、Google AJAX Libraries API から Ver.1.4.* 系をロードしています。 iframe 内の要素を書き換える (iframe 内は同一サーバー) 例 ： iframe 内、class 名が classC の全要素に、任意の文字を追加 $('#iframe00').contents().find('.classC').append('<em>★デュフフ<\/em>'); 実行 ソース表示 iframe 内の要素を書き換える (iframe 内は別サーバー) 例 ： iframe 内、div タグの全要素に、任意の文字を追加 $('#iframe01').contents().find('div').append('<em>★デュフフ<\/e
「いいね！」ボタンを設置しよう │ facebook-japan
Tweet 「いいね！」ボタンを設置しよう 「いいね！」ボタンをフェイスブック外部のホームページやブログに設置することで、よりたくさんのつながりをもつことができます。 これはソーシャル・プラグインと呼ばれる仕組みです。 Facebookが「いいね！」ボタンのソーシャルプラグインを 2010年4月に公開した直後、24時間以内に10億回以上もクリックされたといわれています。 たとえば、あなたのブログに「いいね！」ボタンを設置し、それを見た人がクリックした場合、ブログとFacebook内の両方で「○○さんがいいね！と言っています」と表示されましす たくさんの人にクリックしてもらえれば、それがきっかけであなたのブログへのアクセスが爆発的に増える可能性もあります。 「いいね！」ボタンがクリックされると、その都度そのWEBサイトへのリンクが張られます。 つまり、みんなが「いいね！」といってい
Facebookページに複数の「いいね！」ボタンを設置したい！ ｜ Tips Note by TAM
「いいね！」ボタンは、読者からの反応が直接反映されるので 1つだけではなく複数設置したい場面があると思います。 （人気商品を知りたい、ランキングを作りたい など） （例） プラザ/PLAZA（ルミネ有楽町店） ※公開終了 → ※赤で囲んだ部分が「いいね！」ボタン。 ところが、 Facebookページ 1ページに対し、 「いいね！」ボタンは 1つしか置くことができません。 それでもやっぱり複数の「いいね！」ボタンを置きたかったので、 独自に考えたてみた複数の「いいね！」ボタンを設置する 2つの設置例をご紹介いたします。 ※非常に無理矢理感のある方法ですので、推奨はいたしません。 Facebookの仕様変更等にも十分ご注意ください。 （例） ・ASCII.jp Web Professional 「書籍紹介」 ※公開終了 「いいね！」ボタンから、 各書籍の詳細情報のページへリンクしています。 ▼
facebookでページをiframeで読み込む方法 – creamu
facebookをいじっているんですが、ものすごくわかりにくいですね・・・。 やっとページをiframeで読み込めたんですが、次は覚えてなさそうなので、メモしておきます。 ※2011年5月11日時点の情報です。 まず、width:520px以下でページを作成します。 ※heightを800px以下にしないとiframeで読み込んだときに上下左右のスクロールバーが出ますが、jsで回避します（後述します）。 作成したページをサーバにUPします。 次に、アプリを作成します。 ・フッタの「開発者」/ グローバルメニューの「マイアプリ」をクリック ・「+ Set Up New App」ボタンをクリック ・「Facebook Integration」でタブ名とタブのURL（iframeで読み込むページのURL） を入力 上記アプリのページの「Application Profile Page」にいき、左
iFrameを使ったFacebookページを作る際に気をつけたいこと | バシャログ。
AUのスマートフォンラインナップが発表されましたね。 今まで食指が動かなかったけどやっぱりINFOBARにキュンときたminamiです。 さて、今回も前回に引き続きfacebookの話です。 iframeで自由にページを作ることができるようになったとはいえ、 実際に制作する際には気をつけなければいけないポイントがいくつかあります。 今回はそのあたりを挙げてみました。 スクロールバーを出さないようにする facebookページの表示領域は通常で横幅520px、縦幅800pxとなっていますが、コンテンツのサイズがそれより大きくなると問答無用で横方向のスクロールバーが表示されてしまいます。アプリの設定で「iFrameサイズ」を設定しても変わりません。スクロールバーをページ内に出したくない場合は下記のようなCSSを記述して、万が一コンテンツが大きくなったとしても表示領域が変わらないようにしましょう
iFrameによるFacebookページ作成法と6つのポイント｜Webpark
先日はじめたばかりなのにFacebookについて語るのも偉そうかもしれませんが、せっかくiFrame形式のページを設置したので、その作成方法や個人的に悩んだところをまとめてみます。 今回はiFrameを使ってFacebookページを自由にカスタマイズする方法を紹介します。Facebookページ自体はログインした状態で「Facebookページを作成」にアクセスすると作成することができます。 今まではFBMLというFacebook独自の言語を使っていたのですが、現在はiFrame（インラインフレーム）に移行されています。ということで、上の赤い部分に、自分で用意したサーバーのページを表示するということになります。 移行の理由はよく知りませんが、iFrameだとユーザーがサーバーを用意しないといけないので、やはりサーバーの負担を考えてなのでしょうか。 個人的にインラインフレームはあまり好きではない
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
