Announcement

Collapse
No announcement yet.

Dynamic Content in FaceBook - Time Sensitive

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Dynamic Content in FaceBook - Time Sensitive

    Here is an interesting article on putting dynamic content in an iframe on a static page in a FaceBook tab. http://www.hyperarts.com/blog/how-to...tic-fbml-page/ For the heck of it I thought I'd give it a go. I put an iframe, using the example at the beginning of the article, and it actually worked. To see what you can do, go to http://www.emporiumplus.com/PLST.html and put a product in the basket. Check the basket contents to make sure it is there. Then go to this tab https://www.facebook.com/EmporiumPlus?sk=app_4949752878 The first two rows are static html. But at the bottom is a link to minibasket. Click the link. You should see a dynamic minibasket showing the basket from my miva merchant store.

    So this looks like it has possibilities. Unfortunately, this statement comes from FaceBook "On March 11, 2011, you will no longer be able to create new FBML apps and Pages will no longer be able to add the Static FBML app. While all existing apps on Pages using FBML or the Static FBML app will continue to work, we strongly recommend that these apps transition to iframes as soon as possible." While this may have possibilities, if you do not have the FBML app assigned to your fan page and a tab created, you can forget about it. You'll have to wait until someone comes up with a free app using the new API. If you do have it installed, it appears you will be grandfathered. Maybe you will use it, maybe you won't. But if you think you might, you need to get on it today.

    1) Create a local business fan page https://www.facebook.com/pages/create.php

    2) Search FaceBook for FBML. The Static FBML page app will come up. Add it to your fan page.

    3) Go to your fan page and you should see FBML in the left column.

    4) Click the link and edit.

    5) In the left column click apps.

    6) Click Go to app.

    7) Now you can change the title and enter code in the page input.

    8) Put whatever you want in this input. For example, in my page I used the url to a merchant page which contained the mini basket code.

    I think if we put our heads together we can come up with something usable. The important point of this post is you have to be grandfathered (before Mar 11) to use the FBML page or whatever we do come up with, you won't be able to use.
    Last edited by wcw; 03-09-11, 09:12 PM.
    Bill Weiland - Emporium Plus http://www.emporiumplus.com/store.mvc
    Online Documentation http://www.emporiumplus.com/tk3/v3/doc.htm
    Question http://www.emporiumplus.com/mivamodu...vc?Screen=SPTS
    Facebook http://www.facebook.com/EmporiumPlus
    Twitter http://twitter.com/emporiumplus

    #2
    Re: Dynamic Content in FaceBook - Time Sensitive

    Thanks for sharing Bill...
    Dan

    Girlfriends Lingerie - "Keeping It Sexy!"
    Sexy Lingerie - Twitter - Facebook- Pinterest - YouTube

    Comment


      #3
      Re: Dynamic Content in FaceBook - Time Sensitive

      It looks like this FaceBook app will allow you to showcase your whole store dynamically without having to export it in a data feed, etc. It displays your data in real time. You change a price in Merchant, someone browsing your FaceBook page will see that change immediately. If they happen to be logged into your Merchant store and are browsing your FaceBook page, they will see their price group prices rather than retail. I added another link and created a couple of parallel pages (BASKFB and PRODFB). Essentially they are the same as the original, less global header/footer, nav bar and category tree.

      Bottom Line: If you think you might want to do this now or in the future, today (Mar 10) is the last day you can create a tab for a store using the FBML app. Take 15 minutes and do it. If you never use it, you've lost 15 minutes. No big deal. If you don't do it, there's no way to know what you've lost. You snooze, you lose!
      Bill Weiland - Emporium Plus http://www.emporiumplus.com/store.mvc
      Online Documentation http://www.emporiumplus.com/tk3/v3/doc.htm
      Question http://www.emporiumplus.com/mivamodu...vc?Screen=SPTS
      Facebook http://www.facebook.com/EmporiumPlus
      Twitter http://twitter.com/emporiumplus

      Comment


        #4
        Re: Dynamic Content in FaceBook - Time Sensitive

        Ok, added the tab on each of my sites. Now we need to brainstorm on what uses it can achieve for us. Anyways, grandfathered in..Thanks Bill. Lets see what we can do with this sum biatch....
        Dan

        Girlfriends Lingerie - "Keeping It Sexy!"
        Sexy Lingerie - Twitter - Facebook- Pinterest - YouTube

        Comment


          #5
          Re: Dynamic Content in FaceBook - Time Sensitive

          Bill, when I put in a link in the FBML: text box, I'm just seeing text... compression on the examples on your page are brutal
          Scott Bronstad
          Marketing
          Star Time Supply, Co. Inc.
          http://store.startimesupply.com

          Comment


            #6
            Re: Dynamic Content in FaceBook - Time Sensitive

            Bill, I love this!!!!!!!!!!!!!!! i can see so many ways to use this.... Right now i set it up as a tutorial/faq/advertisement area....

            Take a gander... head to GFL facebook http://www.facebook.com/pages/Girlfr...m/292492294946 and look to left where it says "Whats there's more"

            Now you know im going to lose sleep over this coming up with ideas? oh well, im a zombie anyways..
            Dan

            Girlfriends Lingerie - "Keeping It Sexy!"
            Sexy Lingerie - Twitter - Facebook- Pinterest - YouTube

            Comment


              #7
              Re: Dynamic Content in FaceBook - Time Sensitive

              Bill have you found a way to add more than 1 link under 1 FMBL tab? I just tried to enter another iframe code under the first one pointing to another page... results showed both links, however clicking either or would bring up 1 result yet not switch...

              So for now I just added another tab pointing to new page....yet I can see this getting really long on left FB nav... Now if they could be nice and tidy under 1 tab, now that would be sweet..
              Last edited by Datagg; 03-10-11, 08:55 AM.
              Dan

              Girlfriends Lingerie - "Keeping It Sexy!"
              Sexy Lingerie - Twitter - Facebook- Pinterest - YouTube

              Comment


                #8
                Re: Dynamic Content in FaceBook - Time Sensitive

                Basically, you'll create the storefront. From that point on you shop inside the iframe until checkout. At this time I have 3 links with 3 iframes. You have a number in the link and a corresponding number for the iframe (<a onClick="outside_location.setInnerFBML(link_1);" style="cursor: pointer;"> and <fb:js-string var="link_1">). Change the number in those 2 places if you want more than one iframe. But I am changing that next week when I change it to just the storefront and have the 4 or 5 alternate templates running.
                Bill Weiland - Emporium Plus http://www.emporiumplus.com/store.mvc
                Online Documentation http://www.emporiumplus.com/tk3/v3/doc.htm
                Question http://www.emporiumplus.com/mivamodu...vc?Screen=SPTS
                Facebook http://www.facebook.com/EmporiumPlus
                Twitter http://twitter.com/emporiumplus

                Comment


                  #9
                  Re: Dynamic Content in FaceBook - Time Sensitive

                  Originally posted by wcw View Post
                  Basically, you'll create the storefront. From that point on you shop inside the iframe until checkout. At this time I have 3 links with 3 iframes. You have a number in the link and a corresponding number for the iframe (<a onClick="outside_location.setInnerFBML(link_1);" style="cursor: pointer;"> and <fb:js-string var="link_1">). Change the number in those 2 places if you want more than one iframe. But I am changing that next week when I change it to just the storefront and have the 4 or 5 alternate templates running.
                  i saw the link number and changed it, yet didn't see the other spot.DUH.... Works like a charm now......... I think this really gonna take off Bill as more and more come up with unique ideas...
                  Last edited by Datagg; 03-10-11, 09:20 AM.
                  Dan

                  Girlfriends Lingerie - "Keeping It Sexy!"
                  Sexy Lingerie - Twitter - Facebook- Pinterest - YouTube

                  Comment


                    #10
                    Re: Dynamic Content in FaceBook - Time Sensitive

                    There is also http://www.facebook.com/iwipa?v=app_106878476015645 which I've used to display Miva pages. See http://www.facebook.com/pages/Clover...06878476015645 for a sample.
                    Michael Davidson
                    Picturesque
                    http://picturesqueweb.com

                    Comment


                      #11
                      Re: Dynamic Content in FaceBook - Time Sensitive

                      IWIPA is very slick... thanks for the heads-up on that one Michael!
                      Scott Bronstad
                      Marketing
                      Star Time Supply, Co. Inc.
                      http://store.startimesupply.com

                      Comment


                        #12
                        Re: Dynamic Content in FaceBook - Time Sensitive

                        Michael,

                        Is that one reading data directly from merchant.mvc so that changes in pricing/price groups/out of stock/etc are immediately reflected or do you do a data feed to them?
                        Bill Weiland - Emporium Plus http://www.emporiumplus.com/store.mvc
                        Online Documentation http://www.emporiumplus.com/tk3/v3/doc.htm
                        Question http://www.emporiumplus.com/mivamodu...vc?Screen=SPTS
                        Facebook http://www.facebook.com/EmporiumPlus
                        Twitter http://twitter.com/emporiumplus

                        Comment


                          #13
                          Re: Dynamic Content in FaceBook - Time Sensitive

                          Yes it is. For example...
                          Code:
                          <p>
                          	<iframe height="870" src="http://www.crateworks.com/merchant.mvc?Screen=FB-BEST&Store_Code=crateworks" width="490"></iframe></p>
                          shows the page FB-BEST or the bestsellers. Just remember that the first tab cannot show iframes.
                          Michael Davidson
                          Picturesque
                          http://picturesqueweb.com

                          Comment


                            #14
                            Re: Dynamic Content in FaceBook - Time Sensitive

                            And in the spirit of sharing... here's the page code using Bill's fabulous ToolKit...
                            Code:
                            <style type="text/css">
                            a {outline:none;}
                            #container {
                            max-width:600px;
                            margin:0 auto;
                            background:#fbfbfb;
                            border:1px solid #f0f0f0;
                            overflow:auto;
                            margin:10px;
                            font-family: "Lucida Grande", Arial, sans-serif;
                            font-size:62.5%;
                            text-align:left;
                            color:#636568;
                            }
                            #header {
                            background:#ededed;
                            border:1px solid #dfdfdf;
                            margin:7px 9px;
                            overflow:auto;
                            }
                            .line {
                            height:1px;
                            line-height:1px; border-top:1px solid #fafafa;
                            }
                            .line-top {
                            height:1px;
                            line-height:1px; border-top:1px solid #fff;
                            }
                            #logo {
                            margin:7px 9px;
                            float:left;
                            width:50px;
                            height:50px;
                            }
                            #logo img{
                            display:block;
                            height:70px;
                            width:70px;
                            border-bottom:1px solid #fff;
                            }
                            #desc {font-size:1.2em;}
                            #desc h1 {
                            font-size:1.8em;
                            font-weight:normal;
                            color:#4a6ea9;
                            margin:10px 0 5px 0;
                            padding:0;
                            }
                            #desc a {color:#3b5998;}
                            #desc a:hover {text-decoration:none;}
                            .title {
                            background:#ededed;
                            border:1px solid #dfdfdf;
                            margin:9px;clear:both;
                            }
                            .title h2 {
                            padding:7px 9px;
                            margin:0;
                            font-size:1.2em;
                            color:#424344;
                            }
                            .prod-container {margin-right:9px;}
                            .prod-item {float:left;width:50%;}
                            .prod-bg {
                            border:1px solid #dfdfdf;
                            background:#fff;
                            margin-left:9px;
                            }
                            .prod-image {
                            margin:20px 5px; text-align:center; overflow:hidden;
                            }
                            .prod-image img {
                            	max-width:100px;
                            	width: expression(this.width > 100 ? 100: true);
                            	max-height:85px;
                            	height: expression(this.width > 100 ? 100: true);
                            }
                            .prod-name {
                            font-size:1.1em;
                            font-weight:bold;
                            margin:5px;
                            height:30px;
                            }
                            .prod-name a {
                            text-decoration:none;
                            color:#333;
                            }
                            .prod-name a:hover {color:#3b5998;}
                            .prod-price {
                            font-size:1.5em;
                            color:#5ca94a;
                            font-weight:bold;
                            margin:5px;
                            text-align:right;
                            }
                            .prod-btn {margin-top:5px;height:15px;}
                            .prod-btn a {
                            display:block;
                            border:1px solid #dfdfdf;
                            float:right;
                            margin-bottom:20px;
                            height:15px;
                            padding:0 3px;
                            color:#3b5998;
                            text-decoration:none;
                            font-size:1.1em;
                            font-weight:normal;
                            }
                            .prod-btn a:hover {color:#666;}
                            .prod-btn-plus {
                            float:right;
                            border:1px solid #dfdfdf;
                            border-left:0;
                            background:#ededed;
                            font-size:1.4em;
                            line-height:1em;
                            font-weight:bold;
                            padding:0 3px;
                            text-align:center;
                            margin-top:5px;
                            height:15px;
                            }
                            .prod-btn-plus a {
                            color:#3b5998;
                            text-decoration:none;
                            }
                            </style>
                            <div id="container">
                            <!--Best Sellers-->
                            <div class="title">
                            <div class="line"></div>
                            <h2>Best Sellers</h2></div>
                            <mvt:item name="toolkit" param="bestseller|pcount|ALL|8" />
                            <mvt:if expr="pcount GT 0">
                            <div class="prod-container">
                            <mvt:foreach iterator="bestsell" array="bestseller">
                            <div class="prod-item">
                            <div class="prod-bg">
                            <div class="prod-image">
                            <a href="&mvt:global:sessionurl;Screen=PROD&Product_Code=&mvta:bestsell:code;&Store_Code=&mvta:store:code;" target="_blank">
                            <img src="&mvte:bestsell:thumbnail;" alt="&mvte:bestsell:name;" border="0"></a>
                            </div>
                            <div class="prod-name">
                            <a href="&mvt:global:sessionurl;Screen=PROD&Product_Code=&mvta:bestsell:code;&Store_Code=&mvta:store:code;" target="_blank">
                            &mvte:bestsell:name;</a></div>
                            <div class="prod-price">
                            &mvte:bestsell:formatted_price;</div>
                            </div>
                            <div class="prod-btn-plus">
                            <a href="&mvt:global:sessionurl;Screen=PROD&Product_Code=&mvta:bestsell:code;&Store_Code=&mvta:store:code;" target="_blank">
                            +</a></div>
                            <div class="prod-btn">
                            <a href="&mvt:global:sessionurl;Screen=PROD&Product_Code=&mvta:bestsell:code;&Store_Code=&mvta:store:code;" target="_blank">
                            View Item</a></div>
                            </div>
                            </mvt:foreach>
                            </div>
                            </mvt:if>
                            
                            <div class="title">
                            <div class="line"></div>
                            <h2>
                            Please visit our full online store here... <a href="http://www.cloverleaffarmherbsandgifts.com/" target="_blank">Cloverleaf Farm</a>
                            </h2>
                            </div>
                            </div>
                            Michael Davidson
                            Picturesque
                            http://picturesqueweb.com

                            Comment


                              #15
                              Re: Dynamic Content in FaceBook - Time Sensitive

                              Still working on the concept. Currently debating whether to pass fb=1 or affiliate=fb in the url. You can then use the same pages for the full site and the scaled down (narrow) FaceBook, based on the conditional. The latter has the advantage of being able to track source/sales by looking at your fake affiliate account called fb. The disadvantage is if they flip over to the full store and then visit those pages with conditionals, they'd be seeing the wrong page as the affiliate info is carried from page to page in the affiliatesession database.

                              Anyway, the store is functioning at http://www.facebook.com/EmporiumPlus?sk=app_4949752878 The "All Products" combines the category, product list, and search all into one screen.
                              Bill Weiland - Emporium Plus http://www.emporiumplus.com/store.mvc
                              Online Documentation http://www.emporiumplus.com/tk3/v3/doc.htm
                              Question http://www.emporiumplus.com/mivamodu...vc?Screen=SPTS
                              Facebook http://www.facebook.com/EmporiumPlus
                              Twitter http://twitter.com/emporiumplus

                              Comment

                              Working...
                              X