Aug 04 2010

Facebook “Like” Button

fb-like-button** check out the new Yahoo! social network plugin at Social Share** Social networking is big. If this is news to you, come out from the rock you live under and join the fun on the  ”interwebs”. I am going to show you how to add a Facebook Like button to your store with RTML code.  This button will have the item page URL built into it so everyone’s friends can see what they liked. The goal of this is to bring in new customers, and I hope that it helps your Yahoo! store.

I will show you how to add it right under the headline just like the above image. We will start by finding the Yhst-#######-image-and-text template.  On that template we need to look for this code:

DIV id mainid
  WHEN AND
         NONEMPTY header
         POSITION element :display-text-title
                  sequence headel
    TAG class WHEN AND
                     EQUALS value1 align
                            value2 :center
                     NOT CALL :yhst-16600815412482-has-price
                "contenttitle-center"
        id headerid
        tag "h1"
      TEXT header

The top of the template should appear as above.  I would like you to click on the “TAG” operator.  Once it is black, click on  ”new” at the top, from there we will find the “WHEN” operator and hit “Create,” then “paste after” so it should look like this:

TAG class WHEN AND
                     EQUALS value1 align
                            value2 :center
                     NOT CALL :yhst-16600815412482-has-price
                "contenttitle-center"
        id headerid
        tag "h1"
      TEXT header
    WHEN nil

Now click on “nil” and hit “new”, then find the CALL op and hit create again.  From there hit “replace” and should now see

WHEN CALL

Now click on “CALL” and hit edit, then add this text without the quotes “:has-price.”  It should look like

WHEN CALL :has-price.

Now for the Meat of the like button, click on “WHEN,” hit  ”new” and find “TEXT,” then “create.”  You will need to paste that within the “WHEN” op. We will now add the facebook code and you will need to edit this for your domain:

"<div id=\"fb-root\"></div><script language=\"javascript\">if(runInitFB) {window.fbAsyncInit = function() {FB.init({appId: \"25966453290\",xfbml: true});};(function() {var e = document.createElement(‘script’); e.async = true;e.src = document.location.protocol + ‘//connect.facebook.net/en_US/all.js’;document.getElementById(‘fb-root’).appendChild(e);}());}</script><div class=\"fbDiv\"><fb:like show_faces=’false’ layout=’standard’ width=’300px’ href=’http://YOURDOMAIN.COM/"

Now lets build the item URL, click new and “TEXT” then click on the “nil” of the TEXT op click new and select “AS-STRING” and replace the “nil” from there click on “edit” and type “id” without quotes, from there we need to click the new again and find “Text” and we will need to paste that after the last “TEXT” op. Now we will finish up the code with the closing of all the tags. click edit and add this with quotes ".html'&gt;&lt;/fb:like&gt;&lt;/div&gt;"

and the template as a whole should look like…

DIV id mainid
  WHEN AND
         NONEMPTY header
         POSITION element :display-text-title
                  sequence headel
    TAG class WHEN AND
                     EQUALS value1 align
                            value2 :center
                     NOT CALL :yhst-16600815412482-has-price
                "contenttitle-center"
        id headerid
        tag "h1"
      TEXT header
    WHEN CALL :has-price.
      TEXT

"<div id=\"fb-root\"></div><script language=\"javascript\">if(runInitFB) {window.fbAsyncInit = function() {FB.init({appId: \"25966453290\",xfbml: true});};(function() {var e = document.createElement(‘script’); e.async = true;e.src = document.location.protocol + ‘//connect.facebook.net/en_US/all.js’;document.getElementById(‘fb-root’).appendChild(e);}());}</script><div class=\"fbDiv\"><fb:like show_faces=’false’ layout=’standard’ width=’300px’ href=’http://YOURDOMAIN.COM/"

      TEXT AS-STRING id
      TEXT

".html’></fb:like></div>"

  WHEN OR
         NONEMPTY @code
         CALL :yhst-16600815412482-has-price
    CALL :yhst-16600815412482-display-item
      align
      headel
      imgclass
  WHEN OR
         NONEMPTY text
         image
    CALL :yhst-16600815412482-display-paras
      textid
      text
      image
      h
      w
      align
      area
      headel
      imgclass
    LINEBREAK clear :all

some of the code is not 100% right and that is how it will line up on the blog. when copied and pasted into the RTML it will work right. If you have any issues post in the comments

Tags: , , , ,

categories Code, HTML, RTML, Yahoo store | | 04 August 2010 |

2 Comments

  • By Jim BungerNo Gravatar, October 19, 2010 @ 9:41 pm

    ok I am a little new to all of this rtml but when I followed this I get a jscript error that ‘runInitFB’ is undefined. I contacted yahoo to have them add the FB information to my doc type but i am not sure that that will fix it. ay ideas what I maight be doing wrong?

  • By drifterz28No Gravatar, October 26, 2010 @ 6:38 pm

    it is not your doc type but part of the javascript code. Keep in mind that with RTML you are chopping up the javascript to add the RTML elements that will add the needed content.

Other Links to this Post

RSS feed for comments on this post.

Leave a comment

You must be logged in to post a comment.