Adding Google Plus to your Yahoo Store

Google recently launched their new social network plus. This new platform aims to provide Real-life sharing rethought for the web. This quick tutorial will walk you through adding this new feature to your Yahoo Store’s social sharing feature using simple RTML and CSS.  If you haven’t already added the social share feature then this walk through will help you knock out adding both features so you are one small step ahead in adding social sharing features to your product pages.

Adding the RTML

Don’t let this mysterious under-published language scare you. For this task we are adding a small edit that shouldn’t cause any impact on your existing custom or default templates.

Store Editor

In your store editor home page click on the home template. This may be named something custom if you have already had work done on your stores templates.

Once you click this button you have entered the template editor. We aren’t modifying the home page template for this project so at the top of your main template click on the button Templates.

display-item rtml template

Now from the templates screen you should have a full list of templates used in your store. From the list locate the display-item template and click on that template. If your store has been customized this will either be named Yhst-xxxxxx-display-item or a custom name depending on your developer.

In the template editor if you’ve already added social share you should see this operator already listed at the bottom of this template. Don’t worry about the existing installation for right now we are going to enhance it with some additional markup.

Click New at the top of the editor and create a new DIV operator. This will display at the bottom with all properties marked as NIL.  Click on the div and in the id field add "some".

Now if the SOCIAL-SHARE already exists click on that operator at the bottom of your template then from the tool bar click Replace.

replace social share with a new div

Now you have a new CSS div to wrap the social share elements in, but we still need to add the new plus element to our some div. **So go ahead and go to the top and click **New **and create a new **SPAN operator. In this Span add the class "plus"and add the style rules.

float:left;height:24px;width:75px;border-right: 1px dotted #CCCCCC;

Now that we have some style elements in place go ahead and create another new TEXT operator. For this element we are going to add the Google plus code.

<g:plusone></g:plusone>

Now we have all of our elements in place so its time to configure our social div with the Yahoo Social Share and our new Google plus elements. We are going to use the Paste Within to first add the Span to the some div. Once added then click on the span operator and click pastewithin to add the TEXT operator.

Lastly if you used the replace method above you should be able to click on the DIV for some and paste within again to add the SOCIAL-SHARE operator. If it wasn’t already installed just click new and add this operator from the list and then use paste within to add it to the some div. When all completed you should have this.

Social Media DIV in rtml

Now if you haven’t worked with rtml before this may take a couple tries to work through but the important thing is the paste within. This action is what nests our elements together for easier styling. You can verify you have done this correctly by the indentation that should be visible in our RTML.

Adding the CSS

Yahoo provides some default CSS to use for this in their help pages but it only styles the existing social features { twitter, Facebook } I’ve re-written the CSS to accommodate the new plus feature. Copy the CSS below and add it to your css-edits file.

#some { display:inline block;border-top: 1px solid #CFCECE;clear: both;margin-bottom: 5px;margin-top: 5px;padding-top: 6px;padding-left: 6px; }
#ys_social_media { height:26px;display:inline-block;vertical-align:middle;margin-left:10px; }
#ys_social_fblike { float:left; }
#ys_social_tweet { 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; }

Adding the Javascript

This is an easy step. You just need to locate an element in your variables page that displays at the bottom of the page. I chose to use the copyright field. Once you’ve chosen a field to use add :

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

social-share with google plus one

Now you should be able to preview and item page and see an nice clean layout with all three of our social networks displayed.

Happy Friday and Happy Editing!


3 thoughts on “Adding Google Plus to your Yahoo Store

  1. What happened to the images for the "Adding Google Plus to your Yahoo Store" article? I need to implement this, but would like to see the images so I do not make a mistake. Also, Have you tried to add the Pinterest Pinit button to a Yahoo store? Been looking high and low for instructions! Thanks!

    • Sorry about the images… That should be fixed now.. { joys of theme changes }.

      As far as Pinterest I haven't worked with Yahoo! stores in over a year so I haven't looked into it. Might be something I could pull off with Jquery.

      • Thanks so much!

        If you have any ideas about adding Pinterest, it would be greatly appreciated. Yahoo is extremely poor in updating their features to keep up with current trends! Thanks again!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>