How to show the social buttons on the product details page?

Here's an example of what I want:



How to proceed using the Social API and Gavern Framework?

Hi

For sure You can add this into code at /html/com_virtuemart/products/default.php but it would be better to use a plugin which would add it for You. I'm sure there will be plenty of such plugins.

I want to integrate with the Social API. I know there are plugins for this.

I want to integrate with the Social API. I know there are plugins for this.

Hi

Here is a code You need to use. Just copy it to the top of VM product page file override:

Code: Select all

   <gavern:desktop>
      <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></div></gavern:social>
    </gavern:desktop>



It seems something is missing, the buttons on Twitter and Google+ does not appear.

http://www.precisionarms.com.br/demo-si ... cisionarms

Success

Code: Select all

          <gavern:social><div id="gkSocialAPI"></gavern:social>
          <gavern:social><fb:like href="<?php echo $url; ?>" GK_FB_LIKE_SETTINGS></fb:like></gavern:social>
        <gavern:social><g:plusone GK_GOOGLE_PLUS_SETTINGS callback="<?php echo $url ?>"></g:plusone></gavern:social>
          <gavern:social><a href="http://twitter.com/share" class="twitter-share-button" data-text="<?php echo $this->product->product_name ?>" data-url="<?php $url; ?>" gk_tweet_btn_settings>Tweet</a></gavern:social>
          <gavern:social><a class="DiggThisButton GK_DIGG_SETTINGS" href="<?php echo $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($url); ?>&amp;title=<?php echo $this->product->product_name ?>" class="instapaperBtn" title="<?php echo JText::_('TPL_GK_LANG_INSTAPAPER_TITLE'); ?>"></a></gavern:social>
         <gavern:social><a href="http://pinterest.com/pin/create/button/?url=<?php echo $url ?>&amp;media=<?php echo $pin_image; ?>&amp;description=<?php echo $this->product->product_name ?>" 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 class="clr"></div></div></gavern:social>
            
            <gavern:social>
<script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
</gavern:social>
<gavern:social>
<script type="text/javascript">
  window.___gcfg = {lang: 'pt-BR'};
  (function() {
    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>
<gavern:social><script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script></gavern:social>
</gavern:social>
<!-- Pinterest script -->
<gavern:social>
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
</gavern:social>

The code was quite fat, I had to copy a content block social.php (it was missing ), but still the Twitter button does not appear

It is perfectly integrated with the panel of buttons to set up there, look at how it went:

http://www.precisionarms.com.br/demo-si ... cisionarms

Note, it is only possible to activate and deactivate buttons on the backend.

Giving up the Social API, I'm using AddThis.

Tip,

Wrapped the code with these tags:

Code: Select all

<gavern:desktop>
Content here
</gavern:desktop>

This prevents the buttons appear on the mobile version

Hi

I can see You've bite throught that What I can say? More such users please