*

mixradu

  • ****
  • 171 posts
[TUTORIAL] Add whatsapp share button
« on: April 03, 2016, 08:58:27 PM »
Hello! Here is my first tutorial

1- Open oc-content/themes/zara/item.php
2- Go to line 659(aprox) and find
Code: [Select]
<!-- SOCIAL SHARING -->
        <div class="listing-share">
          <?php osc_reset_resources(); ?>
3- Under
Code: [Select]
<?php osc_reset_resources(); ?> add
Code: [Select]
<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>
The code must look like this
Quote
<!-- SOCIAL SHARING -->
        <div class="listing-share">
          <?php osc_reset_resources(); ?>
        <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', 'zara')); ?>" 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', 'zara')); ?>" 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', 'zara')); ?>" 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', 'zara')); ?>" 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>


4- Now open oc-content/themes/zara/css/style.css
5- Find
Code: [Select]
.listing-share .single-pinterest .fa {color:#B60000;} and bellow add
Code: [Select]
.listing-share .fa-whatsapp{color:#43d854}

Final result : https://www.lannonce.eu/immobilier/maisons-a-louer/maisons-a-louer-dans-charleroi_i162

*

Ghany

  • ****
  • 227 posts
Re: [TUTORIAL] Add whatsapp share button
« Reply #1 on: April 03, 2016, 09:56:45 PM »
@mixradu
u done good work, Thanks for sharing your work with us, thanks a lot Friend.............
Unlock the power of visibility without breaking the bank - https://www.adycart.in/

*

slicer

  • ****
  • 204 posts
Re: [TUTORIAL] Add whatsapp share button
« Reply #2 on: April 03, 2016, 10:35:35 PM »
Hello! Here is my first tutorial

1- Open oc-content/themes/zara/item.php
2- Go to line 659(aprox) and find
Code: [Select]
<!-- SOCIAL SHARING -->
        <div class="listing-share">
          <?php osc_reset_resources(); ?>
3- Under
Code: [Select]
<?php osc_reset_resources(); ?> add
Code: [Select]
<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>
The code must look like this
Quote
<!-- SOCIAL SHARING -->
        <div class="listing-share">
          <?php osc_reset_resources(); ?>
        <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', 'zara')); ?>" 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', 'zara')); ?>" 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', 'zara')); ?>" 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', 'zara')); ?>" 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>


4- Now open oc-content/themes/zara/css/style.css
5- Find
Code: [Select]
.listing-share .single-pinterest .fa {color:#B60000;} and bellow add
Code: [Select]
.listing-share .fa-whatsapp{color:#43d854}

Final result : https://www.lannonce.eu/immobilier/maisons-a-louer/maisons-a-louer-dans-charleroi_i162


Awesome I just did it, I tested using whatsapp and its working like a charm! thumbs up

*

mixradu

  • ****
  • 171 posts
Re: [TUTORIAL] Add whatsapp share button
« Reply #3 on: April 03, 2016, 10:36:56 PM »
Awesome I just did it, I tested using whatsapp and its working like a charm! thumbs up

Thank you ! :D Share you website!

*

MB Themes

Re: [TUTORIAL] Add whatsapp share button
« Reply #4 on: April 04, 2016, 07:38:45 AM »
@mixradu
Very nice, your tutorial is done correctly ;)
  To get fast support, we need following details: Detail description, URL to reproduce problem, Screenshots

*

mixradu

  • ****
  • 171 posts
Re: [TUTORIAL] Add whatsapp share button
« Reply #5 on: April 04, 2016, 01:13:57 PM »
@mixradu
Very nice, your tutorial is done correctly ;)

Thank you !:D

*

oluwatohbee

  • ***
  • 54 posts
Re: [TUTORIAL] Add whatsapp share button
« Reply #6 on: April 16, 2016, 12:46:04 AM »
Is there a way that they can be a pop-up message "This button will work only in mobile device."); when the whatapps share button is clicked on PC version of a website
   

*

MB Themes

Re: [TUTORIAL] Add whatsapp share button
« Reply #7 on: April 19, 2016, 04:13:54 PM »
@oluwatohbee
There is no reason for that, you should hide such button for desktop device.
  To get fast support, we need following details: Detail description, URL to reproduce problem, Screenshots

*

BabyDunk

  • ****
  • 161 posts
Re: [TUTORIAL] Add whatsapp share button
« Reply #8 on: July 09, 2016, 05:18:33 AM »
@mixradu

Cheers and thank you worked a treat ;)
I Am A Noob But I Am Here To Learn.
Please be patient ;) ;D

*

mixradu

  • ****
  • 171 posts
Re: [TUTORIAL] Add whatsapp share button
« Reply #9 on: July 10, 2016, 03:13:57 AM »
@mixradu

Cheers and thank you worked a treat ;)

You are welcome ! :D

*

crymatisticos

  • ***
  • 57 posts
Re: [TUTORIAL] Add whatsapp share button
« Reply #10 on: July 19, 2016, 09:29:49 PM »
thumbs up very good share you've made here

I've visited your website and I liked the select category and select location look that you've done

If possible could you share with us how you done this

Thanks in advance

*

fosg2000

  • **
  • 5 posts
Re: [TUTORIAL] Add whatsapp share button
« Reply #11 on: February 14, 2020, 02:36:42 AM »
not working for me : (i mean its there but when you click nothing happens>? )

www.toyenmala.com


and i also combine with this one  :

https://forums.osclasspoint.com/patricia-osclass-responsive-theme/(suggestion)-whatsapp-and-viber-share-buttons/msg3570/#msg3570


any clues ?