导读:
I've recently launched a Flex-based classified ads product allowing anyone to start a classified ads service. Almost the very first question I was asked was how to place a Google AdSense banner in to their app. I really didn't want to tell them that wasn't possible because I choose to use Flex. Instead I set out to find a solution. It turns out not only was it possible but it was a lot less complicated than I imagined. 我最近发布了一款基于FLEX的可分类的广告服务。我被问到的最多的问题是如何将ADSENSE广告标题栏放进他们的程序,我真的不想告诉他们因为我使用了FLEX所以那不可以。于是我着手解决这个问题,结果发现比我想象的要容易的多
For those who don't like reading, a quick summary of what I did is: 对于那些不喜欢月的的人来说下面是我方案的摘要
1. Create a search engine friendly HTML version of my content (home page, category/search results, ad full details) 创建一个搜索引擎友好的HTML页面
2. Add a param that will toggle displaying the Google AdSense banner at the top of that content 添加一个参数以显示GA的标题栏在正中心
3. Use the IFramecomponent to load the banner in an iframe 使用IFramecomponent组件来加载广告的标题栏
4. Reload the iframe as the user views different content 重新装载IFRAME是用户看到不同的内容
5. Have a beer! 收工庆祝
You can see an example of this in use at www.petsbc.com. 在这个网站上可以看见一个例子
1. Create a search engine friendly HTML version of my content (home page, category/search results, ad full details)
(步骤已经翻译过了所以下面不再累述)
This is something I had actually already completed a few weeks earlier. I felt making sure the classifieds content was indexable by search engines was super important. Search results, category listings and ad full details all have clean urls that are bookmarkable. 这其实是我几个星期以前就已经做好的东西了。我希望分类的内容能够被搜索引擎索引是非常非常重要的,搜索的结果,类别列表,详细的细节以及干净的URL连接以方便用户添加书签
For example www.petsbc.com/ad/8435 displays html to search engines/browsers without flash and redirects to 例如此URL显示了搜索引擎的索引www.petsbc.com/#view=ad;id=8435 for browsers with flash installed.
2. Add a param that will toggle displaying the Google AdSense banner at the top of that content
This step was required because I only want Google AdSense banners in the iframe and not in the regular search engine indexed pages 这一步是必须的因为,GA的标题不是常规的搜索引擎索引页
3. Use the IFramecomponent to load the banner in an iframe
The IFrame content is fairly simple to use: <iframe id="adSense" source="/ad/1234?adsense=1"></iframe>
I only had to fix a few issues: 需要补充几点注意事项
- The flash player was redrawing itself over top of the IFrame. This is fixed by setting wmode="opaque" in the javascript, object tag and embed tag that load your Flex app FP会在IFRAME顶端自动重绘,通过在JS脚本里设置 wmode="opaque"解决问题
- I was using the left and bottom constraints to anchor the banner to the bottom of my app but the html IFRAME wasn't moving when I resized the browser window. Easily fixed by adding the following to the IFrame component code: 我使用了左底下限制链接矛在底部,但是当我改变浏览器的大小的时候IFRAME并没有移动,通过添加以下代码解决
this.addEventListener("xChanged", function(event:Event):void { moveIFrame(); });
this.addEventListener("yChanged", function(event:Event):void { moveIFrame(); });
- Since the iframe is infront of the flash player, any Flex pop ups (TitleWindows, etc.) will appear behind the iframe. I was running out of time so I just simply set the visible property on the IFrame component to false/true whenever I show/hide a PopUp. 因为IFRAME在FP的前面,任何FLEX弹出框会出现在IFRMAE的签名,所以我将IFRMAE项的可视属性设置为假,当我想隐藏一个弹出框的时候,反之亦然
4. Reload the iframe as the user views different content
Lastly, whenever the user views different content, I change the source property on the IFrame component to the html based version of that same content. This allows ads to be displayed that are relevant to what the user is currently viewing. 最后不管什么时候用户查看不同的内容,我改变了源代码属性为HTML基础的相同内容。这使得ADS可以和用户正在看内容相关
5. Have a beer!
Although some might argue using an iframe with Flex is more of a hack than a solution, the web is based on hacks and hey it works.
If you're trying to get this working in your own app and run in to any snags let me know, I'll try my best to help out! 完成,也许有人会说使用IFRAME和FLEX与其说是解决方案不如说是投机取巧。但是如果你有你的解决方案的话,那很酷,别忘了告诉我
本文转自
http://www.bobjim.com/2007/12/adobe_flex_and_google_adsense.html
分享到:
相关推荐
9. **Flex Builder IDE**: Adobe Flex Builder是一个集成开发环境,为Flex和ActionScript开发提供了代码编辑、调试、构建和部署等功能,极大地提高了开发效率。 10. **移动应用开发**: 虽然Flex 3.2主要是为桌面Web...
Adobe® Flex™ 3 Language Reference_files 可能包含文档的样式表、图片和其他支持文件,以保证文档的正确显示。 总的来说,Adobe Flex 3 API为开发者提供了一个全面的框架,帮助他们构建功能强大、视觉吸引人的...
Adobe Flex4 教程帮助手册pdf
Adobe Flex 4.5 发行版将 Flex 和 Adobe Flash Builder 带给智能手机和平板电脑。现在,利用 Adobe AIR,可以像在桌面 平台上一样在 Flex 中轻松而高质量地开发手机应用程序。 许多现有的 Flex 组件已扩展到移动设备...
Adobe Flex 3 Component Explore 是一个用于探索和理解Flex 3组件的工具,它为开发者提供了一个直观的界面来查看和交互各种Flex组件。这个工具的目的是帮助开发人员更好地理解和利用Flex 3框架中的组件库,从而提升...
- Adobe Flex中文教程《Adobe Flex Quick Starts(中文).pdf》可能是教程的起点,其中可能涵盖了Flex的基础概念、组件使用、数据处理和项目构建等内容。 - Adobe官方文档、在线论坛和社区是获取更多学习资源和解答...
《Adobe Flex 3 高级编程》一书是学习Flex 3开发的权威指南,提供了深入的理论知识和技术实践。 该书的源码包含在名为"ProFlexCode"的压缩包文件中,意味着读者可以深入研究和学习书中提到的各种示例和项目。源码...
- **定期更新**:Adobe Flex Builder 3 可能会有定期的更新发布,确保您的软件版本是最新的,以便获得最新的功能和支持。 #### 六、结语 Adobe Flex Builder 3 作为一款功能强大的开发工具,对于从事 Rich ...
Adobe Flex 快速入门指南是针对开发者学习和掌握Adobe Flex技术的一系列教程资源。Adobe Flex是一种开源框架,用于构建富互联网应用程序(Rich Internet Applications,RIAs),它允许开发者使用MXML和ActionScript...
这个SDK是Adobe公司推出的一个开放源码框架,它允许开发者使用ActionScript 3.0语言和Flex框架来创建具有交互性、动态性和可视化效果的Web应用。在本文中,我们将深入探讨Flex 4.5 SDK的关键特性和使用方法。 1. **...
Adobe Flex 3 高级编程 源码
Adobe公司最近发布了Flex4.1框架,在7月18日发布了全新的Adobe Flex 4.1中文语言参考。http://help.adobe.com/zh_CN/AS3LCR/Flex_4.0/,本想做成CHM版本,由于CHM默认会调用IE显示内容,导致左边目录无法显示,因此...
Adobe Flex Builder 3.0是Adobe公司推出的一款强大的集成开发环境(IDE),专门用于构建富互联网应用程序(RIA),特别是基于Adobe Flash Player和Adobe AIR的应用。本教程将深入讲解Flex Builder 3.0的各个方面,...
总之,《使用Adobe Flex 4》这本用户指南为开发者提供了一个全面的参考手册,帮助他们深入了解Adobe Flex 4的各种特性和功能,从而更好地开发出高性能的应用程序。通过学习这本指南,开发者可以充分利用Adobe Flex 4...
Adobe Flex 是一个开源框架,主要用于构建富互联网应用程序(RIA,Rich Internet Applications)。它是由Adobe公司开发的,旨在帮助开发者创建具有交互性、响应性和丰富图形界面的Web应用程序。Flex使用MXML和...
标题中的“整理adobe flex代码格式的插件”指的是专门为Flex Builder设计的辅助工具,用于自动格式化ActionScript代码,使其符合一定的编码规范,提高代码的可读性和维护性。这类插件能够节省开发者手动调整代码格式...
通过上述步骤,我们可以利用Adobe Flex 3和Adobe AIR 1.5来开发出功能丰富、用户体验良好的桌面应用程序。这两种技术的结合不仅提高了开发效率,还扩展了RIA的应用范围,使得开发者能够在多种平台上构建出高质量的...
Adobe Flex4.0 ActionScript3 中文API 语言参考.part1.rar的下载地址: http://download.csdn.net/source/3245173 Adobe Flex4.0 ActionScript3 中文API 语言参考.part2.rar的下载地址: ...
Flex 的起源可以追溯到早期的Flash平台,当时Adobe公司(前身为Macromedia)意识到,尽管Flash在网页动画和多媒体展示方面表现出色,但它在构建复杂应用程序方面有所欠缺。因此,他们推出了Flex,旨在弥补这一空白,...