Position social share button

Hi, I ask for help to find out how you can make a change to the social buttons for this template.


What I want is to display the share buttons below each item not the text, but to the left, perhaps under the date (when present).

I am attaching an image that shows the effect that I would like (not necessarimente with those icons, I am interested in the concept)

thanks to everyone for the help

Hi

Please tell me if it's a K2 or a joomla regular article.

Hi

Please tell me if it's a K2 or a joomla regular article.

It's a joomla regular article.

Hi

Please edit file /html/com_content/article/default.php. Copy a code starting from line 271:

Code: Select all

         <gavern:social><div id="gkSocialAPI"></gavern:social>
            <gavern:social><fb:like href="<?php echo $cur_url; ?>" GK_FB_LIKE_SETTINGS></fb:like></gavern:social>
             <gavern:social><g:plusone GK_GOOGLE_PLUS_SETTINGS callback="<?php echo $cur_url; ?>"></g:plusone></gavern:social>
              <gavern:social><g:plus action="share" GK_GOOGLE_PLUS_SHARE_SETTINGS href="<?php echo $cur_url; ?>"></g:plus></gavern:social>
             <gavern:social><a href="http://twitter.com/share" class="twitter-share-button" data-text="<?php echo $this->item->title; ?>" data-url="<?php $cur_url; ?>"  gk_tweet_btn_settings>Tweet</a></gavern:social>
            <gavern:social><a href="http://pinterest.com/pin/create/button/?url=<?php echo $cur_url; ?>&amp;media=<?php echo $pin_image; ?>&amp;description=<?php echo str_replace(" ", "%20", $this->item->title); ?>" class="pin-it-button" count-layout="GK_PINTEREST_SETTINGS"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="<?php echo JText::_('TPL_GK_LANG_PINIT_TITLE'); ?>" /></a></gavern:social>
      
      
          <gavern:social></div></gavern:social>


and paste before ending tag of </aside> at line 190.

Thank you!!

It works perfectly!

Hi

Great to hear that I wasn;t 100% sure if this will not stretch the aside space and cover article. Can You just attache a screenshot so other users will see how it looks like now ?

Hi

Great to hear that I wasn;t 100% sure if this will not stretch the aside space and cover article. Can You just attache a screenshot so other users will see how it looks like now ?

Sorry, my error.

The code works, but the facebook button cover in horizzontal line the space of the text.
For this I have pasted html code of ShareThis website and it works fine.

This is the code that i have used in /html/com_content/article/default.php at line 190

Code: Select all

   <div>
         <script type="text/javascript">var switchTo5x=true;</script>
         <script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
         <script type="text/javascript">stLight.options({publisher: "********", doNotHash: false, doNotCopy: false, hashAddressBar: false,  popup: "true"});</script>
         <span class='st_facebook_large' displayText='Facebook' title="Condividi su Facebook!"></span><br/>
         <span class='st_twitter_large' displayText='Tweet'  title="Condividi su Twitter!"></span><br/>
         <span class='st_googleplus_large' displayText='Google +'  title="Condividi su Google+!"></span><br/>
         <span class='st_pinterest_large' displayText='Pinterest'  title="Condividi su Pinterest!"></span><br/>
      </div>

And the image is the results

But since I was sorry to have to use an external code, is there a way to change the icons of buttons that use the template?

Hi
Yes facebook iframe was what I was afraid of. I suspected it will not fit there. So Your solution is perfect for this place ShareThis allows to use much smaller icons, so will fit best.