|UPDATE-2 > PROBLEM SOLVED > 27.04.2023
As I pointed out in my first post of this thread, I assumed the best way to achieve adding facebook and twitter share buttons to a site I work on would be to utilise the code generation tools I found on official sources for both facebook and twitter.
I was stumped by the poor results of the plugins, produced by these facebook and twitter resources, when using a multitude of browsers on a desktop computer (chrome, firefox, edge, safari and opera).
When using the internet, on a desktop computer, to do doing something non code related I stumbled upon a webpage that had functioning social media share buttons. I viewed the source code and adapted what I found for the site I work on - including styling these buttons in a fashion that suited the sites colour scheme. My adaptations worked for both facebook and twitter. This webpage also had code for sharing the page via email. So I adapted that too. Soon after this I found a simple way of incorporating a share button for whatsapp too.
The bare-bones code to add these four share buttons, so that they work across all platforms, is as follows:
For a facebook share:
<a href="https://www.facebook.com/sharer.php?u=[the url of the page you want to share goes here]"></a>
For a twitter share:
<a href="https://twitter.com/share?url=[the url of the page you want to share goes here]"></a>
For an email share:
<a href="mailto:?[the url of the page you want to share in the email goes here]"></a>
To share via whatsapp
<a href="https://wa.me/?[the url of the page you want to share in the whatsapp message goes here]"></a>
The site I found left the anchor tag textless and just styled it with an icon for each share.
In my case I chose to add the text "Share", "Tweet", "Email" and "WhatsApp" to the anchors just so it will be a bit more informative to the person browsing what the button does. It seems there are many webpages out there that have both share and follow social media anchor tags on their pages - but no instructions to the person browsing which anchors do which! In recent discussions about this I've found that this leaves tentative users (usually over 45 years of age) to ignore them out of fear. And leaves confident users to leave them alone because they don't have time to go through the irritation of not knowing wheather the anchor in question will take them to the social site in question or wheather it will give them the opportunity to share the page they are on. I concluded each scenario is a potentially wasted opportunity so designed the share buttons to be more instructive.
In the interests of being instructive (particularly for the tentative user) I also designed the anchor tags to behave like anchor tags. That is they behave differntly in the hover state than the resting state.
Furthermore, because I incorporated image-based icons in the anchor tags I was legitamately able to use the title property, which in best practice is reserved for images, within the anchor tag. This way fool proof instructions about the intention behind connecting with the ahcor could be relayed.
Finally, in order to do what I could to keep the person engaged with the site I added the 'target="_blank"' property to the anchors. So the code might not generate pop up behaviour, but atleast engaging in the share would lead to a new window being opened rather than being taken away from the site completely.
By the time I'd incorporated all this instruction via code, the facebook share button code, for the index page of the site I work on, looked like this:
<div class = "fb" >
<div class = "fb-share-box-image">
target="_blank" title = "Share this page on Facebook or in Messenger" >
<div class = "fb-share-box-text">
And the styles for it were as follows:
border:0px solid red;
border:0px solid red;
border:0px solid red;
border:0px solid blue;
As you look at the live share button here www.superspreads.co.uk
The "fb" class formed the perimeter of the whole brown shaped button.
The "fb-share-box-image" class is what adjusted the look of the anchor image and text according to resting and hover states.
The "fb-share-box-text" class confirmed the position of the anchor text within the image.
You will notice each of the classes contain 0px solid borders. Switching these to 1px solid was very useful when it came to seeing how everything was fitting together.
If you view the html source code of the index page you will notice that as well as parsing the url for the page to be shared, additional text is being parsed also. In the case of:
1...The Twitter share... This is to accomodate the twitter card generated by sharing the page. The card itself is determined by the information contained in the twitter meta tags situated in the header section of the page.
2...The Email share.... This addtional text is added so that the subject and body fields of the email are pre-populated. This is just a suggestion and can be altered by the user but a tentative user may find this pre-population useful.
3...The WhatsApp share.... This addtional text is added so that the message content is pre-populated. Again this is just a suggestion and can be altered by the user but a tentative user may find this pre-population useful.
4...The Facebook share.... No additional text is required because the facebook meta tags (situated in the header section of the page) contain all the detail to be parsed.
The text to be parsed on each of the web sites pages twitter share was individually typed to match the meta data contained in the pages twitter:title tag.
I hope this thread is now of use to budding social media coders