facebook and twitter share button plugins not working properly
-
I am attempting to add facebook and twitter share button plugins to the pages of a website I am working on. So far I have only added them to three pages because I am having mixed results with functionality on both my local copy of the site and the live version. In order to generate the code for the facebook share button on each page, I followed the instructions here - https://developers.facebook.com/docs/plugins/share-button. In order to generate the code for the Twitter share button, I followed the instructions here https://publish.twitter.com/# For both the facebook and twitter share buttons I generated the code using the urls of the live site and pasted that code in both the relevant live and local pages. The code generated and embedded in the divs "shares" and "share-box" is as follows:
[Share](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fsuperspreads.co.uk%2Fsuperspreads-area-I-cover--plasterer-dewsbury-west-yorkshire.html&src=sdkpreparse) [Tweet](https://twitter.com/share?ref_src=twsrc%5Etfw)Opera is the only browser that tolerates the plugins on both a local copy of the site and the live version In firefox, the local copy of the site tolerates both the plugins and they work as intended. That is clicking the "share" or "tweet" buttons activates the relevant plugin and provides the opportunity to share the chosen url on facebook and twitter respectively. The information in the page specific open grapgh tags and twitter meta tags are collected also. As you hover over the facebook button, prior to clicking, the code that
-
I am attempting to add facebook and twitter share button plugins to the pages of a website I am working on. So far I have only added them to three pages because I am having mixed results with functionality on both my local copy of the site and the live version. In order to generate the code for the facebook share button on each page, I followed the instructions here - https://developers.facebook.com/docs/plugins/share-button. In order to generate the code for the Twitter share button, I followed the instructions here https://publish.twitter.com/# For both the facebook and twitter share buttons I generated the code using the urls of the live site and pasted that code in both the relevant live and local pages. The code generated and embedded in the divs "shares" and "share-box" is as follows:
[Share](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fsuperspreads.co.uk%2Fsuperspreads-area-I-cover--plasterer-dewsbury-west-yorkshire.html&src=sdkpreparse) [Tweet](https://twitter.com/share?ref_src=twsrc%5Etfw)Opera is the only browser that tolerates the plugins on both a local copy of the site and the live version In firefox, the local copy of the site tolerates both the plugins and they work as intended. That is clicking the "share" or "tweet" buttons activates the relevant plugin and provides the opportunity to share the chosen url on facebook and twitter respectively. The information in the page specific open grapgh tags and twitter meta tags are collected also. As you hover over the facebook button, prior to clicking, the code that
UPDATE: I have discovered that all the functionality failings mentioned in my original post are only relevant to when you are on a desktop device! I'm unsure about tablets aswell becasue I don't have one to test with... However, I downloaded all the browsers to my mobile and the share buttons worked on all of them. Plus the information they retrieved from each page for sharing purposes was accurate also. I am still stumped, and cross actually, that there should be an issue with the functionality on desktop appliances. Although 98%+ of social media browsing is carried out on phones and tablets in 2023 overall just under 50% of other browsing is still carried out on desktops (https://www.broadbandsearch.net/blog/mobile-desktop-internet-usage-statistics). Plus with all the efforts web designers/developers have to go to to make their sites work on all platforms, why are big tech providing code resources that are throwing up these problems? I still want to keep this post open because the issue is not solved on desktops. And I'm about to design a site that sells images. I doubt many people will part with substantial sums by what they see of these images on a mobile device... And they are hardly going to be encouraged by seeing/experiencing broken social links on all the pages they care to view on their desktop. If anyone can share with me how they incorporated their share buttons across all devices successfully, I'd really appreciate it.
-
I am attempting to add facebook and twitter share button plugins to the pages of a website I am working on. So far I have only added them to three pages because I am having mixed results with functionality on both my local copy of the site and the live version. In order to generate the code for the facebook share button on each page, I followed the instructions here - https://developers.facebook.com/docs/plugins/share-button. In order to generate the code for the Twitter share button, I followed the instructions here https://publish.twitter.com/# For both the facebook and twitter share buttons I generated the code using the urls of the live site and pasted that code in both the relevant live and local pages. The code generated and embedded in the divs "shares" and "share-box" is as follows:
[Share](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fsuperspreads.co.uk%2Fsuperspreads-area-I-cover--plasterer-dewsbury-west-yorkshire.html&src=sdkpreparse) [Tweet](https://twitter.com/share?ref_src=twsrc%5Etfw)Opera is the only browser that tolerates the plugins on both a local copy of the site and the live version In firefox, the local copy of the site tolerates both the plugins and they work as intended. That is clicking the "share" or "tweet" buttons activates the relevant plugin and provides the opportunity to share the chosen url on facebook and twitter respectively. The information in the page specific open grapgh tags and twitter meta tags are collected also. As you hover over the facebook button, prior to clicking, the code that
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:
[](https://www.facebook.com/sharer.php?u=[the url of the page you want to share goes here])
For a twitter share:
[](https://twitter.com/share?url=[the url of the page you want to share goes here])
For an email share:
[](mailto:?[the url of the page you want to share in the email goes here])
To share via whatsapp
[](https://wa.me/?[the url of the page you want to share in the whatsapp message goes here])
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