Here is a tutorial on how to but the Facebook like button on your Yahoo! store item pages. It’s not to hard but it sure isn’t for the beginners!
You also must know how to edit RTML for this tutorial.
This is only for the Yahoo! Store Editor V3.
The first thing that we are going to want to do is create a variable for the source to go into.
Login into your store manager >> Store Editor >> Variables
Once we are in the variables page we are going to create a new one! Click the button up top that says “define new variable”.
For the new variable specs lets use the following!
Name: fb
Type: bigtext
Then click continue and it will redirect you to the main page of the variables. Now scroll towards the bottom and find the “fb” variable text box that we have just added and paste the following code into that text box.
|
|
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: true,
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> |
To get your Facebook App ID you will need to login to your facebook account.
Once you are on the your name page of facebook “New Feed” click on your name next to your profile picture.
If you now look at the top of the website in your URL you will see a series of number or somethings even letters.
Copy that and plug it into your variables “fb” code source where it says “APP ID HERE”.
Now you will need to put a the add the code below into your “Head-Tags” in the variables page as well. You can put it in the very top of the text field to make sure that you don’t mess with any of the other head tag scripts.
|
|
<!--Facebook Header-->
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<!--Facebook Header--> |
Now that we have the variables and the source in place its now time to get the store to show that with a little RTML magic!
Store Editor >> Templates >> yhst-xxxxxxxxxxxxxx-display-item
Edit the RTML to match what is showing below! The grey is the new RTML that you will need to be adding, nothing above it!
Now, be sure to check your store items to be sure that it is showing the facebook like feature. If it is not working please double check your APP ID in the variable fb source.
I hope you have successfully added this feature to your Yahoo! store. If you have any question please feel free to ask!
...
View all articles by Adam