Click here to Skip to main content
15,868,016 members
Home / Discussions / Web Development
   

Web Development

 
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 
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 
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">
		<a href="https://www.facebook.com/sharer.php?u=https://www.superspreads.co.uk/" 
		target="_blank" title = "Share this page on Facebook or in Messenger" >
												
			<div class = "fb-share-box-text">
				Share
			</div>						
		</a>
	</div>
</div>


And the styles for it were as follows:

.fb{
	height:21px;
	width:78px;
	float:left;
	margin-right:8px;
	border:0px solid red;
	border-radius: .25em;
	background-color:#8b7462	
}
.fb-share-box-image a{
	display:inline;
	float:left;
	background-image: url(facebook-and-messenger-share_match_anchor_5.png);
	background-repeat:no-repeat;
	height:19px;
	width:73px;
	padding-top:3px;
	padding-left:5px;
	font-size:70%;
	font-weight:bold;
	border:0px solid red;
	color:#d9c8ba;	
}
.fb-share-box-image a:hover{
	display:inline;
	float:left;
	background-image: url(facebook-and-messenger-share_match_hover_3.png);
	background-repeat:no-repeat;
	height:19px;
	width:73px;
	padding-top:3px;
	padding-left:5px;
	border:0px solid red;
	font-size:70%;
	font-weight:bold;
	color:#e6e0e0;	
}
.fb-share-box-text{
	display:inline;
	float:right;
	height:19px;
	margin-top:1px;
	width:38px;
	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
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 
QuestionCenter text vertically inside a div Pin
_Flaviu15-Mar-23 23:01
_Flaviu15-Mar-23 23:01 
AnswerRe: Center text vertically inside a div Pin
_Flaviu16-Mar-23 3:40
_Flaviu16-Mar-23 3:40 

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.