SNS関連

Like Boxもうすぐ終了 Page Pluginへ乗り換え

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

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

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

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

へアクセス。

下図のブロックで

WS001107

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

を設定します。

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

WS001106

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

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

という点があります。

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

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

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

 

追記

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

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

マジかよ・・・

総合管理者 | 2015年04月30日 | コメント(0) | トラックバック(0) | API関連 | SNS関連

RSS Graffiti本日終了 dlvr.itへ乗り換え

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

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

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

https://dlvr.it/

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

WS001093

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

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

WS001077

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

 

WS001078

左の「Source」にフィードのURLを入力します。
Your blog or other website URLと書いてますがフィードのURLです。
例:http://www.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へのアクセスを許可してよいかという画面が開きますが、許可していってください。

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

WS001079

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

 

最後の画面になります。

WS001080

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

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

WS001081

以上が最初の登録です。

 

2回目以降の新規登録

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

WS001082

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

 

WS001083

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

 

WS001084

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

 

WS001085

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

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

 

WS001086

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

 

WS001087

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

 

WS001088

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

 

WS001089

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

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

 

最後に「Save」します。

 

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

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

WS001090

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

 

WS001092

総合管理者 | 2015年04月30日 | コメント(0) | トラックバック(0) | API関連 | SNS関連

Twitterウィジェット編集時の注意事項

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

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

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

注意しましょう。

nandani | 2013年06月19日 | コメント(0) | トラックバック(0) | SNS関連

旧式Twitter ウィジェットついに消滅

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

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

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

https://twitter.com/settings/widgets

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

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

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

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

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

【追記】

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

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

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

nandani | 2013年06月19日 | コメント(0) | トラックバック(0) | SNS関連

target-densitydpi=device-dpiに注意【viewport】

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

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

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

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

サンプル(高解像度のスマホをお持ちの方は下記のURLにアクセスしてみてください):
http://www.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">

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

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

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

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

 

参考サイト

htmlをiPhoneに対応させる

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

nandani | 2013年06月17日 | コメント(0) | トラックバック(1) | HTML関連 | SNS関連

シェアボタン廃止?

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

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

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

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

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

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

 

7月19日 追記

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

nandani | 2012年07月18日 | コメント(0) | トラックバック(0) | SNS関連

Google+ページなるものが作れるようになったようです。

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

作成ページはこちら。

Google+ページを作成

手順通りに作っていけば1,2分程度で完成します。

nandani | 2011年11月08日 | コメント(0) | トラックバック(0) | SNS関連

Facebookのフレンド登録には注意しようというお話

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

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

ゆるい!ゆるすぎるぞ!!Facebook!!!

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

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

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

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

nandani | 2011年09月13日 | コメント(0) | トラックバック(0) | SNS関連

Google+1(プラスワン)ボタンを設置する

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

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

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

簡単ですね。

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

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

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

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


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

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

 

上の


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

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

 

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

WordPressなら


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

って感じですね。

 

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

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

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

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

 

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

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

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

nandani | 2011年09月08日 | コメント(0) | トラックバック(0) | API関連 | SNS関連

OGP情報のキャッシュ削除

メモ。

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

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

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

 

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

nandani | 2011年09月06日 | コメント(0) | トラックバック(0) | API関連 | SNS関連

Copyright(c) 2010 - 2018 ダリの雑記