|
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
|
|
|
|
|
احتاج الى اكواد صفحه ويب جاهزة بلغة htmlو css
Google translate: I need ready-made web page codes in html and css
|
|
|
|
|
Two things;
1) This is an English language site, and we can only accept and answer questions in that language.
I have run this through Google Translate to produce a probably-good version, but you should check it and make sure it does say what you are actually asking.
2) While we are more than willing to help those that are stuck, that doesn't mean that we are here to do it all for you! We can't do all the work, you are either getting paid for this, or it's part of your grades and it wouldn't be at all fair for us to do it all for you.
So we need you to do the work, and we will help you when you get stuck. That doesn't mean we will give you a step by step solution you can hand in!
Start by explaining where you are at the moment, and what the next step in the process is. Then tell us what you have tried to get that next step working, and what happened when you did.
If you are having problems getting started at all, then this may help: How to Write Code to Solve a Problem, A Beginner's Guide[^]
"I have no idea what I did, but I'm taking full credit for it." - ThisOldTony
"Common sense is so rare these days, it should be classified as a super power" - Random T-shirt
AntiTwitter: @DalekDave is now a follower!
|
|
|
|
|
I am struggle (I know alost nothing about html) to insert three div's inside a div, something like this: Untitled hosted at ImgBB — ImgBB[^]
I have succeeeded to put only the fist div (that one with date), but the next ones (image + texts) I cannot (yet). How can I add the next two (image + mult line texts) ?
Here is y trial (didn't work correctly):
<div style="width:100%;height:100px;border: 1px dashed #4b2869;clear:left;">
<div style="width:100px;height:100%;border: 2px dashed #4f2869;display:flex;text-align: center;align-items:center;">
Tuesday
2023-03-15
</div>
<div style="display:flex;">
<img src="www.test.com/img/etc.png"/>
</div>
<div style="display:flex;">
text text text text text text text text text text text text</br>
text text text text text text</br>
text text
</div>
</div>
Can you guide me to solve this task ?
|
|
|
|
|
There are a couple of ways to do this, but let's go with the flexbox method since that's something worth mastering anyway.
<html>
<head>
<style>
section {
background: cyan;
border: 2px dashed blue;
display: flex;
height: 100px;
}
section img {
width: 50px;
height: 50px;
}
section > * {
background: yellow;
border: 2px dashed orange;
padding: 1rem;
}
section > *:last-child {
flex-grow: 1;
}
</style>
</head>
<body>
<section>
<div>
Tuesday
2023-03-15
</div>
<div>
<img src="//www.test.com/img/etc.png"/>
</div>
<div>
text text text text text text text text text text text text
text text text text text text
text text
</div>
</section>
</body>
</html>
By default, flexbox will do what you're looking for except for one thing. If you want the last div to take up the remaining space, then you'll need to use the last-child selector to specify that.
Jeremy Falcon
|
|
|
|
|
Thank you a lot Jeremy. It works for this test, however, I don't think I would go with this solution, because the rest of my html pages are not made it with you approach, and I guess will be difficult to control that pattern several times:
<div style="width:100%;height:100px;border: 1px dashed #4b2869;clear:left;">
<div style="width:80px;height:100%;border: 2px dashed #4f2869;display:flex;text-align: center;align-items:center;">
Tuesday
2023-03-15
</div>
<div style="width:100px;float:right;">
<img src="MyImage.png"/>
</div>
<div style="float:right">
text text text text text text text text text</br>
text text text text</br>
text text text text text text text
</div>
</div>
You see, the text from the first box should be ceneterd aligned, as long the last box (the right one) should have left - top text centered.
|
|
|
|
|
_Flaviu wrote: You see, the text from the first box should be ceneterd aligned, as long the last box (the right one) should have left - top text centered.
The right box does have text aligned that way. It's the default. Check it out.
As far as the first box, look into the first-child selector. It can be used in much the same way as the last-child one used in the example.
Jeremy Falcon
|
|
|
|
|
Yes, its working now, thank you a lot !!
|
|
|
|
|
You're very welcome.
Jeremy Falcon
|
|
|
|
|
Also, it's worth nothing that you only need to set display: flex on the outer container, not for every item.
Jeremy Falcon
|
|
|
|
|
Muppet has asked Wombat something about web push notifications - a topic they both know next to nothing about.
Q: who knows even less than who?
Wombat
you cannot push something to a 'normal' user .. their modem/router firewall will block it. So it is a sort of fiddle... one way or another you have to get the user to install some sort of program. I gather browsers are maybe going to add some sort of such facility...
Muppet
This is precisely what you can do now... look up "Web push notifications" - it's all the rage.
You have to get permission from the user (browser), but that's all.
Wombat
well if the browser has now got that option...
yes... it looks like a push to the user... but actually the pushed messages are stored 'somewhere' and your browser pulls them
Muppet
No... there is a push...
Wombat
yes from your end you just push ... but the browser has to actively retrieve them
you cannot push a message into a user's PC .. well not unless they set their firewall to always accept unexpected messages
Muppet
Your browser is not constantly polling the server in case there's a message for it... the server tells (pushes to) your browser it has a message for it
Wombat
no it cannot! it simply won't get past the router .. unless something is telling the router it wants it
the messages will just sit there waiting if the user's browser is offline
Muppet
of course it can get past the router - all routers are open to web traffic
Wombat
because your browser has sent out a message .. and the router will accept a response from whoever the message went to.. within a time limit
Muppet
and these ntofiicatsion work by your broswer telling the server it will accept pushes from it - this is why you have to subscribe to them
Wombat
yes.. but the brower still has to ask for them! .. if you just fire a message at a router... how does it know which of many computers using it should get that message
Muppet
it knows by which browsers are signed up to accept them
Wombat
no.. the router has no idea what program is using it
Muppet
so how does the browser know when to ask for a message then?
Wombat
becasue when you tell it to allow notifications - from a specific source ... it remembers that and asks occasionally.. i think the default timeout for the router is about 15 seconds.
Muppet
no - I am 100% sure that isn't how it works
Wombat
it will be interesting to time how promptly the notification appears
Muppet
anyone can simply poll a server on a timer
Wombat
a server.. yes!
Muppet
you don't need any fancy new protocls for that
i mean any browser can poll a server using a simple javascript timer
Wombat
but servers have to set their firewall to always pass messages by Port number to specific PCs
but you cannot poll me, or my router
Muppet
You read up on these a bit more and then come and tell me I'm wrong!
Wombat
actually there is a protocol to poll my router ... but they are no longer used because bad guys cause too much trouble.. so no router now will respond to a ping
Muppet
dinner time...
Wombat
but i'd bet you a rhubarb pudding i am right
|
|
|
|
|
WhoPinchedMyName wrote: Q: who knows even less than who?
They have a term definition problem. And both failed to recognize that.
Definition of a TCP Push.
1. There are two actors: server and client. These do NOT define implementation but rather how each behaves.
2. A 'server' is waiting for a connection.
3. A 'client' opens a TCP connection. This is exact step defines the push. The one that opens it is the only one that can be defined as doing the push.
4. The 'client' sends a message to the 'server'.
What if the 'server' sends a message to the 'client'. Doesn't matter. It can't do that until the 'client' opens the connection.
A browser, in general, uses HTTP which is built on TCP. So HTTP in any discussion is irrelevant.
A browser, as used by the vast majority of the public, does not have a public IP.
A browser, the common ones do not act as server because of that (at least for this discussion.) It would be pointless because without a public IP nothing on the 'internet' could do step #3 in the above list.
------------------------------------------------
Web designers use API/libraries which use terminology that uses the term 'push' which has nothing to do with the above.
That sort of push does require that the browser acts as a client (see list above).
Terminology does not change that the 'client' (browser) must first open the connection.
An easy example of this is when a user asks for a report that takes a long time to run. They might sit there refreshing the page waiting seconds, minutes or hours for it to show up. Or the web designer might make the page refresh on its own. Thus at some point the user knows that the report is ready.
But if the browser is closed there is no way for the report service to 'push' a notification that the report is done to the browser.
|
|
|
|
|
OK... but isn't that more or less what Wombat is saying? The only one that can open a connection is the user's browser - they are the client - and the server can only "push" a notification to them once they (the client) have opened a conection.
What's puzzling Muppet then is, if this is the case, how it is called a "push" - it's just a case of the client polling the server until the server says "OK, now I have new message for you" and returning it - that's not really any different from a client pull, and can be done with a standard JavaScript setInteraval function and AJAX call... (and when a user subscribes, set a persistent cookie that tells the page to initiates this every time it is opened).
|
|
|
|
|
WhoPinchedMyName wrote: OK... but isn't that more or less what Wombat is saying? The only one that can open a connection is the user's browser - they are the client - and the server can only "push" a notification to them once they (the client) have opened a conection.
That does not contradict what I said.
That is a redefinition of what the term traditionally means. So they must define the term before they can agree on what is happening.
WhoPinchedMyName wrote: it's just a case of the client polling the server until the server says "OK
I wasn't going to read all of that but once a connection is established either side can send a request. So it is not necessary for the 'client' (my definition) to poll. However perhaps using their definition, not mine, they are redefining the term completely to suggest that the client (browser) poll is resulting in a push. That however is quite a stretch it terms not only of the original definition but even in what the meaning of 'push' is in the English language.
|
|
|
|
|
I don't undersatand your definition of client and server. In web terms, a client is traditionally thought of as the end-user (or their browser), and a server is what sends them pages/data/whatever upon request.
A server can only know if a client is still connected if it receives something from the client. So a so-called "push notification" (from ther server to client) can only happen if the server has had such a "something" establishing (or keeping alive) a connection - that "something" telling it where to push the notification to.
SO how does this differ from the client using a simple AJAX call on a setTimeout to ask the server if it has anything new it wants to say? As far as I can make out, the only difference is that it can run as some kind of background service - well, whooppee, I can do without that. Seems a whole lot of effort for little benefit, though I guess someone likes it. It certiany seems to be popular (amongst web devs anyway; not so sure about end users.)
|
|
|
|
|
WhoPinchedMyName wrote: I don't undersatand your definition of client and server
My first response defined those specifically.
2. A 'server' is waiting for a connection.
3. A 'client' opens a TCP connection. This is exact step defines the push. The one that opens it is the only one that can be defined as doing the push.
Too much detail for this but TCP is a protocol that defines communication and establishing the connection in the first place requires a 'client' and a 'server'. Using specifically and only the definitions above.
Do not confuse those with what you might think of when using a browser and what it connects to (certainly related and it does use the protocol but it definitely uses layers on top of those.)
WhoPinchedMyName wrote: a client is traditionally thought of as the end-user (or their browser), and a server is what sends them pages/data/whatever upon request.
That is either phrased badly or is wrong.
The traditional browser server idiom is that the browser requests (a specific type of message/data) and the server responds (a specific type of message/data) to that request.
In terms of TCP (not HTTP) the server does in fact 'send' the response based on what the client (browser) 'sent' the request.
WhoPinchedMyName wrote: So a so-called "push notification" (from ther server to client) can only happen if the server has had such a "something" establishing (or keeping alive) a connection - that "something" telling it where to push the notification to
I can't even suggest that is phrased incorrectly. It is just wrong.
There is no communication without an open socket. None. Nothing can be sent in any way from any side unless the connection already exists.
There are two parts to the socket/connection
1. Open the socket
2. Use the socket.
Messages and communication from either side only happens with #2.
WhoPinchedMyName wrote: SO how does this differ from the client using a simple AJAX call on a setTimeout to
Now you are confusing how libraries and protocols that live on TOP of TCP work. And perhaps because their documentation is confusing and the documentation is overloading terms for their own reasons.
It does not matter what those 'claim' to do. They must all follow the rules of TCP because otherwise there absolutely no communication no matter what they do or how they claim to do it.
WhoPinchedMyName wrote: that it can run as some kind of background service - well, whooppee
In terms of the entire modern architecture from the browser all the way to the backend servers (multiple ones) and persisted data stores and third party services...yes background servicing is essential (technically threading processing.)
Might not be something you care about now. Might not even matter to you ever depending on where your focus lies.
|
|
|
|
|
I have the following code:
<div style="width:100%;height:100px;clear:left;background-color:#aaddee;border-style: solid;border-width: 1px;float:left;">
<div style="width:100px;height:100%;background-color:#ffeaae;border-style: solid;border-width:3px;text-align: center;vertical-align:middle;">
Tuesday
2023-03-15
</div>
</div>
Why this code doesn't center the text at middle on vertical direction ?
modified 16-Mar-23 8:44am.
|
|
|
|
|
The parent div would include several divs, where the text will be aligned separately.
|
|
|
|
|
I have tried:
<div style="width:100%;height:100px;border: 1px dashed #4b2869;clear:left;">
<div style="width:100%;height:100%;display:table;">
<div style="width:100px;height:100%;border: 2px dashed #4f2869;vertical-align:middle;text-align:center">
Tuesday
2023-03-15
</div>
</div>
</div>
No work.
|
|
|
|
|
|
Yes, I know, but the trick is that the second div has no vertical correct alignment, and I don't realise why:
<pre><!DOCTYPE html>
<html>
<head>
<title>Horizontal and Vertical alignment</title>
<style>
.container {
height: 200px;
width: 400px;
border: 2px dashed #4b2869;
display: table-cell;
text-align: center;
vertical-align: middle;
position: relative;
}
.container1 {
height: 200px;
width: 400px;
border: 2px dashed #4b2869;
display: table-cell;
text-align: center;
vertical-align: bottom;
position: absolute;
}
</style>
</head>
<body style="background-color:#646464;">
<div class="container">container</div>
<div class="container1">container1</div>
</body>
</html>
|
|
|
|
|
Sorry, I have tried a number of different styles and combinations but cannot get it to do what you want. But as I mentioned, I am not a CSS expert.
|
|
|
|
|
Thank you Richard a lot. As you see, the vertical alignment of the second div is not correct, and I don't know why, I am not a web developer at all.
|
|
|
|
|
I'm afraid I only dabble so my knowledge is limited. You might try opening the same question in QA to see if it gets a better response.
|
|
|
|
|
Just a heads up, floats are not needed here at all. Anyway, the vertical align property is for inline containers. A div by default is a block level element so it's ignored. To see what I mean check out the examples on MDN and W3Schools.
With that being said, there are much, much better ways to do this. If you want to vertically center without having to use explicit heights, the recommended way these days is to just use flexbox. There are a ton of other techniques like negative margins, line height, etc. too but flexbox should be something to master anyway. So, no time like the present.
<div style="width:100%;height:100px;background-color:#aaddee;border-style:solid;border-width:1px;display:flex;align-items:center;justify-content:center;">
<div style="background-color:#ffeaae;border-style:solid;border-width:3px;">
Tuesday 2023-03-20
</div>
</div>
Be aware that inline styles should be avoided. Only using them here to match your example.
Jeremy Falcon
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
