FACEBOOK

マークアップエンジニアとかWEBディレクターとかをやってる僕が、自分が詰まって、解決したことをここに残しておきますよ。

FacebookのLikebox(いいねボックス)のレスポンシブ対応

FacebookのLikeboxを設置してほしいっていう依頼、たまにあります。

こういうやつ↓
24

これ、Facebook developerページで作成するんですが、
 
作成するときに、widthとheightを入れますよね。

だから当然、横幅と縦幅が固定になりますよね。

すると、レスポンシブサイト制作で、スマホでみたときには、崩れる(はみでる)ことになります。



例えば横幅700pxでlikeboxを作ったときに、 スマホで見ても700pxなので、横がぶちぬかれて飛び出してしまいます。

それを解消するcssがこちらのサイトで紹介されてました。
http://mbdb.jp/hacks/facebook/likebox-responsive-customize-css.html 

 
これに少しだけ追加して
レスポンシブ用にまとめましたので、手順を書きます。 


①Like boxはHTML5で作る

Developerページで、横幅やら縦幅やらをPC用に設定して、GET CODEボタンを押すと、
以下みたいなウィンドウが出てきます。(201310現在)

01

上の方でHTML5とかIFRAMEとか選べます。

これをHTML5にします。

ソースが2つに分かれて出てきますが、気にするこたーない。
両方ともそのまま続けてコピペして、サイトで表示したいところに貼ります。



②スクリプトをdivで囲む。

cssで整形したいから、言われなくても囲むと思いますけど
こんな風にします。

HTML
<div id="facebookLikeBox">
ここにコピペしたスクリプトを貼る
</div>



③そしてスマホが読み込む用のCSSでwidth100%を指定する

CSS

#facebookLikeBox{margin:0 10px;}
#facebookLikeBox .fbcomments,
#facebookLikeBox .fb_iframe_widget,
#facebookLikeBox .fb_iframe_widget[style],
#facebookLikeBox .fb_iframe_widget iframe[style],
#facebookLikeBox .fbcomments iframe[style],
#facebookLikeBox .fb_iframe_widget span{
    width: 100% !important;
    height:250px !important;
}
 
↑コピペでOK

呼び出される中身のいろんなやつらにwidth:100%を指定します。

上記のcssは、スマホで読み込む用のcssなので、一番外側を

@media screen and (max-width: 640px) {
ホニャーラー

でかこってます。 

スマホでみたときにlikeboxの横幅が縮んで100%になりますが、heightはそのままで、中身が全部表示されないので、臨機応変に、height:250pxとか高さしていして調整します。

(ここは結構ざっくりで、ランドスケープモードにしたり、アンドロイドなどのいろんなサイズの端末でみたときに、若干高さが余ったり足りなかったりしますけど。。)

 

ところでLikeboxってマーケティング的に集客効果あるんですかね??

効果出たって話を僕は聞いたことがないんですけども。


 

人気ソーシャルボタン(facebookいいね・tweetボタン・はてぶ・googleプラス)を1ソースで設置する

備忘録的なこのブログでも、ソーシャルボタンを貼っつけました。

今の日本で人気どころの以下4つ
ーーーーーーーーーーーーーーーーーーーーーーーー
・facebookいいねボタン
・tweetボタン
・はてぶボタン
・googleプラスボタン 
ーーーーーーーーーーーーーーーーーーーーーーーー

それぞれのボタン作成のリンク先はこちら

■facebookいいねボタンを作成
facebook developer  

■tweetボタンを作成
Twitter ツイートボタン作成 

■はてぶボタン
はてばブックマークボタンの作成・設置について

■googleプラスボタン
+1button



facebookボタンとはてぶボタンを賢くするために

各作成ページで、そのままスクリプトを作って、ブログなり、サイトなりに貼れば、機能するんですが、運用上ちょっと困った問題もあります。

それは、facebookボタンとはてぶボタンが賢くないってこと。


twitterボタンと+1ボタンは、そのページのURLとタイトルを自動的に引っ張ってきてくれるので、いちどスクリプトを作ったら、どのページに貼っつけるにしても、おなじスクリプトを貼ればいいです。


でも、facebookとはてぶボタンは、スクリプトごとにページURLとタイトルを書き換えなきゃいけない。

例えば、ブログの1ページをかいて、そこにボタンを設置した場合、そのページのURLでスクリプトを作って貼り付けることになりますが、ブログの2ページ目を書いて、そこにボタンを設置したい場合は、また新しく生成されるURLでボタンを作成しないといけない。

これは面倒っすね。


そこで、javascriptで、facebookとはてぶに関しては自動的にURLとタイトルをもってきちゃう仕組みを作ります。

そうすると、4つのボタンすべてで、どのページに貼り付けても、”そのページ”のソーシャルリンクになってくれます。

具体的には以下

<div class="btn_social">
<ul>
<li class="twitter"><a href="https://twitter.com/share" class="twitter-share-button twitter-count-vertical" data-lang="ja" data-count="vertical">ツイート</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></li>
<li class="hatena">
<script type="text/javascript" language="javascript">
document.write("<a href=\""+document.URL+"\" class=\"hatena-bookmark-button\" data-hatena-bookmark-title=\""+document.title+"\" data-hatena-bookmark-layout=\"vertical-balloon\" title=\"このエントリーをはてなブックマークに追加\"><img src=\"http://b.st-hatena.com/images/entry-button/button-only.gif\" alt=\"このエントリーをはてなブックマークに追加\" width=\"20\" height=\"20\" style=\"border: none;\" /></a>");</script>
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async">
</script>
</li>
<li class="facebook">
<script type="text/javascript" language="javascript">
document.write("<iframe src=\"//www.facebook.com/plugins/like.php?href=http%3A%2F%2F"+document.URL+"&amp;send=false&amp;layout=box_count&amp;width=80&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=90&amp;appId=283685701733129\" scrolling=\"no\" frameborder=\"0\" style=\"border:none; overflow:hidden; width:80px; height:90px;\" allowTransparency=\"true\"></iframe>");
</script>
</li>
<li class="googleplus">
<div class="g-plusone" data-size="tall"></div>
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
window.___gcfg = {lang: 'ja'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script></li>
</ul>
</div>

このブログで使ってるものです。

長くてぎょっとしたかもですが、このブログと同じ形、ボックス型のソーシャルボタンを作りたいときは、まるまるコピペで大丈夫だと思います。


(※だめだったら指摘してください・・)


twitterとgoogleplusは作成したまんま貼っています。


はてなの部分だけ抜粋

<li class="hatena">
<script type="text/javascript" language="javascript">
document.write("<a href=\""+document.URL+"\" class=\"hatena-bookmark-button\" data-hatena-bookmark-title=\""+document.title+"\" data-hatena-bookmark-layout=\"vertical-balloon\" title=\"このエントリーをはてなブックマークに追加\"><img src=\"http://b.st-hatena.com/images/entry-button/button-only.gif\" alt=\"このエントリーをはてなブックマークに追加\" width=\"20\" height=\"20\" style=\"border: none;\" /></a>");</script>
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async">
</script>
</li>

 長いので、ウエーってなりますが、よーくみると、

document.write();

を使って、htmlを書き出しているだけです。


はてぶのボタンを作成したときのaタグの部分
<a href="http://b.hatena.ne.jp/entry/●●URL●●" class="hatena-bookmark-button" data-hatena-bookmark-title="タイトル" data-hatena-bookmark-layout="vertical-balloon" title="このエントリーをはてなブックマークに追加">〜
の●●URL●●とタイトルの部分を、document.URLとdocument.titleに置き換えてるだけですね。


document.URL → javascriptでいまいるページのURLを出す命令

document.title → javascriptでいまいるページのタイトルを出す命令



置き換えるとこうなります。

document.write("<a href=\""+document.URL+"\" class=\"hatena-bookmark-button\" data-hatena-bookmark-title=\""+document.title+"\" data-hatena-bookmark-layout=\"vertical-balloon\" title=\"このエントリーをはてなブックマークに追加\">〜);
 
いちいち出てくる「\」は、エスケープのための文字で、「"」とかをjavascript内で文字列として使いたいときは前に 「\」を付けます。「¥」でもOKなはず。


facebookも同じようなやりかたでOKです。


 

いいね!しないと見れないfacebookページを作る

FACEBOOKページで、いいねをしないと具体的なコンテンツが
見れないような ページがよく見られる。

例えばこんなページみたいに。
http://es-es.facebook.com/tokyootakumode

いいねを集めるのに良さそうですね。

これのやり方をメモしときます。

phpを使います。

facebookページの作り方については、こちらのページなどを参考にするといいと思います。
facebookページの作り方


①iframeで呼び出すページを置くサーバーに
php5.2以上が入っていることを確認する。

サーバーの管理ページなどにログインすると、どこかでphpのバージョンが
見れると思います。
phpのバージョンが5.2以上じゃないと使えないみたいです。


②そこにiframeで呼び出す用のphpファイルを置く。
もともとiframeでhtmlを呼び出している場合は、拡張子がphpに変わるので、
フェイスブックページアプリの方でのインクルード先の設定も
あとで変えましょう。


③呼び出すファイルを以下のような構造にする(コピペが吉)


<?php
function parsePageSignedRequest() {
if (isset($_REQUEST['signed_request'])) {
$encoded_sig = null;
$payload = null;
list($encoded_sig, $payload) = explode('.', $_REQUEST['signed_request'], 2);
$sig = base64_decode(strtr($encoded_sig, '-_', '+/'));
$data = json_decode(base64_decode(strtr($payload, '-_', '+/'), true));
return $data;
}
return false;
}
if($signed_request = parsePageSignedRequest()) {
if($signed_request->page->liked) {
print<<<EOF

<html>
いいね!を押した後に見せたいhtmlの内容を書く
</html> 
 
EOF;
} else {
print<<<EOF 
<html>
いいね!を押す前に見せたいhtmlの内容を書く
</html>  

EOF;
}
}

?> 


つまり、phpの中で、両方のhtmlを書いておいて、いいねを押してるかどうか判別して、条件分岐させてるってことですね。

あとは、アップして、確認して、完成!


htmlが用意できていれば、大体15分くらいの作業です。

FACEBOOKアプリRSS Grafittiの設定を変えたときにウォールが更新されなくなった

タイトルの通り。

RSS Grafitti は、FACEBOOKのウォールに、ブログの記事(RSS)を自動で投稿してくれる、便利なアプリだ。

それが今回動かなくなっちゃって、どんなにぐぐっても出てこないし、
最後は一個一個英語を日本語訳して、自己解決したので、誰かの役に立つかもしれないので
ここに記しておきます。

■起こった不具合はこんな感じ。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
・以前にクライアント(企業)のFACEBOOKページのウォールに、クライアントの公式サイトの新着情報を 載せるようにRSS Grafittiを導入していた。
・今回、新着情報のRSSの吐き出しアドレス(xml)が変わったので、RSS Grafittiの管理画面から、xmlのアドレスを変更してSAVEを押した。
・で、ウォールを見てみたけど、変更前と全然変わらなかった。1日経っても変わらなかった。 
・RSS Grafittiの管理画面のPERVIEW(Click here to generate a preview)を押すと、ちゃんと読んできているので、取り込みがエラーしてるわけじゃなさそう。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

■解決したのは、ここだった。

FacebookのRSS Graffiti
FacebookのRSS Graffiti


 EDITで開くと、タブがいろいろ出てくる。
大体、どの説明ブログを見ても、Basicsをいじることまでしか載ってないんだけど、
今回いじったのは、Filterタブ。

そこに、Cut-off date/time
というのがある。

2011-12-04と書いてある。

その下に、
「Stories created before the date/time indicated here, will not be published on your wall.」
と説明が書いてある。エキサイト翻訳に貼りつけて翻訳してみると、
「ここに書いてある時間以前に作成された記事はウォールに公開されません」

ということ。
なんと、そういうことですか。

今は、2011-12-04になってるけど、ここの数字がなぜか2012になっていて、
(たぶん以前は別のXMLを読みに行っていたのに変更したからバグったのかもしれない)
それで、2012年以前(つまり全部)の記事はウォールに反映されない、という
設定になっていた。

なので、時間の右にある「Change」をすかさずクリック

すると、時間を書き込むフォームに行くのかと思いきや、

変なラジオボタン2つと、記事タイトルの並んだプルダウンが出てくる。
FacebookのRSS Graffiti2


よくわからないが、下のラジオボタンをチェックし、
プルダウンの記事は一番古い物を選択して、フィードをSAVEする。

(ここで間違ってもすぐ下のRefleshを押してはいけないよ!
 PREVIEWの上にある、SAVEボタンを押して、保存するんだ!)

それで、1時間くらいまったら、ウォールの 内容が更新されて、無事解決いたした!

FacebookページでIFRAMEでスクロールを出さないようにする

メモがわり。

インラインフレームで読み込まれるページ側に、以下のソースをいれておくと
スクロールバーが消える。

これをheader部分に入れる↓

<script type="text/javascript">
src="http://connect.facebook.net/en_US/all.js"></script>
<script language="JavaScript">
FB.init({
appId: ****************',
status: true,
cookie: true,
xfbml: true
});

window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>

これを<body>の直後に入れる↓

<div id="fb-root"></div>
<script>
FB.Canvas.setSize({ width: 520, height: 950 });
</script>

この520とか950となっている部分は、
読み込まれるページの大きさに合わせて、変更する。


FACEBOOKページの読み込みIFRAMEの大きさは520なので、
横幅は520以上にはできません。


縦幅は、ページの内容によって、可変だと思うので、
少し大きめくらいに置いておけば大丈夫。









記事検索

リモキュー

お仕事のご依頼・お問い合わせはこちら

コーディングのお仕事が得意です。

https://twitter.com/tacshock
タグクラウド
QRコード
QRコード
  • ライブドアブログ