"Adding the Whats app share button underneath your Blogger post: A step-by-step guide

Can you help me with adding a Whats App share button below my post?

Here is the CSS code on my website:

.tl-postShare{text-align:right;}
.tl-postShare ul{display:inline-block;}
.tl-postShare ul li{margin:0;}
.tl-tagnShare{position:relative;overflow:hidden;line-height:45px;margin-top:25px;}
.tl-postShare .tl-social-icons.icon-circle .fa{margin-right:7px}
.tl-postShare h6{display:inline-block;font-size:15px;margin:0 10px 0 0;line-height:35px;}

And this is the HTML structure:

 <div class='tl-postShare pull-right'>
  <h6>Share To:</h6>
  <ul class='tl-colored-social icon-flat list-unstyled list-inline'> 
    <!-- Facebook -->
    <li class='tl-fbk'>
     <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Share on Facebook'>
       <i class='fa fa-facebook'/>
     </a>
    </li>
    <!-- Twitter -->
    <li class='tl-twt'>
     <a expr:href='&quot;http://twitter.com/intent/tweet?text=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share on Twitter'>
       <i class='fa fa-twitter'/>
     </a>
    </li>

    <!-- WhatsApp -->
    
    <!-- Pinterest -->
    <li class='tl-pnt'>
     <a expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.title' rel='nofollow' target='_blank' title='share on Pinterest'>
       <i class='fa fa-pinterest'/>
     </a>
    </li>
  </ul>
</div>

I am looking to incorporate a WhatsApp share button along with these existing buttons.

Answer ā„–1

Utilize the latest API provided by WhatsApp to easily share pre-filled text with specific contacts. Simply visit .

You can also open a chat dialog for a particular WhatsApp user by visiting .

To share pre-filled text with a specific user, you can combine the above two methods by using this link:

Answer ā„–2

Explore the outcomes of visiting . I observe...

OOPS!

THIS PAGE IS NOWHERE TO BE FOUND

I suggest trying one of these formats:

https://api.whatsapp.com/send?text=YourShareTextHere
https://api.whatsapp.com/send?text=YourShareTextHere&phone=123

Here, you can choose to include a phone number or not, as typically, you'd want someone to share the content with someone they know, rather than someone you know, which would be pointless. Make sure to utilize the api.whatsapp.com domain instead of the wa.me domain for seamless operation!

If you're interested in exploring a project that keeps a record of these URLs, feel free to visit us!: https://github.com/bradvin/social-share-urls#whatsapp

https://i.sstatic.net/8rEut.jpg

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular allows for displaying objects within other objects using interpolation

Below is the object stored in EntryList variable within my component: { "id": 0, "startAddress": { "id": 6, "addressString": "addressString" }, "endAddress": { ...

Undefined error encountered in the Google Places library

I'm new to working with the Ionic framework and was experimenting with implementing an autocomplete search feature using the Google Maps API. After going through several resources, I included the following code: <script type="text/javascript" src ...

Searching for specific data within an embedded documents array in MongoDB using ID

While working with mongodb and nodejs to search for data within an embedded document, I encountered a strange issue. The query functions as expected in the database but not when implemented in the actual nodejs code. Below is the structure of my data obje ...

Getting around using Material-UI Icons

Is it possible to utilize a Material-UI Icon for navigation using React Router Dom? I attempted the following approach without success: <NavigateBeforeIcon path="/vehicles"></NavigateBeforeIcon> With buttons, I am able to use component={Link ...

Reorganize a list based on another list without generating a new list

Among the elements in my HTML list, there are items with text, input fields, and tables. I also have a specific order list like [3,1,2,0]. Is it feasible to rearrange the items in the HTML list on the page based on this order list without generating a new ...

I am having trouble getting my getColor() method to correctly change colors based on the data provided

When using a datatable, there are two columns: status and priority. The STATUS LIST includes OPEN or CLOSED, while the PRIORITY LIST includes HIGH, MODERATE, and LOW. So, if the status is open, it should be displayed in red color; if closed, then in green. ...

Mastering the art of leveraging generics within React applications

I am currently working on resolving issues in an outdated React application that does not utilize Typescript. In order to incorporate the Select2 component from the Blueprintjs library, I need to convert it to a non-generic reference. Using Typescript, t ...

show the text input within a span element, encountering issues with its width

My goal is to create an input text field that looks exactly like a span element. I want the user to be able to enter text without realizing they are typing in a field. I have made some progress, but the main issue now is with the width of the input field. ...

Is there a way to sort through objects in a JSON file using two shared values? Specifically, I'm looking to filter the JSON objects based on both common x and y values

Given a JSON file, I am looking to group objects based on common x and y values. Essentially, I want to group together objects that share the same x and y properties. Here is an example of the JSON data: let data = [{ "x": "0", "y& ...

Switch the background color of the body when hovering over a link

Is it possible to change the page background when hovering over a a using only CSS? I am searching for a solution that does not involve any JavaScript. I understand that we can access child elements with CSS, but I am unsure if it is possible to target th ...

Can you please explain how to separate a collection of emails that have various formats using JavaScript?

My list of emails contains two formats: with name name <<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="395c5458505579585d5d4b5c4a4a175a5654">[email protected]</a>> without name <a href="/cdn-cgi/l/email-prote ...

Validation check: Ensure that the value does not match any other field

Looking for a method to compare two fields and only validate them if they are not equal. This is the approach I've tried, but it's not working: yup .number() .required() .notOneOf( [FormField.houseHoldMembers as any], &ap ...

Creating a large JSON file (4 GB) using Node.js

I am facing a challenge with handling a large json object (generated using the espree JavaScript parser, containing an array of objects). I have been trying to write it to a .json file, but every attempt fails due to memory allocation issues (even though m ...

Accessing an object from a webpage using Selenium: A step-by-step guide

Today marks my debut using Selenium IDE, and I must admit that my knowledge of web development is limited. My team is currently working on a website, and as part of my task, I need to write tests for it. The website features several charts showcasing data ...

Navigation Icons Menu

I need to customize my navigation by adding a special area on the right side with just three icons: basket, search, and wishlist. Can anyone suggest the best approach to achieve this? I am currently using the Divi theme for my website. Furthermore, I atte ...

Using PHP code in CSS for the background styling

I'm having trouble with this line of CSS... background-image:url(upload/<?php echo $array['image']; ?>); It's not working properly, and all I see is a blank screen. The image exists in the database and on the server in the corre ...

Formatting strings with positive or negative numbers can be achieved using Utilities.formatString

Looking to enhance the visual representation of numeric string data by displaying it in different colors based on whether the number is positive or negative. Current code snippet: var url = 'https://docs.google.com/spreadsheets/d/xxxxxxxxxxxxxxxxxxxx ...

Utilizing the Jquery Number Spinner for Updating Quantities in the Database

Iā€™m just starting to learn JQuery/JavaScript/Ajax, as well as Symfony2 & PHP. Currently, I am working on a basic Shopping Cart project where I want users to be able to adjust the quantity of a product they have added to their cart using the JQuery Spinn ...

Using jQuery with multiple selectors can become tricky when dealing with elements that may or may not be present

I decided to be more efficient by using multiple selectors instead of rewriting the same code repeatedly. Typically, if one element exists then the others do not. $('form#post, form#edit, form#quickpostform').submit( function() { ...

Toggle visibility of an element when clicked

I have recently started learning about jquery. In my code, I have two p tags with classes .angle_up and .angle_down respectively. The angle_up class initially has the active class assigned to it. When a user clicks on .angle_down, I want to remove the .ac ...