@amitkanjiyani3398: as was explained to you earlier, when you post code here, you need to format it so that it will display correctly.
You can highlight your code, then use the </> button in the editor window, which will format it, or you can place three backticks ``` (top left key on US/UK keyboards) on a line before your code, and three on a line after your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.
Hello there this is the full code only
Are you saying that this is the only full code and that you have no other code for a “Like” button?
By the way, your code should begin with a valid doctype, such as <!doctype html>. Not including a doctype can cause problems.
The validator shows that the three src attributes in the first three img tags are empty. They will not show an icon for a button, or the button itself, if you to not address it.
I do not believe we can supply the code for your “Like” button. The code must be provided by the company who is recording the “Likes” and it must be unique to your web site, your server. If you do not have a web site on a server, I do not believer that you can request code from google or anyone else for a “Like” button.
I may be mistaken, so it would be best if someone more experienced with “Like” buttons can join this conversation.
Hello there how can i insert like button same as instagram in my website inside of card layout structure here’s the code for the following card layout structure
<style type="text/css">
body {
background: #aaa;
}
.cards {
background: #ddd;
list-style: none;
margin: 1em auto;
padding: 0;
max-width: 76em;
display: flex;
justify-content: space-between;
flex-flow: wrap;
}
.cards > li {
display: inline-block;
background: #fff;
border: 1px #aaa solid;
border-radius: 4px;
box-shadow: 2px 2px 2px #bbb;
margin: 0.6em;
padding: 0.6em;
flex: 1 1 16em;
}
.cards > li > img {
float: left;
margin: 0.5em;
max-width: 60%;
height: auto;
border: 1px #666 solid;
border-radius: 2px;
box-shadow: 2px 2px 2px #aaa;
}
.buttons {
list-style: none;
text-align: center;
padding: 0;
}
.buttons img {
margin-bottom: 1em;
}
</style>
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.8&appId=404110949921209";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width=450&layout=standard&action=like&size=small&show_faces=true&share=true&height=80&appId=404110949921209" width="450" height="80" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</body>
<h1>A(nother) Card Layout via Flex Box</h1>
<ul class="cards">
<li>
<h2>Card With Image</h2>
<p>Extra large</p>
<img src="12.jpg" alt="image" width="200" height="200">
<ul class="buttons">
<li>
<img src="" alt="Like Button" width="50" height="50">
</li>
<li>
<img src="" alt="Menu Button" width="50" height="50">
</li>
<li>
<img src="" alt="Link Button" width="50" height="50">
</li>
</ul>
</li>
<li>
</body>
<html>
@amitkanjiyani3398, have you researched this yet yourself, or made an attempt to do it? Why don’t you try that first, and let us know if you get stuck. But remember to give us all the relevant information that we will need to be able to help you.
Hello there i have tried i a lott but not getting as same as like in instagram but i am not getting any of the perfect solution so please help me.
Threads merged.
@amitkanjiyani3398: please don’t start a new thread when you already have an active and ongoing discussion of the same question.
Yet Again?
Someone else please feel free to pick up this conversation. I have enjoyed as much of this poster as I can stand. “Incredible patience” just expired.
See there as a new in this field i am felling more and more queries and i am just crazy to koe more and more new things.I know that sometime i was not diong the same thing as you were trying to explain me and really thanks for the help ronpat as a new fresher in this field you and your team has help me a lott and to solve the queries. i hope you will be helping me more and more.Hats off to you and your team
What is is about the like button you need to change, is it just the look of the button?
For that you just need to change the src attribute in the img to the icon you want there.
Or is it the actual functioning of the like button, so when someone clicks it, it records a like for that item, like the “like” buttons here. That will be a much more complex process that will need scripts.
I want the button functioning please help me or can you please help me to insert the like button as it is in the current website below the comments section
To make the buttons be buttons, you could wrap them in a button tag.
<li>
<button title="like this" class="like">
<img src="images/like-icon.svg" alt="Like Button" width="50" height="50">
<button>
</li>
You will need to find a suitable icon for the image to place in the src.
To actually make the button do anything will need some scripting. I think that is another topic, probably for the javascript forum, not my department.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.