ダリの雑記：WEBプログラム版

FacebookのLike Boxも、もうすぐ終了するそうです。

FacebookのLike Boxは2015年6月23日で終了。Page Pluginに変わります

代わりに提供されている「Page Plugin」へ乗り換えます。

https://developers.facebook.com/docs/plugins/page-plugin

へアクセス。

下図のブロックで

• Facebook Page URL
• Width
• Height
• Hide Cover Photo
• Show Page Posts
• Show Friend's Faces

を設定します。

最後にGet Codeボタンをクリックして、コードを取得します。

ほぼLikeboxの時と変わりませんが、問題点として、

• Widthの最小値（280px）および最大値（500px）が決まっている。
• Heightの最小値が決まっている。

という点があります。

特にWidthの最小値・最大値が決まっているのは痛いです。

サイドバーに持ってくるにも、メインブロックに持ってくるにも何とも半端でどうしたものか。

このあたりのサイズが最近の流行なんですかね？

追記

あれ？この記事読み返してたら、いいね！も昔のコード使えなくなるみたいじゃん。

FacebookのLike Boxは2015年6月23日で終了。Page Pluginに変わります

マジかよ・・・

WordPressやMovable Type、なんでもいいのですがRSSが出力できれば、それを元にFacebookへ投稿できる「RSS Graffiti」が本日、2015年4月30日をもって終了するそうです。

ということで、急いで乗り換え。

色々候補は有ったのですが、最終的に「dlvr.it」を使うことにしました。

https://dlvr.it/

まずは、アカウントを作成します。

右にある「Sign up」ボタンをクリックして、アカウントを作成してください。
FacebookやTwitterアカウントを持っている場合は、それでもログイン可能です。

アカウント作成、またはログインが成功すると、下図の画面になります。
How would you like to start sharing content?

左の「Start Feeding」ボタンをクリックします。

左の「Source」にフィードのURLを入力します。
Your blog or other website URLと書いてますがフィードのURLです。
例：https://nandani.sakura.ne.jp/feed

ラジオボタンでは、次からの投稿を反映させたい場合は、「Wait until a new item is posted.」を選択してください。

URLの入力が成功すると、自動的に正常なURLかどうかを判断して、右の「Choose a Destination」のボタンを選択できるようになります。

今回はFacebookへの投稿なので、Facebookボタンをクリックします。

Facebookログイン画面がポップアップウィンドウで開きますので、Facebookへログインしてください。（すでにFacebookへログインしている場合は、次へ）

一番最初の登録の場合、dlvr.itからFacebookへのアクセスを許可してよいかという画面が開きますが、許可していってください。

最終的に下図の画面になります。

プルダウンで、どのタイムラインに投稿するかを選択してください。
Facebookページの権限を持っている場合は、それも選択可能です。
プルダウンを選択したら「Continue」ボタンをクリックしてください。

最後の画面になります。

右下の「Done」を選択してください。

登録が成功すると、下図のメッセージが開きます。

以上が最初の登録です。

２回目以降の新規登録

２回目以降の新規登録は左上の「+ Add Route」ボタンから登録します。

微妙にインターフェースが変わりますが、やることはほぼ同じです。

左の「Source」の「+ Add」ボタンをクリックします。

フィードボタンをクリックします。

Feed URLを入力し、どのタイミングからタイムラインに投稿するかをプルダウンで選択します。

「save source」ボタンをクリックします。

続いて右の「Destinations」の「+Add」ボタンをクリックします。

「Facebook」ボタンをクリックします。

「Connect to Facebook」ボタンをクリックします。

※ログイン中の場合は、自動的にログインしているFacebookのアカウントで上記の画面となります。

プルダウンで投稿先タイムラインを選択し、「Continue」ボタンをクリックします。

最後に「Save」します。

同じタイムラインに複数のフィードを登録する場合

同じタイムラインに複数フィードを登録する場合は、すでに登録済みの「Source」の「+Add」から片側のみを登録します。

複数登録されるとこんな感じになります。

まあ、当たり前だしこんなことすんな！って話ではあるんですが、一応メモ。

Twitterウィジェットコードを新規発行して、サイトに張り付けた後、もう１つ新しいコードを発行しようと、その画面のまま、「ユーザー名」を変更したところ、さきほどサイトに張り付けたウィジェットが変更したユーザーのタイムラインになってしまいました。

これまでのTwitterウィジェットコード発行画面って、完全に「新規作成」オンリーだったし、FacebookのLikeBoxも同様で、登録済みのものを「編集」するという概念では無かったので完全にうっかりしてしまいました。

注意しましょう。

旧Twitter ウィジェットがついに終了したようですね。

提供終了と言われてからもしばらくは使えてたんですが、今日見たら完全に消えてしまっていました。（もしかしたら数日前から？）【追記】６月12日から使えなくなってたみたいですね。気づくのが遅かったorz

新しくウィジェットコードを発行する場合は、アカウントはなんでもいいのでTwitterにログイン後

https://twitter.com/settings/widgets

にアクセスし、右上の「新規作成」ボタンからウィジェットコードを発行してください。

ウィジェットコード発行画面

以前はドメインの設定も必要だったはずだけど、これはもう無くなったみたいですね。

あれ結構めんどくさかったから、それはありがたい。

でも高さの調整が全然聞かないTT　なんでだ！

【追記】

<a  href="https://twitter.com/dari_zakki"  data-widget-id="347178416799371264" height="450">@dari_zakki からのツイート</a>

というようにaタグにheightを指定したらうまくいった。

ウィジェットコード発行するときの、高さ入力は何のためにあるのか・・・（バグ？）

metaタグのviewportの設定にて、「target-densitydpi=device-dpi」とすると、表示する解像度がそのままデバイスの解像度となります。

スマホの横幅（短辺）のサイズが640px時代だったら、これでも特に問題なかったんですが、今や1080pxや1280pxなんて機種も登場しています（横幅がですよ！）。

この高解像度スマホの場合、問題となるのがSNSのボタン（「いいね」とか「ツイート」とか「Google +」ボタン）

これがめっちゃ小さくなります。米粒レベル。

サンプル（高解像度のスマホをお持ちの方は下記のURLにアクセスしてみてください）：
https://nandani.sakura.ne.jp/phptest/sns_button.php

これらはボタン専用コードを埋め込んでおくと、自動的に表示されるボタンため、スタイルシートによるサイズ調整ができません。

これの解決方法は「target-densitydpi= medium-dpi」にするか、「target-densitydpi」をそもそも記述しない（デフォルトがmedium-dpiだから）

もし解像度によってスタイルシートを切り替えている場合は、サイズの基準が変わりますので注意しましょう。

もしくは、width=320とする手もあります（もはや古いやり方らしいですが。）

<meta name="viewport" content="width=320, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

サンプル：
https://nandani.sakura.ne.jp/phptest/sns_button.php?dpi=medium

これで、幅320pxの場合のみ考えておけば良いので非常に楽です。

欠点としては、タブレットで見たとき、やたら文字や画像が大きく感じてしまいます。（どんな解像度でも320pxの画面を引き延ばして表示するようなものだから。）

やっぱりこれからはレスポンシブ・ウェブデザインしかないのかな～。

参考サイト

htmlをiPhoneに対応させる

これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ - てっく煮ブログ

いくつか作成したサイトのシェアボタンの表示が昨日からおかしくなってしましました。

一時的なものかな？と思っていたのですが、今日になっても変わらず・・・

ついに廃止されてしまったのか？

対策方法が下記のサイトに書かれてましたが、実際現場行かないと修正できないのもあるしどうしたもんかな～

【速報】Facebookのシェアボタンがついに廃止に？（追記アリ） - 俺のメモ

おとなしく「いいね！」にしとけば良かったかも・・・
でもシェアボタンの方がいろいろと便利だったんだよな～

7月19日　追記

なんかすげえ中途半端に復活してるｗ

Facebookページ、mixiページに続き、Google+でもGoogle＋ページなるものが作れるようになりました。

作成ページはこちら。

Google+ページを作成

手順通りに作っていけば１，２分程度で完成します。

このようなサイトを見つけたのでメモ。

ほいほいとFacebookのフレンド申請に応じているとアカウントをのっとられてしまうかもしれない | Lifehacking.jp

ゆるい！ゆるすぎるぞ！！Facebook！！！

恐ろしいトラップですね・・・

３人もまったく知らない人のフレンド登録に応じるということはまずないでしょうが、とある暇人が３つのなんちゃってアカウントを片手に思いっきりフレンド申請をばらまきまくったら数人は引っかかりそうな気がします。

そういえば「３人もまったく知らない人のフレンド登録に応じるということはまずないでしょうが」と書きましたが、ライブドアブログでは同じような趣味の人に片っ端からフレンド申請をして（逆に申請されて）、フレンドになってくれる人が結構いたりするんですが、この認識でFacebookをやっていると簡単にのっとられそうですね。

あやしい申請には十分注意しましょう。

「プラスワン ボタン」のサイトにアクセスし、出力されたコードを貼り付けるだけ。

URLやページのタイトルを設定する必要は特になし。

設定する必要があるのはボタンのサイズと言語だけ。

簡単ですね。

ただし、個別ページにボタンを設置する場合なら上記の方法でＯＫですが、カテゴリーページや月別ページのような複数の記事で構成されているページでも各記事にボタンを設置する場合は、それぞれのボタンに該当記事のURLを設定する必要があります。

上記のサイトにて、「詳細オプション」をクリックしてください。

URLを設定するフィールドが表示されます。

URLを設定すると、コードが以下のように変わります。

<!-- 次のタグを head 要素内または body 終了タグの直前に貼り付けてください -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'ja'}
</script>

<!-- 次のタグを +1 ボタンを表示する箇所に貼り付けてください -->
<g:plusone href="https://nandani.sakura.ne.jp/"></g:plusone>

上の

<!-- 次のタグを head 要素内または body 終了タグの直前に貼り付けてください -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'ja'}
</script>

部分は書いてある通り、head要素内に張り付けてしてください。（うっかりループ内に放り込むとボタンが１つしか表示されなくなります。）

下のg:plusoneタグについては、URLが該当ページのURLになるよう修正し、設置したい場所に張り付けてください。

WordPressなら

<!-- 次のタグを +1 ボタンを表示する箇所に貼り付けてください -->
<g:plusone href="<?php the_permalink(); ?>"></g:plusone>

って感じですね。

なお、自分のサイトをウェブマスターツールに登録していると、ウェブマスターツールサイトにて「+1統計情報」が確認できます。

設置したてで、ペッタンコ状態ですが^^;

ウェブマスターツールの登録方法については、こちらのサイトが参考になります。

第2回 簡単すぎる！ウェブマスターツールの設定 | Think IT

自分が押した+1（プラスワン）を確認したい場合は、「Google Profiles」にアクセスしてください。

プロフィール画面にて画面上部にある「+1」をクリックすると、自分の+1（プラスワン）が一覧表示されます。

取り消す場合は一覧右側にある×をクリックすれば、プラスワンを取り消せます。

メモ。

OGPを設定したあと、「いいね！」ボタンを押したりして確認すると、なぜか設定が反映されていない場合があります。

これはキャッシュのせいなので、ほっといたら反映されるようになりますが、できればすぐに確認したい！

そんな時は、Debugger（旧URLリンター）なるツールを使って、OGPの設定を確認するついでにキャッシュを消しましょう。

■参考にさせていただいたサイト

• サイトにFacebookのいいねボタンとOGPを導入してみる | misc
• Facebook の OGP 設定の有無による違い - Life like a clown