I'm trying to add the facebook like button, have follwed the steps from the Fb developers site, placed it where it needed to be, tried various other solutions for the like button not showing up. Can some one please explain why after I upload the file to the server, then look at the source code in the browser the code for the facebook like button is no longer there? Even the entire div tag surrounding the code is missing. When I look at the file that is on the server it contains the code for the button but the browser doesn't seem to recognize it.
I have read about having to create an API key(app ID), but have also heard it's not necessary.
Also, if the facebook account has settings like Country restrictions, it could mess up whether the button shows but the page I'm trying to set is to like a facebook page on another site. What am I missing?
Please help!
Here's what I have in code:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
some more stuff in the body...
<div class="sideFigures">
<div class="like">
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FEntertainmentIndustryIntroductionConvention&send=false&layout=button_count&width=150&show_faces=false&font=verdana&colorscheme=light&action=like&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:150px; height:21px;" allowTransparency="true"></iframe>
</div>
<img src="images/eiic figures.png" width="252" height="497" /> </div>
but when I look at source code from browser (in this example from IE), this is what I see:
<html xmlns="http://www.w3.org/1999/xhtml">
and the div containing the like button...
<div class="sideFigures"><img src="images/eiic figures.png" width="252" height="497" /></div>
Related
i just get into a small problem.
i tried to include iframe inside and also outside of div code but nothing show
adding like frameborder="0",etc didn't work either
then i tried on another .html file to make sure the iframe is good and it's showing like usually.
so why the iframe won't opened the src file, did i do something wrong ?.
heres my code (the problematic one):
<html>
<head>
<title>Buat.in</title>
</head>
<body class="container">
<div>
<div class="additional-ui">
</div>
<div>
<iframe src="backgroundui.html">
</iframe>
</div>
<div class="ui-bttnmenu">
<ul>
<li>Tentang
</li>
<li>Daftar Desain
</li>
<li>Lokasi
</li>
<li>Hubungi
</li>
</ul>
</div>
<footer class="foot-ui">
<p>Designed & Written by :</p>
and also i haven't applying the separate style file here, the class="" will be linked to my style later, i test it on firefox 85.0.1 ubuntu.
(Edit) heres the additional info for backgroundui.html:
<html>
<body class="secondary-ui-container">
<h1>Buat.in</h1>
<p>Your "trusted designer"</p>
</body>
</html>
fun fact theres something happened, when i run iframe inside the background.html (supposed to be the ui) the iframe works normally else on the main page.
or should i rebuild all from zero again ?.
Firefox has recently implemented a security feature which does not allow cross tab tracking which is the fundamental of iFrame. Previously, this feature only prevented only https and ssl certified sites.
You may change this behavior in your own Firefox installation by typing about:config in the address bar and setting security.mixed_content.block_active_content to false.
Here are some more docs about x-frame-options:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
Use Case: displaying info in a subset window of the SAME page the user is in. For example. I have a list on the left side. On the right side is details of a record based on what data point is clicked on the left. Currently I am trying to use an iframe tag. Both parent and target iframe are content from my single same domain/site i.e. there is no external sources I'm referencing.
I've had this iframe working in the past, then one day I went to check it out and it was not working as it should.
So the parent page has a list of students (in the left column).
The target iframe (right column) is supposed to show the students details one the students link is clicked in the parent page.
Instead what it's doing now, is opening a whole new tab in a separate window with the students details.
UPDATE: Jan16, 2018
So i tested it in four browsers. Only Safari apparently supports the inwindow target render. Chrome, Opera and Firefox all opened new tabs - not what i want. What gives? Here is the full html (I realized I should grab the source vs what my front end html looks like in Wordpress... sorry).
<p><iframe id="ifrm" src="http://example/wp-admin/admin.php?page=wpbc&wh_approved&wh_is_new=1&wh_booking_date=3&view_mode=vm_listing" width="100%" height="400">Your school has not setup a booking listings view. Please speak to your school or contact admin to have it set up.
</iframe></p>
<p>Welcome Instructor. This is your personal Dashboard.
<p><strong>School Name:</strong> School name <br />
<strong>Your ID:</strong> instructor3</p>
<hr />
<div class="fivecol-one"><strong>Student ID:</strong> user<br />
<a href="http://example/frm_display/Instructor-dashboard-iframe?student=453369" target="myiframe">View Details in window<br />
</a></p>
<hr />
<p> <strong>Student ID:</strong> jan17<br />
<a href="http://example/frm_display/Instructor-dashboard-iframe?student=45988" target="myiframe">View Details in window<br />
</a></p>
<hr />
<p> <strong>Student ID:</strong> user2<br />
<a href="http://example/frm_display/Instructor-dashboard-iframe?student=44499" target="myiframe">View Details in window<br />
</a></p>
<hr />
<p> <strong>Student ID:</strong> jstudent<br />
<a href="http://example/frm_display/Instructor-dashboard-iframe?student=464428" target="myiframe">View Details in window<br />
</a></p>
<hr />
<p> </p>
</div>
<div class="fivecol-four last">
<iframe id="myiframe" scrolling="yes" frameborder="1" src="http://example/frm_display/Instructor-dashboard-iframe/" height="500px" width="100%">
</div>
<div class="clear"></div>
So you can see that I have named my iframe id="myiframe" and my target="myiframe". I did notice that i had forgotten to close the iframe tag in the target, however, that did not seem to make a difference. I cleared my cache and refreshed my pages.
As mentioned it's working in Safari desktop only. HOWEVER, (and this is weird) in mobile, it's working in ALL browsers! (i removed my explicative..what was i thinking)
I don't know if this is applicable, but this site is hosted in Wordpress and using formidable forms. In particular the iframe is displaying what's called in formidable a 'view' i.e. a special page that shows data from formidable. It's not formally a 'page' in the Wordpress sense of the meaning. Hence I'm wondering if for some reason the iframe tag is getting confused. One suggestion was to use
in the header of the iframe page. And that's when i realized i can't apparently do that because as far as I know a formidable 'view' does not have a header?
HELP!!! please.
this is embarrassing.
I was simply missing a name attribute
name="myIframe"
wow... sorry for posting bone head move, but hope it can help someone.
I'm trying to set up Google Sites for my own personal website:
<html>
<head>
<title>...</title>
</head>
<body background="page_bg.png" text="#000000" bgcolor="#333333">
<div align="center"><img src="content.jpg" border="0" alt=""></div>
</body>
</html>
So all I want is a background picture (I accomplished to do this under settings) and only one picture in the middle of the site itself. I was trying to get rid of all the gimmicks (such as the sidebar, shadows of the frame, etc.) but I failed. Is it even possible to do this?
The reason I use Sites is, because the web address "https://sites.google.com/site/my_name_here/" is clear, it's free and it makes my site appear in the google search.
edit, my solution: I found a template called "Blank Template (Black)" which didn't contain anything (no sidebar, etc). I added my own background picture, inserted my content.jpg and done.
I guess you have to use something like:
<body style="background:#333333 url('page_bg.png'); color=#000000;">
<div style="text-align:center;"><img src="content.jpg" border="0" alt=""></div>
</body>
Oh ok, right! I think you cannot add your own styles using html/css. But if you go to "Managing Web site" there is a "Colors and fonts" option, and there you make you own customization for some elements, like select a different background color.
Is that what you're looking for Thomas?
My solution: I found a template called "Blank Template (Black)" which didn't contain anything (no sidebar, etc). I added my own background picture, inserted my content.jpg and done.
Are there ways to resize an image to fit thew window the image is being viewed in WITHOUT javascript and limited CSS?
I ask because I have an email campaign that I send out that features a main image that I want as large as possible without scrolling. I have read ways to do this with javascript and jQuery but I do not see a way to do this that the majority of email clients will read and react to properly. Is this possible? And if so - How?
This is the correct way to do it for a html email:
<img alt="" src="" width="100%" style="margin: 0; border: 0; padding: 0; display: block;">
It will auto resize to match the width of the container element (which should always be a <td>).
Note that on some clients (Outlook '07, '10 & '13 in particular), the image will not exceed it's maximum dimensions. If you are working with a max-width fluid template this will not be an issue providing your image width matches the max width.
This is how you should be able to do it
/****this is the Css****/
.full {
width:100%;
height:auto;
}
/***end Css***/
<!--Now the html--!>
<section>
<img src="image/main.png" class="full">
</section>
Or you can go the simple way
*update
you can do it like this
<img src="image/main.png" style="width:100%; height:auto; border:none;" />
and if they have an option to put it as html to do it like that as it should render correctly like that
You need to be as archaic as possible to make HTML emails work across all clients.
Inline styles and HTML 4 code should do the trick. Be warned though - max-width and max-height works in most clients, but this does NOT include Outlook 2007/2010/2013/365 which could well be over half of your target audience. Width works in all clients - but NOT on div and p tags in Outlook 2007/2010/2013/365! Always use tables not divs to be certain it will work.
Basically, always assume something isn't going to work and design for the smallest possible margin for error - and ALWAYS use inline styling or it might well get stripped.
If in doubt consult the oracle, I always do :)
Source: https://www.campaignmonitor.com/css/b/
HOW TO MAKE AN IMAGE RESIZE ITSELF IN A GMAIL
First, here is the HTML code we will be working with:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Image Resizer</title>
</head>
<body>
<!-- Point to your image by placing the path in the source (src) attribute. -->
<img src="http://yourImagePathHere.jpg" style="width:100%; background-repeat:no-repeat; background-size:100%;" />
</body>
</html>
NOTE: Notice the part that reads "http://yourImagePathHere.jpg". This is the path that points to the image you want resized in the GMail. Put the URL for your image here. In order to run this code
in a browser, you’ll need to have it saved as an HTML document. You can
accomplish this by copying and pasting the code above into a code editor or text
editor (such as Notepad on a PC or TextEdit on a MAC) and save it with the
extension “.html”.
If you are using TextEdit on a MAC, you will need to switch to plain text editing
before pasting the code. To do this, choose “Make Plain Text” from the “Format”
menu.
For this example, we will assume your file name is “image_resizer.html”. If you
need to change the image, you will need to edit the HTML document with a code
or text editor. To do this, right click the HTML document and choose “Open With”
and select a code editor or text editor. Then, swap out the image source path
(bolded in the example above), replacing it with the path that points to the
updated image. Then save, and your HTML file should ready to go and updated
to point to the new image.
If you are using TextEdit on a MAC, you will need to start a new document,
switch to plain text editing, paste the code again, and then change the path to the
image.
Step 1: Open image_resizer.html in a browser. To do this, double click it OR
right click it and select a browser from the “Open With” menu.
Step 2: Click anywhere on the webpage. You can click on the image itself or the
white space on the webpage. The idea here is to make sure that we will have
the pointer’s focus on the window to verify that the page is ready to be selected.
Step 3: Select All. Do this by using “Ctrl + A” on a PC … OR … “Command + A”
on a MAC. The page contents will be highlighted.
Step 4: Copy. Do this by using “Ctrl + C” on a PC … OR … “Command + C” on
a MAC. The page contents will be copied to the clipboard. (That just means that
the computer memorizes it).
Step 5: Now that the contents are copied to the clipboard (memorized by the
computer), open your Gmail and click the compose button. Place your curser in
the content area (click in the area where you type a message).
Step 6: Paste. Do this by using “Ctrl + V” on a PC … OR … “Command + V” on
a MAC.
Step 7. Finish typing your email message and send it.
I was dealing with really big images without any kind of a container. I fixed it by using max-width to ensure the image wouldn't be too big.
<img
src=""
width="100%"
style="max-width: 80vw; margin: 0; border: 0; padding: 0; display: block;"
/>
Using both width and max-width ensures the image will take the full available space, but not too much. I used 80vw and not 100 because people rarely read your emails in a fullscreen mode, usually more often using a viewer (Gmail), which usually uses a bit of the available space.
I have my image placed in a folder called images in the netbeans web pages folder and the link to it in my jsp is in a div as shown below:
<div id="image">
<p>
<img src="${pageContext.request.contextPath}/images/vote_image.GIF"
alt="banner"
width=600px
height=300px
/>
</p>
</div><!--end of image div-->
The problem is the image just doesn't load in the browser. What could be the problem? I used the same code in linux and it used to load the image. Could it be a browser problem, I'm using firefox 3.6 which I don't think should have a problem. Please let me know if any one has a clue as to why this is happening. If the problem is my code let me know how to adjust. Thank you
There are no units used in HTML width and height attributes.
<img src="${pageContext.request.contextPath}/images/vote_image.GIF"
alt="banner"
width="600"
height="300"
/>
Without seeing the rendered source of the page, I'd guess that's your problem. If not, try inspecting your image in Firebug and post what its rendered source looks like.
Also, make sure case sensitivity is not in play: gif vs. GIF.