*

BabyDunk

  • ****
  • 161 posts
[Suggestion] WhatsApp and Viber share buttons
« on: July 09, 2016, 10:50:55 PM »
credit to mixradu over at the Zara Theme for posting the whatsapp share button for items, but i have taken it a wee bit further.

if you want whatsapp and viber share buttons, copy and replace/add this.

open item.php and find this
Code: [Select]
         
          <div class="listing-share">
            <?php osc_reset_resources(); ?>
            <span><?php _e('Share''patricia'); ?></span>
            <a class="single single-facebook" title="<?php echo osc_esc_html(__('Share on Facebook''patricia')); ?>" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo osc_item_url(); ?>"><i class="fa fa-facebook-square"></i></a>
            <a class="single single-google-plus" title="<?php echo osc_esc_html(__('Share on Google Plus''patricia')); ?>" target="_blank" href="https://plus.google.com/share?url=<?php echo osc_item_url(); ?>"><i class="fa fa-google-plus-square"></i></a>
            <a class="single single-twitter" title="<?php echo osc_esc_html(__('Share on Twitter''patricia')); ?>" target="_blank" href="https://twitter.com/home?status=<?php echo osc_item_title(); ?>"><i class="fa fa-twitter-square"></i></a>
            <a class="single single-pinterest" title="<?php echo osc_esc_html(__('Share on Pinterest''patricia')); ?>" target="_blank" href="https://pinterest.com/pin/create/button/?url=<?php echo osc_item_url(); ?>&media=<?php echo osc_resource_url(); ?>&description=<?php echo htmlspecialchars(osc_item_title()); ?>"><i class="fa fa-pinterest-square"></i></a>
          </div>


Replace with this.
Code: [Select]
          <div class="listing-share">
            <?php osc_reset_resources(); ?>
            <span><?php _e('Share''patricia'); ?></span>
            <a class="single single-viber" href="viber://forward?text=<?php echo osc_item_url(); ?>"><i class="fa fa-phone-square"></i></a>
            <a class="single single-whatsapp" href="whatsapp://send?text=<?php echo osc_item_url(); ?>" data-action="share/whatsapp/share"><i class="fa fa-whatsapp"></i></a>
            <a class="single single-facebook" title="<?php echo osc_esc_html(__('Share on Facebook''patricia')); ?>" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo osc_item_url(); ?>"><i class="fa fa-facebook-square"></i></a>
            <a class="single single-google-plus" title="<?php echo osc_esc_html(__('Share on Google Plus''patricia')); ?>" target="_blank" href="https://plus.google.com/share?url=<?php echo osc_item_url(); ?>"><i class="fa fa-google-plus-square"></i></a>
            <a class="single single-twitter" title="<?php echo osc_esc_html(__('Share on Twitter''patricia')); ?>" target="_blank" href="https://twitter.com/home?status=<?php echo osc_item_title(); ?>"><i class="fa fa-twitter-square"></i></a>
            <a class="single single-pinterest" title="<?php echo osc_esc_html(__('Share on Pinterest''patricia')); ?>" target="_blank" href="https://pinterest.com/pin/create/button/?url=<?php echo osc_item_url(); ?>&media=<?php echo osc_resource_url(); ?>&description=<?php echo htmlspecialchars(osc_item_title()); ?>"><i class="fa fa-pinterest-square"></i></a>
          </div>

now open footer.php and find this
Code: [Select]
      <div id="footer-share" class="some-block right">
        <h4><?php _e('Share us''patricia'); ?></h4>
        <div class="text">
          <span class="facebook"><i class="fa fa-facebook-square"></i><a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo osc_base_url(); ?>" title="<?php echo osc_esc_html(__('Share us on Facebook''patricia')); ?>" target="_blank"><?php _e('Facebook''patricia'); ?></a></span>
          <span class="pinterest"><i class="fa fa-pinterest"></i><a href="https://pinterest.com/pin/create/button/?url=<?php echo osc_base_url(); ?>/oc-content/themes/patricia/images/logo.jpg&media=<?php echo osc_base_url(); ?>&description=" title="<?php echo osc_esc_html(__('Share us on Pinterest''patricia')); ?>" target="_blank"><?php _e('Pinterest''patricia'); ?></a></span>
          <span class="twitter"><i class="fa fa-twitter-square"></i><a href="https://twitter.com/home?status=<?php echo osc_base_url(); ?>%20-%20<?php _e('your''patricia'); ?>%20<?php _e('classifieds''patricia'); ?>" title="<?php echo osc_esc_html(__('Tweet us''patricia')); ?>" target="_blank"><?php _e('Twitter''patricia'); ?></a></span>
          <span class="google-plus"><i class="fa fa-google-plus-square"></i><a href="https://plus.google.com/share?url=<?php echo osc_base_url(); ?>" title="<?php echo osc_esc_html(__('Share us on Google+''patricia')); ?>" target="_blank"><?php _e('Google+''patricia'); ?></a></span>
          <span class="linkedin"><i class="fa fa-linkedin-square"></i><a href="https://www.linkedin.com/shareArticle?mini=true&url=<?php echo osc_base_url(); ?>&title=<?php echo osc_esc_html(__('My''patricia')); ?>%20<?php _e('classifieds''patricia'); ?>&summary=&source=" title="<?php echo osc_esc_html(__('Share us on LinkedIn''patricia')); ?>" target="_blank"><?php _e('LinkedIn''patricia'); ?></a></span>
        </div>
      </div>


Replace with this
Code: [Select]
      <div id="footer-share" class="some-block right">
        <h4><?php _e('Share us''patricia'); ?></h4>
        <div class="text">
          <span class="viber"><i class="fa fa-phone-square"></i><a href="viber://forward?text=<?php echo osc_base_url(); ?>"><?php _e('Viber''patricia'); ?></a></span>
          <span class="whatsapp"><i class="fa fa-whatsapp"></i><a href="whatsapp://send?text=<?php echo osc_base_url(); ?>" data-action="share/whatsapp/share"><?php _e('WhatsApp''patricia'); ?></a></span>
          <span class="facebook"><i class="fa fa-facebook-square"></i><a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo osc_base_url(); ?>" title="<?php echo osc_esc_html(__('Share us on Facebook''patricia')); ?>" target="_blank"><?php _e('Facebook''patricia'); ?></a></span>
          <span class="pinterest"><i class="fa fa-pinterest"></i><a href="https://pinterest.com/pin/create/button/?url=<?php echo osc_base_url(); ?>/oc-content/themes/patricia/images/logo.jpg&media=<?php echo osc_base_url(); ?>&description=" title="<?php echo osc_esc_html(__('Share us on Pinterest''patricia')); ?>" target="_blank"><?php _e('Pinterest''patricia'); ?></a></span>
          <span class="twitter"><i class="fa fa-twitter-square"></i><a href="https://twitter.com/home?status=<?php echo osc_base_url(); ?>%20-%20<?php _e('your''patricia'); ?>%20<?php _e('classifieds''patricia'); ?>" title="<?php echo osc_esc_html(__('Tweet us''patricia')); ?>" target="_blank"><?php _e('Twitter''patricia'); ?></a></span>
          <span class="google-plus"><i class="fa fa-google-plus-square"></i><a href="https://plus.google.com/share?url=<?php echo osc_base_url(); ?>" title="<?php echo osc_esc_html(__('Share us on Google+''patricia')); ?>" target="_blank"><?php _e('Google+''patricia'); ?></a></span>
          <span class="linkedin"><i class="fa fa-linkedin-square"></i><a href="https://www.linkedin.com/shareArticle?mini=true&url=<?php echo osc_base_url(); ?>&title=<?php echo osc_esc_html(__('My''patricia')); ?>%20<?php _e('classifieds''patricia'); ?>&summary=&source=" title="<?php echo osc_esc_html(__('Share us on LinkedIn''patricia')); ?>" target="_blank"><?php _e('LinkedIn''patricia'); ?></a></span>
        </div>
      </div>


Now for style , open style.css and find
Code: [Select]
/* LISTING SOCIAL SHARE */
.listing-share {float: left;width: 100%;text-align: center;margin: 25px 0 10px 0;position:relative;}
.listing-share span {color:#777;font-size:13px;top:13px;left:0px;position:absolute;font-family:"Open Sans",sans-serif;}
.listing-share .single {margin:0 3px;background:#fff;display: inline-block;}
.listing-share .single .fa {font-size:46px;float:left;cursor:pointer;opacity:0.8;width:42px;}
.listing-share .single:hover .fa {opacity:1;}
.listing-share .single-twitter .fa {color:#00ACB3;}
.listing-share .single-facebook .fa {color:#0067CB;}
.listing-share .single-google-plus .fa {color:#E23C00;}
.listing-share .single-pinterest .fa {color:#B60000;}

Replace with this
Code: [Select]
/* LISTING SOCIAL SHARE */
.listing-share {float: left;width: 100%;text-align: center;margin: 25px 0 10px 0;position:relative;}
.listing-share span {color:#777;font-size:13px;top:13px;left:0px;position:absolute;font-family:"Open Sans",sans-serif;}
.listing-share .single {margin:0 3px;background:#fff;display: inline-block;}
.listing-share .single .fa {font-size:46px;float:left;cursor:pointer;opacity:0.8;width:42px;}
.listing-share .single:hover .fa {opacity:1;}
.listing-share .single-twitter .fa {color:#00ACB3;}
.listing-share .single-viber .fa {color:#8156a3;}
.listing-share .single-whatsapp .fa {color:#43d854;}
.listing-share .single-facebook .fa {color:#0067CB;}
.listing-share .single-google-plus .fa {color:#E23C00;}
.listing-share .single-pinterest .fa {color:#B60000;}

Also in in style.css, find
Code: [Select]
/* FOOTER SOCIAL SHARE BUTTONS */
#footer-share .fa {float:left;margin:-1px 4px 0 0;font-size:15px;}
#footer-share .facebook .fa {color:#0067CB;}
#footer-share .twitter .fa {color:#00ACB3;}
#footer-share .youtube .fa {color:#D73900;}
#footer-share .google-plus .fa {color:#E23C00;}
#footer-share .pinterest .fa {color:#CB2027;}
#footer-share .linkedin .fa {color:#6BBE65;}
#footer-share .instagram .fa {color:#E2AC00;}
#footer-share .rss .fa {color:#EFAC00;}
#footer-new #footer-share.some-block .text a {clear:none;}
#footer-new #footer-share.some-block .text a:before {display:none;content:"";}

Replace with this
Code: [Select]
/* FOOTER SOCIAL SHARE BUTTONS */
#footer-share .fa {float:left;margin:-1px 4px 0 0;font-size:15px;}
#footer-share .viber .fa {color:#8156a3;}
#footer-share .whatsapp .fa {color:#43d854;}
#footer-share .facebook .fa {color:#0067CB;}
#footer-share .twitter .fa {color:#00ACB3;}
#footer-share .youtube .fa {color:#D73900;}
#footer-share .google-plus .fa {color:#E23C00;}
#footer-share .pinterest .fa {color:#CB2027;}
#footer-share .linkedin .fa {color:#6BBE65;}
#footer-share .instagram .fa {color:#E2AC00;}
#footer-share .rss .fa {color:#EFAC00;}
#footer-new #footer-share.some-block .text a {clear:none;}
#footer-new #footer-share.some-block .text a:before {display:none;content:"";}

Now open responsive.css and add this
Code: [Select]
/* Whatsapp and Viber Share Button */
@media screen and (min-width:690px){
    .listing-share .single-whatsapp .fa {display:none;}
    .listing-share .single-viber .fa {display:none;}
    .whatsapp {display: none;}
    .viber {display: none;}
}

Hope this helps out
BabyDunk

I Am A Noob But I Am Here To Learn.
Please be patient ;) ;D

*

MB Themes

Re: [Suggestion] WhatsApp and Viber share buttons
« Reply #1 on: July 09, 2016, 11:18:58 PM »
@BabyDunks
Thank yo so much for your tips   ;)
  To get fast support, we need following details: Detail description, URL to reproduce problem, Screenshots

*

mixradu

  • ****
  • 171 posts
Re: [Suggestion] WhatsApp and Viber share buttons
« Reply #2 on: July 10, 2016, 03:15:18 AM »
credit to mixradu over at the Zara Theme for posting the whatsapp share button for items, but i have taken it a wee bit further.

if you want whatsapp and viber share buttons, copy and replace/add this.

open item.php and find this
Code: [Select]
         
          <div class="listing-share">
            <?php osc_reset_resources(); ?>
            <span><?php _e('Share''patricia'); ?></span>
            <a class="single single-facebook" title="<?php echo osc_esc_html(__('Share on Facebook''patricia')); ?>" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo osc_item_url(); ?>"><i class="fa fa-facebook-square"></i></a>
            <a class="single single-google-plus" title="<?php echo osc_esc_html(__('Share on Google Plus''patricia')); ?>" target="_blank" href="https://plus.google.com/share?url=<?php echo osc_item_url(); ?>"><i class="fa fa-google-plus-square"></i></a>
            <a class="single single-twitter" title="<?php echo osc_esc_html(__('Share on Twitter''patricia')); ?>" target="_blank" href="https://twitter.com/home?status=<?php echo osc_item_title(); ?>"><i class="fa fa-twitter-square"></i></a>
            <a class="single single-pinterest" title="<?php echo osc_esc_html(__('Share on Pinterest''patricia')); ?>" target="_blank" href="https://pinterest.com/pin/create/button/?url=<?php echo osc_item_url(); ?>&media=<?php echo osc_resource_url(); ?>&description=<?php echo htmlspecialchars(osc_item_title()); ?>"><i class="fa fa-pinterest-square"></i></a>
          </div>


Replace with this.
Code: [Select]
          <div class="listing-share">
            <?php osc_reset_resources(); ?>
            <span><?php _e('Share''patricia'); ?></span>
            <a class="single single-viber" href="viber://forward?text=<?php echo osc_item_url(); ?>"><i class="fa fa-phone-square"></i></a>
            <a class="single single-whatsapp" href="whatsapp://send?text=<?php echo osc_item_url(); ?>" data-action="share/whatsapp/share"><i class="fa fa-whatsapp"></i></a>
            <a class="single single-facebook" title="<?php echo osc_esc_html(__('Share on Facebook''patricia')); ?>" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo osc_item_url(); ?>"><i class="fa fa-facebook-square"></i></a>
            <a class="single single-google-plus" title="<?php echo osc_esc_html(__('Share on Google Plus''patricia')); ?>" target="_blank" href="https://plus.google.com/share?url=<?php echo osc_item_url(); ?>"><i class="fa fa-google-plus-square"></i></a>
            <a class="single single-twitter" title="<?php echo osc_esc_html(__('Share on Twitter''patricia')); ?>" target="_blank" href="https://twitter.com/home?status=<?php echo osc_item_title(); ?>"><i class="fa fa-twitter-square"></i></a>
            <a class="single single-pinterest" title="<?php echo osc_esc_html(__('Share on Pinterest''patricia')); ?>" target="_blank" href="https://pinterest.com/pin/create/button/?url=<?php echo osc_item_url(); ?>&media=<?php echo osc_resource_url(); ?>&description=<?php echo htmlspecialchars(osc_item_title()); ?>"><i class="fa fa-pinterest-square"></i></a>
          </div>

now open footer.php and find this
Code: [Select]
      <div id="footer-share" class="some-block right">
        <h4><?php _e('Share us''patricia'); ?></h4>
        <div class="text">
          <span class="facebook"><i class="fa fa-facebook-square"></i><a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo osc_base_url(); ?>" title="<?php echo osc_esc_html(__('Share us on Facebook''patricia')); ?>" target="_blank"><?php _e('Facebook''patricia'); ?></a></span>
          <span class="pinterest"><i class="fa fa-pinterest"></i><a href="https://pinterest.com/pin/create/button/?url=<?php echo osc_base_url(); ?>/oc-content/themes/patricia/images/logo.jpg&media=<?php echo osc_base_url(); ?>&description=" title="<?php echo osc_esc_html(__('Share us on Pinterest''patricia')); ?>" target="_blank"><?php _e('Pinterest''patricia'); ?></a></span>
          <span class="twitter"><i class="fa fa-twitter-square"></i><a href="https://twitter.com/home?status=<?php echo osc_base_url(); ?>%20-%20<?php _e('your''patricia'); ?>%20<?php _e('classifieds''patricia'); ?>" title="<?php echo osc_esc_html(__('Tweet us''patricia')); ?>" target="_blank"><?php _e('Twitter''patricia'); ?></a></span>
          <span class="google-plus"><i class="fa fa-google-plus-square"></i><a href="https://plus.google.com/share?url=<?php echo osc_base_url(); ?>" title="<?php echo osc_esc_html(__('Share us on Google+''patricia')); ?>" target="_blank"><?php _e('Google+''patricia'); ?></a></span>
          <span class="linkedin"><i class="fa fa-linkedin-square"></i><a href="https://www.linkedin.com/shareArticle?mini=true&url=<?php echo osc_base_url(); ?>&title=<?php echo osc_esc_html(__('My''patricia')); ?>%20<?php _e('classifieds''patricia'); ?>&summary=&source=" title="<?php echo osc_esc_html(__('Share us on LinkedIn''patricia')); ?>" target="_blank"><?php _e('LinkedIn''patricia'); ?></a></span>
        </div>
      </div>


Replace with this
Code: [Select]
      <div id="footer-share" class="some-block right">
        <h4><?php _e('Share us''patricia'); ?></h4>
        <div class="text">
          <span class="viber"><i class="fa fa-phone-square"></i><a href="viber://forward?text=<?php echo osc_base_url(); ?>"><?php _e('Viber''patricia'); ?></a></span>
          <span class="whatsapp"><i class="fa fa-whatsapp"></i><a href="whatsapp://send?text=<?php echo osc_base_url(); ?>" data-action="share/whatsapp/share"><?php _e('WhatsApp''patricia'); ?></a></span>
          <span class="facebook"><i class="fa fa-facebook-square"></i><a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo osc_base_url(); ?>" title="<?php echo osc_esc_html(__('Share us on Facebook''patricia')); ?>" target="_blank"><?php _e('Facebook''patricia'); ?></a></span>
          <span class="pinterest"><i class="fa fa-pinterest"></i><a href="https://pinterest.com/pin/create/button/?url=<?php echo osc_base_url(); ?>/oc-content/themes/patricia/images/logo.jpg&media=<?php echo osc_base_url(); ?>&description=" title="<?php echo osc_esc_html(__('Share us on Pinterest''patricia')); ?>" target="_blank"><?php _e('Pinterest''patricia'); ?></a></span>
          <span class="twitter"><i class="fa fa-twitter-square"></i><a href="https://twitter.com/home?status=<?php echo osc_base_url(); ?>%20-%20<?php _e('your''patricia'); ?>%20<?php _e('classifieds''patricia'); ?>" title="<?php echo osc_esc_html(__('Tweet us''patricia')); ?>" target="_blank"><?php _e('Twitter''patricia'); ?></a></span>
          <span class="google-plus"><i class="fa fa-google-plus-square"></i><a href="https://plus.google.com/share?url=<?php echo osc_base_url(); ?>" title="<?php echo osc_esc_html(__('Share us on Google+''patricia')); ?>" target="_blank"><?php _e('Google+''patricia'); ?></a></span>
          <span class="linkedin"><i class="fa fa-linkedin-square"></i><a href="https://www.linkedin.com/shareArticle?mini=true&url=<?php echo osc_base_url(); ?>&title=<?php echo osc_esc_html(__('My''patricia')); ?>%20<?php _e('classifieds''patricia'); ?>&summary=&source=" title="<?php echo osc_esc_html(__('Share us on LinkedIn''patricia')); ?>" target="_blank"><?php _e('LinkedIn''patricia'); ?></a></span>
        </div>
      </div>


Now for style , open style.css and find
Code: [Select]
/* LISTING SOCIAL SHARE */
.listing-share {float: left;width: 100%;text-align: center;margin: 25px 0 10px 0;position:relative;}
.listing-share span {color:#777;font-size:13px;top:13px;left:0px;position:absolute;font-family:"Open Sans",sans-serif;}
.listing-share .single {margin:0 3px;background:#fff;display: inline-block;}
.listing-share .single .fa {font-size:46px;float:left;cursor:pointer;opacity:0.8;width:42px;}
.listing-share .single:hover .fa {opacity:1;}
.listing-share .single-twitter .fa {color:#00ACB3;}
.listing-share .single-facebook .fa {color:#0067CB;}
.listing-share .single-google-plus .fa {color:#E23C00;}
.listing-share .single-pinterest .fa {color:#B60000;}

Replace with this
Code: [Select]
/* LISTING SOCIAL SHARE */
.listing-share {float: left;width: 100%;text-align: center;margin: 25px 0 10px 0;position:relative;}
.listing-share span {color:#777;font-size:13px;top:13px;left:0px;position:absolute;font-family:"Open Sans",sans-serif;}
.listing-share .single {margin:0 3px;background:#fff;display: inline-block;}
.listing-share .single .fa {font-size:46px;float:left;cursor:pointer;opacity:0.8;width:42px;}
.listing-share .single:hover .fa {opacity:1;}
.listing-share .single-twitter .fa {color:#00ACB3;}
.listing-share .single-viber .fa {color:#8156a3;}
.listing-share .single-whatsapp .fa {color:#43d854;}
.listing-share .single-facebook .fa {color:#0067CB;}
.listing-share .single-google-plus .fa {color:#E23C00;}
.listing-share .single-pinterest .fa {color:#B60000;}

Also in in style.css, find
Code: [Select]
/* FOOTER SOCIAL SHARE BUTTONS */
#footer-share .fa {float:left;margin:-1px 4px 0 0;font-size:15px;}
#footer-share .facebook .fa {color:#0067CB;}
#footer-share .twitter .fa {color:#00ACB3;}
#footer-share .youtube .fa {color:#D73900;}
#footer-share .google-plus .fa {color:#E23C00;}
#footer-share .pinterest .fa {color:#CB2027;}
#footer-share .linkedin .fa {color:#6BBE65;}
#footer-share .instagram .fa {color:#E2AC00;}
#footer-share .rss .fa {color:#EFAC00;}
#footer-new #footer-share.some-block .text a {clear:none;}
#footer-new #footer-share.some-block .text a:before {display:none;content:"";}

Replace with this
Code: [Select]
/* FOOTER SOCIAL SHARE BUTTONS */
#footer-share .fa {float:left;margin:-1px 4px 0 0;font-size:15px;}
#footer-share .viber .fa {color:#8156a3;}
#footer-share .whatsapp .fa {color:#43d854;}
#footer-share .facebook .fa {color:#0067CB;}
#footer-share .twitter .fa {color:#00ACB3;}
#footer-share .youtube .fa {color:#D73900;}
#footer-share .google-plus .fa {color:#E23C00;}
#footer-share .pinterest .fa {color:#CB2027;}
#footer-share .linkedin .fa {color:#6BBE65;}
#footer-share .instagram .fa {color:#E2AC00;}
#footer-share .rss .fa {color:#EFAC00;}
#footer-new #footer-share.some-block .text a {clear:none;}
#footer-new #footer-share.some-block .text a:before {display:none;content:"";}

Now open responsive.css and add this
Code: [Select]
/* Whatsapp and Viber Share Button */
@media screen and (min-width:690px){
    .listing-share .single-whatsapp .fa {display:none;}
    .listing-share .single-viber .fa {display:none;}
    .whatsapp {display: none;}
    .viber {display: none;}
}

Hope this helps out
BabyDunk


Very good tutorial ! And thanks for the credtis