「スマホ」タグアーカイブ

CSS, facebook, スマホ・パソコン・Web関連

Facebookの「いいね」ボタンと、タイムラインをスマホサイトでレスポンシブにする。CSSでdata-widthの設定

コメントする

Facebookのタイムラインを埋め込むと横幅が660px固定になる

 
スマホやタブレット向けの可変Webサイト、いわゆるレスポンシブデザインというものがあるが、Facebookのタイムラインが微妙にレスポンシブデザインに対応していない。
 
 
これはCSSでうまく対応できるので、紹介しておこう。

 
 

<div class=”fb-page” data-href=”https://www.facebook.com/あなたのFacebookページ” data-width=”660″ data-height=”800″ data-small-header=”false” data-adapt-container-width=”true” data-hide-cover=”false” data-show-facepile=”false” data-show-posts=”true”><div class=”fb-xfbml-parse-ignore”><blockquote cite=”https://www.facebook.com/あなたのFacebookページ”><a href=”https://www.facebook.com/あなたのFacebookページ”>Universal Strength</a></blockquote></div></div>

 

これがFacebook公式からコピペした状態だ。

見ても分かる通り、data-widthが660で固定になっているように見える。何やってねんザッカーバーグ。アホか。
と思った人も少なくなかろう。
 
 

実はFacebookは自動でスマホ向けに最適化される

 
実は、「data-width」は660と書いてはいても。実は自動である程度サイズを合わせてくれる。
fb-responsive1
↓↓↓↓スマホ表示↓↓↓↓
fb-responsive2
 
 
 
 
これでも使えなくはない。ただし、スマホで見ると、画面横幅いっぱいいっぱいにFacebookのタイムラインが広がり、スマホ画面のフリックでスクロールしてもタイムラインのスクロールになってしまう。

結果としてWebサイト自体のスクロールがやりにくくなるわけだ。
ザッカーバーグ。アホか。
 
 

「data-width: auto;」は無効化されるので、その対策

 
古いバージョンのFacebookタイムライン表示だと「data-width」を任意の値や、 data-width: auto;にすることで対応できたが、現行(2015年7月時点)のバージョンではこれは自動で無効化されてしまう。
 
これは、下記をスタイルシートにコピペでうまく対応できる。
 

div.fb-like-box,
div.fb-like-box iframe[style],
div.fb-like-box span {
max-width: 97% !important;
}
div.fb_iframe_widget,
div.fb_iframe_widget iframe[style],
div.fb_iframe_widget span {
width: 97% !important;
height: 100px !important;
}

 
つまり、「画面の幅の97%までにしろ。」ということで、両端(または右端)に3%の隙間ができるので、ページをスクロールさせられる。
 
もちろん90%でも80%でもいい。
 
 
これをスマホサイトのみに適応させるには、下記のような、メディアアンカー内に記述するといい。

@media screen and (max-width:600px){

}

 
 
メディアアンカーを使わないなら、
 

div.fb-like-box,
div.fb-like-box iframe[style],
div.fb-like-box span {
max-width: 97% !important;
}
div.fb_iframe_widget,
div.fb_iframe_widget iframe[style],
div.fb_iframe_widget span {
max-width: 97% !important; /*←最大値を制限に変更*/
height: 100px !important;
}

こちらをCSSにコピペの方がいいかもしれない。

関連記事：
facebookのタイムラインの div に display:none; のCSSを適用する方法を利用して、スマホでは非表示にすることも可能。

Ajax他, スマホ・パソコン・Web関連

iPhone, Androidでスマホのタップ(クリック)で電話を掛けるリンクを、PCで無効にする方法

コメントする

スマホページで画像バナーをタップで、電話発信させる方法

 
リンクや画像をタップするだけで電話をかけることができる機能がある。
SafariやSkypeをインストールしている場合、普通の電話番号をリンクにする機能がある。
この機能には色々と問題点があるので、それをクリアしていこう。
 

従来の方法の問題点

<a href="tel:xxxxxx"></a>

 
01-0000-0000
と、リンクにしておくと、タップ（クリックすると）
tel-tap-to-submit
 
こんな感じのダイアログが出てきて通話ができる機能だ。
 
しかし、このリンクをPCでクリックしてしまうと、
 
tel-link-error
 
こんな感じのエラーが出てきて嫌な感じになる。
 
これを解決する方法はいくつがあるが、iPhoneだけでなくAndroidにも対応する方法を紹介する。
 

<span>を使って、PCの時にリンクにならないようにする方法

 
まず、HTMLファイルの電話のリンクにしたい部分を

<span class="tel-link">01-0000-0000</span>

 
と記述する。
 
これは、span なので、当然リンクにならない。PCでクリックしても何も起こらない。
 
スマホの時にこれをリンクに書き換える必要があるので、
 
jsファイルに

$(function(){
    var ua = navigator.userAgent;
    if(ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0){
        $('.tel-link').each(function(){
            var str = $(this).text();
            $(this).html($('<a>').attr('href', 'tel:' + str.replace(/-/g, '')).append(str + '</a>'));
        });
    }
});

と書いておく。
 
分からなければ、ここから右クリックして「リンク先を保存(言葉違う可能性あり)」tel-link.jsをダウンロードしよう。
 
あと、jQueryが必要なので。こちらもダウンロードしておこう。既に導入済みの場合は新たにアップロードする必用はない。
jquery-1.11.3.min.js
 

HTMLファイルにjsファイルを読み込ませる記述

 

<head>
.......中略......
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/tel-link.js"></script>
</head>

 
という感じで、

<span class="tel-link">01-0000-0000</span>

と記述したHTMLファイルのheadの間に記述。

 

jsファイルをアップロードして搭載

 
jquery-1.11.3.min.js
tel-link.js
HTMLファイル
 
上記3つをサーバーにアップロードする。
 
 
完了。
 
 
 

関連記事：
スマホやSkypeでホームページ上の電話番号の自動リンクを無効化する方法

画像リンクをタップして電話発信するiPhone, AndroidのバナーやボタンをPCで無効にする方法

Ajax他, スマホ・パソコン・Web関連

画像リンクをタップして電話発信するiPhone, AndroidのバナーやボタンをPCで無効にする方法

コメントする

スマホページで画像バナーをタップで、電話発信させる方法

 

下記の従来の方法は絶対NG

<a href="tel:xxxxxx"></a>

 
<[code]a href="tel:01-0000-0000">01-0000-0000"></a>[/code] と、リンクにしておくと、タップ（クリックすると） tel-tap-to-submit
 
こんな感じのダイアログが出てきて通話ができる機能だ。
iPhone, Androidでスマホのタップ(クリック)で電話を掛けるリンクを、PCで無効にする方法
でも紹介した通り、spanをリンクにしてスマホで電話発信する事ができる。
これでPCでクリックしてしまっても、
 

アドレスのプロトコルが不明です
telというプロトコルはどのアプリケーションにも関連づけられておらず、
Firefox でこのアドレスを開く方法が分かりません。
・このプロトコルを使用するアドレスを開くには、別のソフトウェアをインストールする必要があるかもしれません。
 
というような、エラーメッセージが出てくることはない。
 
ただし、iPhone, Androidでスマホのタップ(クリック)で電話を掛けるリンクを、PCで無効にする方法では、文字リンクにする必要があった。
 
これを画像リンクやバナー、ボタンで行う方法。もちろんiPhoneだけでなくAndroidにも対応する方法を紹介する。
 

<span>を使い、PCでリンクにさせない

 
まず、HTMLの電話のリンクにしたい部分に

<span class="tel-link"><img src="img/co_contact.jpg" alt="0100000000" /></span>

 
と書く。

alt から電話番号を取得するので、必ず記入する事！
 
jsファイルに

$(function(){
	var ua = navigator.userAgent;
if(ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0){
	 $('.tel-link img').each(function(){
		var alt = $(this).attr('alt');
			$(this).wrap($('<a>').attr('href', 'tel:' + alt.replace(/-/g, '')));
		});
	}
});

と書いておく。

分からなければ、ここから右クリックして保存などで、tel.jsをダウンロードしよう。

あと、jQueryが必要なので。こちらもダウンロードしておこう。既に導入済みの場合は新たにアップロードする必用はない。
jquery-1.11.3.min.js
 

拡張子やファイル名がちゃんとなっているか注意！

HTMLファイルにjsファイルを読み込ませる記述

 

<head>
.......中略......
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/tel.js"></script>
</head>

 
という感じで、

<span class="tel-link"><img src="img/co_contact.jpg" alt="0100000000" /></span>

と記述したHTMLファイルのheadの間に記述。

 

jsファイルをアップロードして搭載

 
jquery-1.11.3.min.js
tel.js
HTMLファイル
 
上記3つをサーバーにアップロードする。
 
 
完了。
 
 
 

関連記事：
スマホやSkypeでホームページ上の電話番号の自動リンクを無効化する方法

iPhone, Androidでスマホのタップ(クリック)で電話を掛けるリンクを、PCで無効にする方法