Yahoo! recently released a new Feature to the Yahoo Store and Merchant Solutions called Social Share, This feature will add a Facebook Like button and a twitter share link for every product on your store. One issue, like every new feature, is if you have Custom templates in your store then you will have to make some RTML changes. If you don’t have custom templates you can just turn it on and enjoy. I will be walking you through setting up the new SOCIAL-SHARE RTML operator. Even if you don’t have custom templates I will also show you some nice CSS to add to your css-edits style sheet and get your social ON!
With Editor v3.0 templates you can just turn on Social-enable in the variables page, which should look like this:
With Social-enable set to Yes your stock templates will start to show the social Icons! Unfortunately, they will not look nice; the twitter icon is stacked on the Like button. If, like me, that is not what you want to see you will need to add some CSS, go to contents button at the top and find the css-edits.css file and then hit edit from there just copy and past the code and hit update.
-
/* Social Media Share */
-
-
#ys_social_top_hr {border-top:1px solid #CFCECE; margin-bottom:5px; margin-top:5px; clear:both; }
-
#ys_social_media {height:26px;display:inline-block;vertical-align:middle;margin-left:10px; }
-
#ys_social_fblike {float:left;}
-
#ys_social_fbshare {float:left;}
-
#ys_social_tweet {float:left;}
-
#ys_social_yahoo {float:left;}
-
#ys_social_v_separator {margin-left:10px;margin-right:10px;float:left;}
-
#ys_social_bottom_hr {border-top:1px solid #CFCECE; margin-top:5px;}
If all you have is custom templates then you are done and can enjoy your new social media share icons but for the store owners that have custom templates we have you covered in the next paragraph.
Yahoo! had added the SOCIAL-SHARE RTML operator to the Display-item. template and we are going to do the same just on the template copy. Find the yhst-#########-display-item template once you are on that template page hit the “new” button at the top of the page and find the SOCIAL-SHARE in the RTML operator list and hit update. Now I will have you click on the DIV that has a class of STRING-APPEND, once you click on that div and it turns black then click on the “Paste After” button and you have the social icons in a nice place but wait there is more, you will notice that there are 2 nil’s that are attached to the SOCIAL-SHARE operator that need to be filled out there is name and desc which stands for description. The SOCIAL-SHARE operator should be black after the paste and all you have to do is click edit button at the top once that is done type @name on the name field and @caption in the desc field and hit update. There now you are done, so check your item pages and make sure they look right, here is an image of my social media share on my test store. If you can’t get Social Media Share to work let E-comm Solution install it for you!
One Trackback
[...] by E-comm under Code, HTML, RTML, Yahoo store ** 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 [...]