Move Social Api icons to top of Com_content Article

Hi

Was wondering which code I have to move to get the social api icons that are currently appearing at the bottom of articles to appear at the top? There was an option in the template options before, there isn't now?

Thank you

Hi

Please show me exacly what You have in mind. Show me Your page also.

Thank you for quick reply I managed to find what it was I was looking for.

I wanted to move the Social API icons from the bottom of articles to the top, for easier social sharing (see screenshot below).

For anybody else struggling with same issue.

In <joomla root>/templates/gk_game_magazine/html/com_content/article/default.php in

Code: Select all

<gavern:desktop>

find the social api code around line 222

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><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 class="DiggThisButton GK_DIGG_SETTINGS" href="<?php echo $cur_url; ?>"></a></gavern:social>
          <gavern:social><a href="http://www.delicious.com/save" onclick="window.open('http://www.delicious.com/save?v=5&noui&amp;jump=close&amp;url='+encodeURIComponent(location.href)+'&amp;title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=550,height=550'); return false;" class="deliciousBtn" title="<?php echo JText::_('TPL_GK_LANG_DELICIOUS_TITLE'); ?>"></a></gavern:social>
          <gavern:social><a href="http://www.instapaper.com/hello2?url=<?php echo urlencode($cur_url); ?>&amp;title=<?php echo urlencode($this->item->title); ?>" class="instapaperBtn" title="<?php echo JText::_('TPL_GK_LANG_INSTAPAPER_TITLE'); ?>"></a></gavern:social>
     <gavern:social><div class="clr"></div></div></gavern:social>


and move it to above the article content paragraph around line 177

Code: Select all

<div class="articleContent">

add a clear div below social api to make sure the article content doesn't come up to near the social icons,

Code: Select all

<div class="clear clearfix"></div>

This should move the Social API icons above the article, it will help them get noticed more and hopefully your visitors will share your articles across the social networks more, hopefully bringing more attention and in effect more traffic to your website.

As an extra you may want to use CSS to make the Social Api icons fit in better above the articles, I added this to override.css

Code: Select all

/* Social API */
.article-info { padding: 0 0 10px!important;}
#gkSocialAPI { margin: 0px!important; padding: 10px 0 0!important;}


This decresed the padding at the bottom of the article info section, and also decresed the padding above the Social Api icons, making the icons seem better into the webpage.

I think you can use this article to do the same in any J1.7 Gavick template, the line numbers might be different but rest is essentially the same.

Hope this helps somebody else too.

Hi

That's a really good explanation Thanks for that.

Thanks for the work on this very easy to do and looks good too.

Hi

I think I'm gonna show that to programmers, maby they'll agree to add that to documentation

Thank you for quick reply I managed to find what it was I was looking for.

I wanted to move the Social API icons from the bottom of articles to the top, for easier social sharing (see screenshot below).

For anybody else struggling with same issue.

In <joomla root>/templates/gk_game_magazine/html/com_content/article/default.php in

Code: Select all

<gavern:desktop>

find the social api code around line 222

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><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 class="DiggThisButton GK_DIGG_SETTINGS" href="<?php echo $cur_url; ?>"></a></gavern:social>
          <gavern:social><a href="http://www.delicious.com/save" onclick="window.open('http://www.delicious.com/save?v=5&noui&amp;jump=close&amp;url='+encodeURIComponent(location.href)+'&amp;title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=550,height=550'); return false;" class="deliciousBtn" title="<?php echo JText::_('TPL_GK_LANG_DELICIOUS_TITLE'); ?>"></a></gavern:social>
          <gavern:social><a href="http://www.instapaper.com/hello2?url=<?php echo urlencode($cur_url); ?>&amp;title=<?php echo urlencode($this->item->title); ?>" class="instapaperBtn" title="<?php echo JText::_('TPL_GK_LANG_INSTAPAPER_TITLE'); ?>"></a></gavern:social>
     <gavern:social><div class="clr"></div></div></gavern:social>


and move it to above the article content paragraph around line 177

Code: Select all

<div class="articleContent">

add a clear div below social api to make sure the article content doesn't come up to near the social icons,

Code: Select all

<div class="clear clearfix"></div>

This should move the Social API icons above the article, it will help them get noticed more and hopefully your visitors will share your articles across the social networks more, hopefully bringing more attention and in effect more traffic to your website.

As an extra you may want to use CSS to make the Social Api icons fit in better above the articles, I added this to override.css

Code: Select all

/* Social API */
.article-info { padding: 0 0 10px!important;}
#gkSocialAPI { margin: 0px!important; padding: 10px 0 0!important;}


This decresed the padding at the bottom of the article info section, and also decresed the padding above the Social Api icons, making the icons seem better into the webpage.

I think you can use this article to do the same in any J1.7 Gavick template, the line numbers might be different but rest is essentially the same.

Hope this helps somebody else too.

hi 4 site

i did this with the worldnews II, and nothing happens. i will like to have it at the top like you had yours

Hi

@bamidele112 please make the code back as it was and show me Your page than. Lets try a different method

Hi

I think I'm gonna show that to programmers, maby they'll agree to add that to documentation

Social Icons moved for normal Joomla articles.

How do move Social Icons to top of K2 items?

Hi

When You edit file /html/com_k2/templates/default/item.php You will see a code for K2 article. Just look for a code adding social buttons copy it and paste in the same file under the element You would like it to be shown. If it will not look good and need some styling You can show it to me so I'll tell You rest of the code.

Hi

When You edit file /html/com_k2/templates/default/item.php You will see a code for K2 article. Just look for a code adding social buttons copy it and paste in the same file under the element You would like it to be shown. If it will not look good and need some styling You can show it to me so I'll tell You rest of the code.

I cannot figure this out. Went to the item.php file, but I cannot figure out the code to move. Help Please.

Hi

Please send me FTP access and I'll make it for You.

Hi

Please send me FTP access and I'll make it for You.

I have sent the information you requested.

Hi

Ok. Done. To make it please edit /html/com_k2/templates/default/item.php , cut this code:

Code: Select all

            <?php if($this->item->params->get('itemTwitterButton',1) || $this->item->params->get('itemFacebookButton',1) || $this->item->params->get('itemGooglePlusOneButton',1)): ?>
                <!-- Social sharing -->
                <div class="itemSocialSharing">
           
                    <?php if($this->item->params->get('itemTwitterButton',1)): ?>
                    <!-- Twitter Button -->
                    <div class="itemTwitterButton">
                        <a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal"<?php if($this->item->params->get('twitterUsername')): ?> data-via="<?php echo $this->item->params->get('twitterUsername'); ?>"<?php endif; ?>><?php echo JText::_('K2_TWEET'); ?></a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
                    </div>
                    <?php endif; ?>
                   
                    <?php if($this->item->params->get('itemFacebookButton',1)): ?>
                    <!-- Facebook Button -->
                    <div class="itemFacebookButton">
                        <div id="fb-root"></div>
                        <script type="text/javascript">
                            (function(d, s, id) {
                              var js, fjs = d.getElementsByTagName(s)[0];
                              if (d.getElementById(id)) {return;}
                              js = d.createElement(s); js.id = id;
                              js.src = "//connect.facebook.net/en_US/all.js#appId=177111755694317&xfbml=1";
                              fjs.parentNode.insertBefore(js, fjs);
                            }(document, 'script', 'facebook-jssdk'));
                        </script>
                        <div class="fb-like" data-send="false" data-width="260" data-show-faces="true"></div>
                    </div>
                    <?php endif; ?>
           
                    <?php if($this->item->params->get('itemGooglePlusOneButton',1)): ?>
                    <!-- Google +1 Button -->
                    <div class="itemGooglePlusOneButton">   
                        <g:plusone annotation="inline" width="120"></g:plusone>
                        <script type="text/javascript">
                          (function() {
                            window.___gcfg = {lang: 'en'}; // Define button default language here
                            var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
                            po.src = 'https://apis.google.com/js/plusone.js';
                            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
                          })();
                        </script>
                    </div>
                    <?php endif; ?>
                   
                    <div class="clr"></div>
                </div>
                <?php endif; ?>


and paste it under this line:

Code: Select all

<div id="k2Container" class="itemView<?php echo ($this->item->featured) ? ' itemIsFeatured' : ''; ?><?php if($this->item->params->get('pageclass_sfx')) echo ' '.$this->item->params->get('pageclass_sfx'); ?>">


Hi

And here is a result of it.

Gavick Team is awesome. Thanks for the help

Hi

No problem. Glad I could help.