Click here to Skip to main content
15,920,632 members
Home / Discussions / Web Development
   

Web Development

 
AnswerRe: How to add horizontal line under DIV Pin
Richard MacCutchan24-Mar-23 22:37
mveRichard MacCutchan24-Mar-23 22:37 
GeneralRe: How to add horizontal line under DIV Pin
Gerry Schmitz29-Mar-23 5:53
mveGerry Schmitz29-Mar-23 5:53 
AnswerRe: How to add horizontal line under DIV Pin
Jeremy Falcon27-Mar-23 4:46
professionalJeremy Falcon27-Mar-23 4:46 
GeneralRe: How to add horizontal line under DIV Pin
vefaakin6-Feb-24 22:27
vefaakin6-Feb-24 22:27 
GeneralRe: How to add horizontal line under DIV Pin
Richard Deeming6-Feb-24 22:40
mveRichard Deeming6-Feb-24 22:40 
GeneralRe: How to add horizontal line under DIV Pin
Jeremy Falcon7-Feb-24 5:56
professionalJeremy Falcon7-Feb-24 5:56 
AnswerRe: How to add horizontal line under DIV Pin
Jeremy Falcon27-Mar-23 4:47
professionalJeremy Falcon27-Mar-23 4:47 
Questionfacebook and twitter share button plugins not working properly Pin
Member 1595298024-Mar-23 2:13
Member 1595298024-Mar-23 2:13 
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:

HTML
<pre><!-- FACEBOOK SHARE - JavaScript SDK -->
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v16.0" nonce="bZ0Vs3J7"></script>

			<div id = "shares">
				
				<!-- FACEBOOK SHARE PLUGIN CODE-->
				<div class = "share-box">
				<div class="fb-share-button" 
					data-href="https://superspreads.co.uk/superspreads-area-I-cover--plasterer-dewsbury-west-yorkshire.html" 
					data-layout="button" 
					data-size="small">
					
					<a target="_blank" href="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" class="fb-xfbml-parse-ignore">Share</a>   
				</div>
				</div>
				
				<!-- TWITTER SHARE PLUGIN CODE-->				
				<div class = "share-box ">
				<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" 	
					class="twitter-share-button" 
					data-show-count="false">Tweet</a>
					
				<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
				</div>

			</div>


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 will be parsed is:
https://www.facebook.com/sharer/sharer.php?kid_directed_site=0&sdk=joey&u=https://superspreads.co.uk/superspreads-area-I-cover--plasterer-dewsbury-west-yorkshire.html&display+popup&ref=plugin&src=share_button

As you hover over the twitter button, prior to clicking, the code that will be parsed is:
https://twitter.com/intent/tweet?ref_src=twsrc^tfw|twcamp^buttonembed|twterm^share|twgr^&text=Areas I cover| Plasterer | Super Spreads - Dewsbury - West Yorkshire&url=https://superspreads.co.uk/superspreads-area-I-cover--plasterer-dewsbury-west-yorkshire.html


With the live site, firefox shows the anchor text for each button, "Share" and "Tweet", when the page is first loaded, but not the graphics for each button. When the page is refreashed "Share" dissappears. "Tweet" remains and the link works to a point but not all the intended code is parsed. The plugin is reduced to providing you a means to tweet something but not share the intended url. Hence as you hover over the twitter anchor text, in this instance, the code that will be parsed is:
https://twitter.com/share?ref_src=twsrc^tfw

chrome and edge behave the same for both the local and live versions of the site: The facebook button functions and displays as intended. The twitter button only displays the link text, "Tweet", and as with the live firefox twitter link, not all the intended code is parsed.


safari struggles to fully load the pages of the local version of the site that have the facebook and twitter plugins code active on them. And won't go beyond the SERP when you click on the live site link there.


Because the plugin code comes from the recommended sources, and has been pasted into the sites html as instructed, I really am at a loss as to how to tackle the problem. Has anyone encountered this before and solved the issue?

I wondered if it might be something to do with my host provider but then the problems are not limited to the live site....

Thanks, in anticipation of your response.
AnswerRe: facebook and twitter share button plugins not working properly Pin
Member 1595298027-Apr-23 5:32
Member 1595298027-Apr-23 5:32 
AnswerRe: facebook and twitter share button plugins not working properly Pin
Member 1595298027-Apr-23 6:01
Member 1595298027-Apr-23 6:01 
QuestionI need ready-made web page codes in html and css / احتاج الى اكواد صفحه ويب جاهزة بلغة htmlو css Pin
Hussein Bajeham22-Mar-23 22:16
Hussein Bajeham22-Mar-23 22:16 
AnswerRe: I need ready-made web page codes in html and css / احتاج الى اكواد صفحه ويب جاهزة بلغة htmlو css Pin
OriginalGriff22-Mar-23 22:18
mveOriginalGriff22-Mar-23 22:18 
QuestionThree divs inside a div Pin
_Flaviu21-Mar-23 5:50
_Flaviu21-Mar-23 5:50 
AnswerRe: Three divs inside a div Pin
Jeremy Falcon21-Mar-23 11:39
professionalJeremy Falcon21-Mar-23 11:39 
GeneralRe: Three divs inside a div Pin
_Flaviu22-Mar-23 1:23
_Flaviu22-Mar-23 1:23 
GeneralRe: Three divs inside a div Pin
Jeremy Falcon22-Mar-23 5:02
professionalJeremy Falcon22-Mar-23 5:02 
GeneralRe: Three divs inside a div Pin
_Flaviu26-Mar-23 23:23
_Flaviu26-Mar-23 23:23 
GeneralRe: Three divs inside a div Pin
Jeremy Falcon27-Mar-23 4:32
professionalJeremy Falcon27-Mar-23 4:32 
AnswerRe: Three divs inside a div Pin
Jeremy Falcon21-Mar-23 11:40
professionalJeremy Falcon21-Mar-23 11:40 
QuestionWombat and Muppet know nothing about web push notifications... Pin
WhoPinchedMyName19-Mar-23 9:29
WhoPinchedMyName19-Mar-23 9:29 
AnswerRe: Wombat and Muppet know nothing about web push notifications... Pin
jschell21-Mar-23 5:58
jschell21-Mar-23 5:58 
GeneralRe: Wombat and Muppet know nothing about web push notifications... Pin
WhoPinchedMyName21-Mar-23 7:09
WhoPinchedMyName21-Mar-23 7:09 
GeneralRe: Wombat and Muppet know nothing about web push notifications... Pin
jschell23-Mar-23 5:47
jschell23-Mar-23 5:47 
GeneralRe: Wombat and Muppet know nothing about web push notifications... Pin
WhoPinchedMyName23-Mar-23 6:11
WhoPinchedMyName23-Mar-23 6:11 
GeneralRe: Wombat and Muppet know nothing about web push notifications... Pin
jschell24-Mar-23 12:05
jschell24-Mar-23 12:05 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.