スキップしてメイン コンテンツに移動

はじめての Static FBML

冬休みの自由研究のつもりで、フェイスブックの「Static FBML」アプリを利用してファンページにボックスを追加してみた。ファンとそれ以外でコンテンツを出し分けるようにした。
------------------------------
2010年にもっとも読まれた記事は
http://www.facebook.com/netadreport?v=app_4949752878
------------------------------
予備知識や手引きがなくても、疑問を検索しては英語を読むの繰り返しで完成させることができた。途中でつまづいた箇所は次の通り。これから「Static FBML」に取り組むひとのために。
------------------------------
- 「fb:visible-to-connection」を使用してファンとそれ以外にコンテンツを出し分けるようにしても、ファンページ管理者のアカウントでは両方が表示されてしまう。別ブラウザーからテスト用アカウントで閲覧すると、ファンおよびそれ以外からの見え方を確認しやすい。
- 「fb:visible-to-connection」を使用してファンとそれ以外にコンテンツを出し分けるようにすると、コンテンツに余分なスペースが表示されてしまうことがある。その余白はCSSで調整できる。
- CSSは、冒頭で「<style></style>」タグを使用して埋め込んでしまうと、IEでは反映されない。CSSは外部ファイルにするかインラインで記述しないといけない。
------------------------------
参考までに、FBMLのソースを以下に公開しておく。ソースの一部については省略している。
------------------------------
<link ref="stylesheet" type="text/css" href="http://www.netadreport.com/省略/省略.css" />
<div id="wrapper">
<fb:visible-to-connection>
<h1>2010年にもっとも読まれた記事は</h1>
<p>2010年に「インターネット広告のひみつ」に投稿した700件以上のブログ記事のうち、閲覧数上位10記事は次の通りです。</p>
<ol>
<li><a href="省略">省略</a></li>
<li><a href="省略">省略</a></li>
<li><a href="省略">省略</a></li>
<li><a href="省略">省略</a></li>
<li><a href="省略">省略</a></li>
<li><a href="省略">省略</a></li>
<li><a href="省略">省略</a></li>
<li><a href="省略">省略</a></li>
<li><a href="省略">省略</a></li>
<li><a href="省略">省略</a></li>
</ol>
<div id="share">
<p>この話題をお友だちと共有しましょう。</p>
<fb:share-button class="meta">
<meta name="title" content="2010年にもっとも読まれた記事は: インターネット広告のひみつ" />
<meta name="description" content="2010年の閲覧数上位10記事をファン限定で公開しています。" />
<link rel="target_url" href="http://www.facebook.com/netadreport?v=app_4949752878" />
</fb:share-button>
</div>
<fb:else>
<div id="non-fans">
<p>こちらはファン限定コンテンツです。上部の「いいね!」ボタンをクリックしてください。</p>
</div>
</fb:else>
</fb:visible-to-connection>
</div>

------------------------------
ちなみに、CSSファイルの内容は次の通り。ファン以外向けのコンテンツに絶対位置を指定して、不要な余白を解消している。
------------------------------
#wrapper { margin:0; padding:0; }
#non-fans { position:absolute; top:0; left:0; }

------------------------------
なお、ファンページ内に「いいね!」ボタンを配置する方法は、現在のところ公式にはサポートされていないようだ。

このブログの人気の投稿

データクリーンルームとは

電通デジタルの三谷壮平氏が、データクリーンルームを解説。 Ads Data Hubとは何か?その活用の可能性を探る(第1回) https://www.dentsudigital.co.jp/topics/2021/1005-001050/ Data Clean Roomの魅力と、最大限にその価値を引き出す活用のポイント(第2回) https://www.dentsudigital.co.jp/topics/2021/1012-001058/ 電通デジタルのData Clean Roomソリューション(第3回) https://www.dentsudigital.co.jp/topics/2021/1026-001073/ Data Clean Roomと外部データを連携した分析のさらなる広がり(第4回) https://www.dentsudigital.co.jp/topics/2021/1102-001086/ 以下は要約。 データクリーンルームは、広告プラットフォーム事業者の提供する次世代型レポーティングの仕組み。プラットフォーム側が用意したクラウド環境上で、プラットフォーム内部の広告配信ログデータに外部データを掛け合わせて分析できる。 重複リーチの分析、プラットフォーム保有属性での分析、独自指標でのアトリビューション分析、最適予算配分の分析などに利用できる。 広告をクリックしてウェブサイトに来訪する以前のインプレッション情報(プラットフォーム内にしかない広告接触データ)を分析できることが価値。 データクリーンルームについては、電通の前川駿氏による発信も目立つ。

ツイッターでの会話量と売上に相関

ツイッターがアメリカで25個のブランドについて調査したところ、ツイッター上の会話量と売上には正の相関があった。最も強い相関のあったブランドでは、会話量が10%増加すると売上が2.6%増加した。 The impact of conversation https://marketing.twitter.com/en/insights/the-impact-of-conversation

ソーシャルメディアの投稿を外部で広告に

ハースト婦人画報社は、同社の運営するソーシャルメディアへの投稿をそのまま同社のデジタルメディアにも配信できる新広告フォーマット「Share Post AD」を提供。 ------------------------------ デモ(モバイル端末で表示される) https://www.elle.com/jp/?token=demo_release_eol ------------------------------ このデモによると、ポーラーの技術を利用していそうだ。 ------------------------------ Polar https://polar.me/ Polar Social Display for the Web https://polar.me/socialads Polar Social Card Demo https://youtu.be/Bucfy4kmI0Q ------------------------------ 海外ではすでにニューズコープやアンルーリーなどがポーラーを利用している。このようにソーシャルメディアの投稿を外部で広告として利用する取り組みは、ティーズも行っている。 ------------------------------ Teads - inRead Social https://info.teads.com/inread-social Demo https://demo.teads.com/ ------------------------------