从零开始 – 让你的Page更加美观更加有趣 第二课 (为Page添加轮换Banner…)

  • A+
所属分类:广告投放

Ada的外贸SNS营销博客原创,转载请注明出处

要在Facebook的Page上生动的展示我们的产品和服务有两种方式.

1>编写自己的APP程序

2>用静态FBML的形式来展示

两种方法有利有弊,过多的APP程序会导致页面打开过慢,影响用户体验.而FBML则做不出APP那样丰富的功能,比如弹出框架,调用API等.

现在我们先来用静态FBML来生成一个图片展示banner。如下图所示

从零开始 – 让你的Page更加美观更加有趣 第二课 (为Page添加轮换Banner…)

这是一个可以左右轮换的banner,因为Facebook的限制,所有的媒体都是不能自动播放的,所以我们添加左右2个按钮,再用一小段FBJS控制动作即可。

首先是框架,FBML部分的代码

[cc lang="html"]

从零开始 – 让你的Page更加美观更加有趣 第二课 (为Page添加轮换Banner…)

从零开始 – 让你的Page更加美观更加有趣 第二课 (为Page添加轮换Banner…)
从零开始 – 让你的Page更加美观更加有趣 第二课 (为Page添加轮换Banner…)
从零开始 – 让你的Page更加美观更加有趣 第二课 (为Page添加轮换Banner…)
从零开始 – 让你的Page更加美观更加有趣 第二课 (为Page添加轮换Banner…)
从零开始 – 让你的Page更加美观更加有趣 第二课 (为Page添加轮换Banner…)
从零开始 – 让你的Page更加美观更加有趣 第二课 (为Page添加轮换Banner…)
从零开始 – 让你的Page更加美观更加有趣 第二课 (为Page添加轮换Banner…)

从零开始 – 让你的Page更加美观更加有趣 第二课 (为Page添加轮换Banner…)



[/cc]

上面的代码就是一段完整的框架,一共有7张图片,一屏展示3张,点击一下按钮则切换一张

里面对应的链接跟“alt”“title”大家可以自己替换。

下面就是样式跟FBJS部分

[cc lang="css"]

[/cc]

这个没什么好解释的,大家也可以自己改改,大小不要动就是了。

下面是FBJS

[cc lang="js"]

[/cc]

到这里一个轮换banner就制作完成了,要注意的是图片大小是129*129px

具体效果大家可以到我的Page围观,当然要翻墙,你懂的

下期预告(在Page上制作按钮)敬请期待。

  • 我的微信
  • 扫一扫添加好友
  • weinxin
  • 我的微信公众号
  • 优乐学舍服务号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

Protected by WP Anti Spam

目前评论:4   其中:访客  3   博主  0   引用   1

    • small business grants small business grants 1

      found your site on del.icio.us today and really liked it.. i bookmarked it and will be back to check it out some more later

    • 来自外部的引用: 1

      • 从零开始 – 让你的Page更加美观更加有趣 第三课 (小更新,添加纯CSS按钮…) | ada的海外推广学习笔记