「Instagram API」が廃止に！代替の「Instagram Graph API」に移行しよう！ | Analog Studio
Instagram は Facebook に2012年に買収されていますが、開発は独立して行っています。 そのため、「Instagram API」は Instagram のアカウントだけで使用することができました。 一方、「Instagram Graph API」は Facebook と連携した Instagram のビジネスアカウントと連携先の Facebook アカウントの2つが必須となっています。 これらの概念図を描くと以下のようになります。 Facebook を中継した仕組みとなりますので API を利用するには大元の Instagram と中継箇所である Facebook の両方が必要です。 ②取得できる情報量 次に取得できる情報量が違っています。 「Instagram API」では投稿情報 (画像 URL やいいね！の数、キャプションなど) をリクエストする URL と投稿者情
Instagram Graph APIの基本的な使い方・Webサイトにインスタの写真を埋め込みする方法
以前、Instagram API仕様変更・終了・廃止関連の情報まとめ。インスタの写真をWebサイトで直接表示していた方は要注意！という記事を書いたことがありました。 この記事、Arrownの歴代記事の中でもかなりのバズを生み出してくれたのですが、今回のブログ記事は、1年越しの続編の記事になります！（遅い！笑） Instagram API仕様変更・終了・廃止関連の情報まとめ。インスタの写真をWebサイトで直接表示していた方は要注意！ でご紹介させていただいたように、2018年4月、それまで提供されていたInstagram APIの一部機能が終了したことにより、Webサイトに埋め込んでいたInstagramの写真が突然表示されなくなってしまったということがありました。 昨年2018年の段階では、Instagramを運営するFaceBook社側からは、「Instagram APIの代替方法につい
Facebookページのフィード情報を取得する（JSON形式） - WEBサイト制作の勉強
以前はFacebookが発信しているRSS/XML形式のfeed情報を取得し、比較的簡単に自身のWEBサイト等にFacebookページの投稿データなどを表示させる事が出来ましたが、Facebookのfeed配信の機能が2015年6月に仕様変更してしまい、現在はJSON （JavaScript Object Notation）形式のフィード情報をGraph APIを使いデータを取得するという非常にややこしい仕様になってしまいました。 もちろん、Facebook側が用意している「Page Plugin」を使えば簡単に自身のWEBサイト等にFacebookページの投稿データなどを表示させる事は出来ますが、「Page Plugin」を使わずに今回のようにフィード情報を使うことで、 テキストデータで出力される為、Googleのクローラーが認識しやすくなる。 テキストデータなのでCSSで自由に修飾が出
Facebookやtwitterなどのソーシャルボタンを高速に読み込む方法まとめ | Cappee Design
今朝突然iPhoneから避難訓練の緊急速報がピピピとなってびっくりした、@cappeeです。 以前投稿したこちらの「ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など」がわりと好評なので、高速化についても追記しようと思ったのですが、あまりにも長くなるので別記事で投稿したいと思います。 ソーシャルボタンの高速化に関する方法は色々なブログで見かけるのですが、記述方法などまとまったものがなかったのでメモしておきたいと思います。 ソーシャルボタンのJavaScriptを最後に記述する ソーシャルボタンに限らず基本的なことですが、JavaScriptは表示が問題なければ</body>の直前に記述するとページの読み込みを早くすることができます。 jQueryなど<head>内で指定しないといけないJSもありますが、ソーシャルボタンのタグであれば最後に記述しても問題ありませ
同一ページに複数の「いいね！」ボタンを設置する方法 - entacl Lab.
Facebookの「いいね！」ボタンは原則、1URLに1つです。ですが、「1ページ内に複数置きたい・・・」そんな場合だってあるはず。そこで今回は1ページ内に複数設置する方法をご紹介します。 「いいね！」ボタンは1ページに1個？ 通常「いいね！」ボタンは「いいね！」ボタン発行ページにて、1URLにつき1つ作成できます。 ただ、例えばある商品のラインナップ紹介ページ等で１ページ内に複数の「いいね！」対象があって、商品ごとにボタンを設置したい場合は以下の方法で作成することができます。 設置の手順 1.ダミーページを作る 例として、実際にボタンを設置する商品一覧ページが「lineup.html」とすると、各商品ごとのダミーページを「item1.html、item2.html・・・」のように、設置したいボタンの数だけページを作成します。設置場所はどこでも構いません。 その際、ダミーページ側ではボタン
Facebookっぽいナビゲーションをレスポンシブデザインで実装するプラグイン／チュートリアル色々 | バンクーバーのうぇぶ屋
タイトルの通りなんですが、結構頑張って探したのでメモがてら共有！ Facebookのモバイル版のあの、右にスッと出てくるナビゲーションあるじゃないっすか。今日はあのナビゲーションの実装についてのネタをシェアさせて頂きます〜！ こんな奴！ボタンクリックすると横にシュッと出てくるタイプのナビゲーション、英語圏ではOff-Canvas Navigationとかって呼ばれたりすると思いますが、これをちょっと急遽実装しなきゃいけない案件に追われて、先日ガツっとどんなのあるか調べたので、良い機会だから共有兼メモ書きとして記事にさせて頂こうと思います！ Sidr – A jQuery plugin for creating side menus なんか日本人でも知ってる人多い印象。かなーり僕の理想に近かったので、あとは実装して問題なければコレにしようと思いました！ メニューの展開はこんな感じ。 これでえ
Facebookインサイト設定の落とし穴、app_id, admins の違いとは-Six Apart ブログ｜オウンドメディア運営者のための実践的情報とコミュニティ
皆さま、お久しぶり！ヒカルよ。今日はFacebookインサイト(公式のアクセス解析ツール)を使うための最初の難関、OGP設定の謎を私が解明するわ！私と一緒に、めくるめくソーシャルマーケティングへの扉を開きましょ。 ......って、え？私のことを知らない？......そうか、そうよね。最近 Facebookの六離庵ページ に閉じこもっていたものね。 改めて、自己紹介するわ。 わたしと六離庵について わたしは、ソーシャルメディア課長のヒカル。 和菓子屋六離庵ソーシャルメディア繁盛記 というサイトをご存知かしら？ このサイトは吉祥寺にある架空の和菓子屋さん「六離庵」のソーシャルメディア活用のストーリーを連載しているサイトなの。中小規模の法人がどんなふうにソーシャルメディアをどう活用していけばいいかの一例として、企画から運用、効果測定までの流れを小説形式でひと通りご紹介しているわ。全八話で公開さ
OGPが正しく設定されていても、Facebookでのシェア時にサムネイルや情報が取れない…の覚え書き | 毎日考
OGP対策、してますかぁ。ここセコム的な感じで。 むしろ全くしないほうがみんな幸せなんじゃないかと思っているウェブ屋です。 一ヶ月ほど前かな。このブログの記事リンクをFacebookに投稿しようとしたとき、「あれ？」となりました。普通ならリンクを貼り付けるとしばしの読み込みの後、記事タイトルや概要やサムネイルが下の欄に出てきたはず。なのに、 こんな感じー。さみしー。画像がでかすぎるとか？ いやいやいや。サムネイルもそうだけど、勢い余ってdescriptionすら取れてないよ。試しにGoogle+へ貼り付けてみると、普通に取得できてる。じゃあFacebookか。またお前か。 取り急ぎデバッガーツールをかけて取得できるようにはなりました（Facebookシェアボタンでサムネイルなどの情報が表示されない！リンクエラーでどうにもならないときの対処法｜マリンロード）。でもどうしたらいいんだこれは解決
OGPタグの設定やいいねボタン、コメントを簡単に設置できるWordPressプラグイン「Facebook Tools」
OGPタグを設定するのにOpen Graph ProというWordPressのプラグインを使ってたのですが、 descriptionの設定が不安定だったので、最近Facebook Toolsというプラグインに変えてみました。 このプラグインはOGPタグの設定だけでなく、いいねボタンやfacebookコメントボックスの設置も簡単に行えます。 このブログではOGPタグを設定するのにOpen Graph ProというWordPressのプラグインを使ってたのですが、 descriptionの設定が不安定だったので、最近Facebook Toolsというプラグインに変えてみました。 このプラグインはOGPタグの設定だけでなく、いいねボタンやfacebookコメントボックスの設置も簡単に行えます。 ざっと使い方まとめました。 インストール インストール方法は通常のWordPressプラグインと同じで
Facebook の 公式プラグイン の OGP 修正用の プラグイン公開
WordPress の Facebook 公式プラグインの OGP 出力を修正して書き換える プラグイン「Fix Facebook Plugin J」を作成しました。 この プラグイン は、Facebook for WordPress version 1.0.2 プラグインが有効化されている時のみ、正常に動作します。 まずは、Fcebook公式プラグインについて Facebook 公式のプラグインは、だいたい次のことができます。 WordPress記事公開時に更新情報を 自分のタイムラインやFacebookPage に自動投稿する。 Recommendations Bar を追加する。 「いいね！」ボタン、「送る」ボタン、「フィード購読」ボタンを追加する。 WordPress のコメント欄をFacebook の形式のものに置き換える。 OGP のmetaタグ を追加する。 結構使えそうな
Facebookでのウケ方が段違い！もはや必須なOGPを設定する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。sekoです。 昨今、ウェブサイトを多くの人に見てもらう為に、SNSを利用して広めていく事はもはや常識となっています。 その際、とても重要となるのがウェブサイトにOGPの設定することです。 今回はOGPについて紹介していきます。 OGPとは OGPの正式名称は”Open Graph Protocol”と言います。 facebookやmixi、google＋などのSNSとウェブページを連携させる為に設定する記事情報で、各種ウォール、ニュースフィードに「こういうサイトです」と明言するために必要な仕様です。 例えばfacebookにおいて、OGPを設定していないサイトで「いいね！」を押すと「〇〇さんがリンクについていいね！と言ってます」と自分のウォールには投稿されますがニュースフィードには反映されないため他の人の目に記事がさらされる事はなかなかありません。 しかしOGP設定をしたサイ
wordpressの記事を自動でFacebookページに投稿する「Wordbooker」
先日、wordpressの記事を自動でTwitterに投稿する記事を書きましたが、今回はFacebookに自動で連動するプラグインと手順のご紹介です。 実は、TwitterのアカウントをFacebookページに連動してしまえば結果的にwordpressとFacebookにもなるのですが、TwitterアカウントをFacebookアカウントと連動できるのは１つだけなので、複数のサイトを運営して、すべてを各Facebookページと連動させることはできません。 なので、私としてはFacebookページとの連動は別途設定することをおススメいたします。では早速手順をご説明いたしましょう。 Wordbookerプラグインをインストールしましょう。 まずはプラグインの新規追加ページで「Wordbooker」と検索し、インストール&プラグインの有効化を行います。 プラグインの有効化が完了すると、設定＞サイ
【Facebook-OGP】「fb:admins」「fb:app_id」「SecretKey」の場所 | Qlay
【Facebook-OGP】「fb:admins」「fb:app_id」「SecretKey」の場所 by Qlay · 2013年3月6日 「解決法」とか偉そうなタイトルを書きましたが、この記事は解決法でもなんでもなく、単なる僕の理解力の無さと凡ミスが生んだアホな日記ですので悪しからずｗ 「WP-OGP customized」の設定がややこしい さてさて本題ですが、FacebookのOGP設定をしてくれるプラグイン(WP-OGP customized)を導入した際に 「fb:app_id」だとか 「SecretKey」だとか 「fb:admins」だとか ややこしいんじゃー！！ってなります。 設定を間違えるとどうなる？ そしてこの値を入れ間違えるとFacebookのデバッガーに プロパティ「fb:admins」に指定された値「◯◯◯◯◯◯◯◯◯◯◯◯」はタイプ「fbid」としてパースでき
Facebookコメントの設定ではモデレーターを指定するのをお忘れなく
このブログにもFacebookのコメントプラグインを設置しているのですが、せっかくコメントを頂いても気づかないことがあって困っていました。 コメントが投稿されたらメールやFacebookの通知機能で知らせてくれればいいのに・・・ と思って調べてみると、コメントプラグインの設定に「モデレータ」なる項目が。 モデレータって管理者のことだよな？そこが空欄ってことは・・・と思い、自分の名前を入れてためしてみると、コメントがちゃんと通知されるようになりました。今までお返事していなかった皆様ごめんなさい。遅ればせながらお返事させていただきましたσ(^_^; ) というわけで設定方法。 Facebookコメントでモデレータを指定する方法 Comment Moderation Tool – Facebook開発者にアクセスすると自分が設置しているコメントプラグインが確認できます。（僕の場合はこのブログと座
Facebookコメントは非表示にできる!?管理機能を徹底解説-Six Apart ブログ｜オウンドメディア運営者のための実践的情報とコミュニティ
こんにちは。iPad mini受賞の興奮も覚めやらぬ、ヒカルです。 いやあ、miniはカウチ読書端末としては、ほんとーにスバラシイわ。目からの距離がしっくり来る場所に、良い大きさで収まってくれるというか。「枠」を意識せず没入させてくれる、良い重さで大きさで、ほんっと・・・・ ってお前の自慢は聞いてない？それはそれは、失礼しましたっ！ 今日の本当のお話は、Facebookコメントの一歩上級の活用方法、なわけです。 Zenbackにもついている、Facebookコメントの枠。 ただ設置するだけだと、ここに新規コメントが来ても気づく方法はないし、気になるコメントも全部表示されちゃいます。 だけれど、たったひとつ魔法のような設定をしておけば、次のようなあなたの望みが叶うのをご存知かしら？ 「自分のブログにコメント来たらうれしいなー。できれば、コメント来たら速攻知りたい！」 「サイト宛に来たコメント
facebook向けiframeアプリの横幅や高さの設定方法 | Firegoby
現在、WordPressをfacebookのアプリとして動作させるためのプラグインを作ってるのですが、コンテンツ部分の横幅や高さに関するメモ。 アプリのキャンバスの横幅 facebook アプリは、アプリとして登録するとiframeで外部サーバーのコンテンツを表示しています。 iframeなので、好き勝手に横幅を設定しちゃとスクロールバーが出てカッコ悪いので、CSSなどで横幅を予め合わせておく必要があります。 わかりにくいのですが、アプリは単独で開かれる場合とタブで開かれる場合があって、それぞれ最大の横幅が違います。 タブ経由で開かれる場合の横幅 – 520px アプリ単独で開かれる場合の横幅 – 760px アプリ側のbody要素のmarginとpaddingの調整もお忘れなく。 アプリの高さ 高さもコンテンツが縦長になると縦スクロールが出てみっともない事になってしまいますが、これはfa
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
いいね！ボタンは新しいコードに書き換えないと2015年5月以降動かなくなります（公式情報） | 初代編集長ブログ―安田英久
FacebookのOGP画像の仕様がまた変更。ニュースフィードでもタイムラインでも欠けないようにする方法。（スマホ対応！最新版 ※9.21追記）
IDEA * IDEA
読者の声に返信しよう！ブログに書き込まれたFacebookコメントを一覧する方法｜まだ仮想通貨持ってないの？