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

はじめての 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; }

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

このブログの人気の投稿

LINEヤフー、計測タグとコンバージョンAPIを刷新

LINEヤフーが、「Yahoo!広告 ディスプレイ広告」で「計測タグ」と「新しいコンバージョンAPI」の提供を開始。「コンバージョン測定タグ」や「サイトリターゲティングタグ」などの現行タグ、および従来のコンバージョンAPIは引き続き利用できるが、将来は提供を終了する予定であり、今後は「計測タグ」と「新しいコンバージョンAPI」の利用が推奨される。「計測タグ」はひとつのタグ(グローバルスニペットとイベントスニペット)で計測したイベントデータを複数の目的で活用できるため、現行タグより管理を簡素化できる。 計測タグと新しいコンバージョンAPIの提供開始について https://www.lycbiz.com/jp/news/yahoo-ads/20250623/ 計測タグについて https://ads-help.yahoo-net.jp/s/article/H000054772 コンバージョンAPIについて https://ads-help.yahoo-net.jp/s/article/H000055044

「TikTok Shop」を日本でも提供

ティックトックが、ティックトックのアプリ内で商品を販売できる機能「TikTok Shop」の国内提供を開始。すでに多数の企業が「TikTok Shop」の開設支援に名乗りを上げている。ティックトックは、ショートビデオやライブ配信で発見した商品をそのままプラットフォーム上で購入できる体験を「ディスカバリーEコマース」と呼んでいる。ブランドにとっては販売機会だがクリエイターにとっては収益化機会であり、ショップの開設そのものでなくアフィリエイト機能の活用が成功のカギになると思われる。 TikTok Shopを日本で提供開始!発見から購入までをアプリ内で完結し、新たな購買体験となる「ディスカバリーEコマース」を実現 https://newsroom.tiktok.com/ja-jp/tiktok-shop-launch-japan ソーシャルメディア上のショップ機能は、すでにメタなどが先行して提供している。しかし、メタはプラットフォーム上での決済機能はアメリカでしか提供しておらず、またアメリカでも終了を予定している。 About changes to Shops and checkout on Facebook and Instagram https://www.facebook.com/business/help/1314349509894768 ティックトック以外のショップ機能が改めて注目されてもよいと思うが、ティックトックによるショップ機能の注力度が際立っているのは確かだ。