Facebook like button ignore URL parameters - php

I'm trying to like my page but the url parameters are ignored
Here is my code:
<style type="text/css">
.float-all {
float: left;
width: 82px;
height: 30px;
overflow: hidden;
margin: 2px;
padding: 4px 2px;
}
.post-btn-share {
width: 100%;
overflow: auto;
}
<link rel="canonical" href="http://mypage.com/view_photo.php" />
</head>
<div class="post-btn-share">
<div class="addthis_toolbox addthis_default_style">
<div class="float-all">
<iframe src="http://www.facebook.com/plugins/like.php?href=http://mypage.com/view_photo.php? img=32&user=1&xx=&send=true&layout=standard&width=300&show_faces=true&action=like&colorscheme=light&font&height=80" frameborder="0" style="border:none;" scrolling="no" width="320" height="240"></iframe>
<div class="float-all">
</div>
<div class="float-all">
</div>
</div>
And view_photo code
<?php
session_start();
?>
<div class="dev-ajuste">
<?php
require_once('script/require_raiz.php');
$login = new login();
$login->log_isset();
//$login->info_user();
$janela = new Janelas('script/system/config.ini','perfil');
$janela->info_visualiza_foto($_GET['img'],$_GET['user']);
?>
</div>
<!--=======Cabeçalho e chamadas de scripts do documento=======-->
<?php include_once("head.php"); ?>
<!--=======Barra de navegação=======-->
<?php include_once("navbar.php"); ?>
<div id="janela" class="perfil"></div>
<div id="info" class="<?php echo $_GET['user'];?>"></div>
<!--=======Header=======-->
<?php include_once('box_foto.php'); ?>
<!--=======Propaganda=======-->
<?php include('addsense.php');?>
<!--=======Área dos posts=======-->
<?php include('post_area.php');?>
<!--=======Rodapé do documento=======-->
<?php include_once("footer.php"); ?>
<!--=======Seguranca de Login=======-->

(Turning a comment chain into a potential answer)
I really don't think you've understood. Look at the URL being used in the iframe:
http://www.facebook.com/plugins/like.php?href=http://mysite.com/view_photo.php?img=34&user=1&xx=&;send=true&;layout=standard&;width=300&;show_faces=true&;action=like&;colorscheme=light&;font&;height=80
In a URL, parameters being sent to the resource start at the ? character. But you have two ? characters. Do the parameters start at the first one or the second one? A parser has no way to know. When a & is encountered, is that separating a parameter for the outer URL (the first ?), or one being enclosed with the inner URL (the second ?)? A parser has no way to know.
The format needs to be like this:
http://someresource?parameter1&parameter2&etc
If one of those parameters is also a URL with its own parameters, that entire parameter needs to be URL-encoded so it doesn't confuse the rest of the URL for which it's being used as a parameter. Any parser has to be able to clearly identify what goes with the inner-URL and what goes with the outer-URL. It will URL-decode the inner one for you when it needs to use it.
PHP provides a function to do this. So does JavaScript. You can use whichever you'd like. All you do is pass it the string to be encoded (which would be your inner URL with whatever parameters need to go to that URL) and it will return the encoded string (which would be the parameter to send to your outer URL).
(Also, why do you have all those semi-colons? You don't separate URL parameters with semi-colons. I'm not sure where you got that idea.)

Go to this page and check the link of the like button which is show in the picture below:
You right click and inspect it. You see:
You see that it is urlencode'd. And the reasoning is very well explained by David :)

Related

Make my div disappear if variable is empty?

Im making a form using PHP/HTML.
I have divided all my fields into divs, and i get all my values from a table from SQL server.
I want to make some divs disappear if the value im getting from the table is empty.
I know how to do it, but it just does not work if the variable is empty.
For example;
<div <?php if (empty($trabalhoSemCarteira)){?>style="display:none"<?php }?>>
<h2>Trabalho sem registro em carteira:</h2>
<div>
<label><?php echo $trabalhoSemCarteira;?></label>
</div>
</div>
This does not work,and i have no idea why.
On the other hand;
<div <?php if ($numeroFilhos<3){?>style="display:none"<?php }?>>
<label>Nome do Filho: <?php echo $nomeFilho3;?></label>
<label>Idade: <?php echo $idadeFilho3;?></label><br>
</div>
This one works like a charm. I'm doing exactly the same thing in both of them. I think the problem is with the ''empty'' function, I don't know, but that is literally the only difference.
EDIT:I have tried using ==null,is_null() instead of empty and nothing works.
I'm not super well versed with your database collection code, so I can't say with absolute certainty what the problem is. First off, as CBroe mentioned, use var_dump($trabalhoSemCarteira) to find what your variable actually is when you get nothing back. Then just key it into the if statement. Example:
<?php if($trabalhoSemCarteira === $a){?>style="display:none;"<?php }?>
Of course, $a is meant to be whatever var_dump($trabalhoSemCarteira) outputs.
Note: Please make you code cleaner. I actually couldn't really tell at first if the format would even work. Unless you're using the empty blocks for something else(such as displaying the blocks later with JS, in which case your approach makes absolute sense), to prevent you rendering unnecessary blocks of useless code, only render the block if the variable does exist. Example:
<?php if($trabalhoSemCarteira !== $a): ?>
<div>
<h2>Trabalho sem registro em carteira:</h2>
<div>
<label><?php echo $trabalhoSemCarteira;?></label>
</div>
</div>
<?php endif; ?>
Obviously, again, $a is whatever your var_dump($trabalhoSemCarteira) output.
Edit: I just read the notes and you say that it gives you an empty space. Replace $a in the examples with .
Make my div disappear if variable is empty?
You can approach this a different way and instead of using a conditional in PHP, you can use the
:empty
pseudo-class in CSS which applies styles to HTML elements which don't contain anything.
Working Example:
.outer-div {
display: inline-block;
margin-right: 12px;
width: 120px;
height: 120px;
background-color: rgb(255, 0, 0);
vertical-align: top;
}
.inner-div {
display: flex;
justify-content: center;
align-items: center;
width: 96px;
height: 96px;
margin: 12px;
text-align: center;
background-color: rgb(255, 255, 0);
}
.inner-div:empty {
opacity: 0;
}
<div class="outer-div">
<div class="inner-div">PHP String Variable Echoed Here</div>
</div>
<div class="outer-div">
<div class="inner-div">A</div>
</div>
<div class="outer-div">
<div class="inner-div"></div>
</div>
Further Reading:
https://developer.mozilla.org/en-US/docs/Web/CSS/:empty
Your value is not empty it contains a single blank space, the easiest way to check is by trimming the value before checking
<?php $trabalhoSemCarteira=" "; ?>
<div <?php if (empty(trim($trabalhoSemCarteira))){?>style="display:none"<?php }?>>
<h2>Trabalho sem registro em carteira:</h2>
<div>
<label><?php echo $trabalhoSemCarteira;?></label>
</div>
</div>
BTW, TIP: indeed, as Ruvee mentioned syntax you're using for generating your HTML with PHP is just messy and it is error-pron, use something cleaner pls:
<?php
$trabalhoSemCarteira=" ";
$clazz = (empty(trim($trabalhoSemCarteira))) ? 'none' : 'block';
?>
<div style="display: <?php echo $clazz ?>">
<h2>Trabalho sem registro em carteira:</h2>
<div>
<label><?php echo $trabalhoSemCarteira;?></label>
</div>
</div>
or even cleaner
<?php
$trabalhoSemCarteira=" ";
$clazz = (empty(trim($trabalhoSemCarteira))) ? 'none' : 'block';
echo "<div style='display: {$clazz}'>
<h2>Trabalho sem registro em carteira:</h2>
<div>
<label>{$trabalhoSemCarteira}</label>
</div>
</div>"
TIP2: If you're gonna build some larger project in the feature consider using some MVC framework and/or some template engine like i.e. Twig, Smarty or others.

PHP menu works in standalone but not when included

I am developing a website and including two menus into a Home page. The Home page, and both menus have the extension .php. I am testing locally on Apache Server.
The issue: One of my menus, which is a top navigation bar, displays correctly on my local server but its menu items / links are not clickable and do not show the rollover effect. This is ONLY when I load the Home page with the menu included via PHP.
When I load the menu page itself (still on my local server), the issue is not present, my menu displays and works fine, including the links.
Please see the code below:
Home Page
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>Home</title>
<!-- various css imports, removed for readability -->
</head>
<body id="home">
<?php include('top-bar.php'); ?>
<!-- Container div -->
<div id="container">
<?php include('menu.php'); ?>
<!-- Container div -->
</div>
</body>
</html>
Menu bar
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- various css imports, removed for readability -->
<title>Topbar</title>
</head>
<body id="home">
<div id="headerbar">
<!-- Centered container -->
<div id="container">
<!-- Top bar -->
<div id="header">
<div id="maintitle">
<span style="color: #499DF5">My</span><span style="color: #FFFFFF"> Name</span> </div>
<!-- Second menu bar -->
<div id="menutop">
<ul>
<li id="contactme" title="Write me an email"><a href='#'><span>Contact me</span></a></li>
<li class="last" id="vcf"><a href="#" onClick="MyWindow=window.open('contact-card-popup.html','MyWindow','width=300,heig‌​ht=150'); return false;" title="Download my contact card (.vcf or .csv)">Download
contact card</a></li>
<li class="last" style="float: right;" id="googleplus"><a target="_blank" title="Follow me on Google+" href="https://plus.google.com/u/0/114402922247766544960/posts">
<i class="fa fa-google-plus fa-fw"></i></a></li>
<li style="float: right;" id="linkedin"><a target="_blank" title="View my LinkedIn profile" href="http://www.linkedin.com/in/myprofile">
<i class="fa fa-linkedin fa-fw"></i></a></li>
<li style="float: right;" id="visualize.me"> <a target="_blank" href='http://vizualize.me/myprofile?r=myprofile' title='View my infographic resume on Vizualize.me'><span style="font-weight:bold">Visualize.me</span></a></li>
</ul>
</div> <!-- End Second menu bar -->
<div id="jobtitle">Jobtitle</div>
<!-- End header div -->
</div>
<!-- End Centered container -->
</div>
<!-- End headerbar div -->
</div>
</body>
</html>
And CSS:
/* Layout
-----------------------------------------------------------------------------*/
body {
}
#container {
width:1020px;
position:relative;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px;
}
#headerbar{
width:100%;
min-width:500px;
height:130px;
position:absolute;
background: #414141;
}
#menutop {
min-width:500px;
width:1020px;
position:absolute;
margin-top:20px;
}
#wrapper {
clear:both;
height:900px;
width:1020px;
position:relative;
margin: 0 0 0 -25px;
}
/* Top menu: header
-----------------------------------------------------------------------------*/
#header {
font-family:'Open Sans', sans serif;
}
#maintitle {
font-weight:bold;
font-size:34px;
width:250px;
height:40px;
min-height:60px;
position:relative;
margin-left:40px;
margin-top:25px;
}
#jobtitle {
color: #FFFFFF;
font-size: 14px;
width: 230px;
height: 25px;
position: absolute;
margin-left: 270px;
margin-top: 9px;
left: 16px;
top: 36px;
}
I tried replacing my php include
<?php include('top-bar.php'); ?>
with the link relative to the root:
<?php include($_SERVER['DOCUMENT_ROOT']."/my-website/top-bar.php"); ?>
This did not change anything.
I also validated against W3C, just in case it would throw any obvious errors, which it did not.
Any ideas on why the PHP menu works in standalone but not when included? Thank you.
Edit:
On a good suggestion of Moshe I updated the JSFiddle he created. Since it seems I cannot use several files in there, I put the code of the top menu inside the home page, where the php import is performed. Doing so clearly makes the links in the menu non-working so it sounds like a CSS issue. I however do not see where the issue is.
http://jsfiddle.net/0ows5vym/4/
And this is the menu only, working fine in standalone: http://jsfiddle.net/fdbvwL3t/
Note: Please diregard the icons not displayed at the far right of the menu, they are based on other imports I cannot easily reproduce here. That part works fine locally.
You would use dirname(FILE) to get current directory.
try using
include(dirname(__FILE__). "/my-website/top-bar.php")
instead of $_SERVER['DOCUMENT_ROOT']
FILE constant will give you absolute path to current file
and dirname(FILE) to get the directory of current included file
In which file are you trying to load your php file?
if it is in your index.php (probably),
then you need to take in account your path facing the file where you have it
lets suppose that:
you have a absolute path for your index.php like
/var/www/html/thisismywebsite/index.php
and your file is in
/var/www/html/thisismywebsite/project/someinnerfolder/topbar.php
the above would not solve it.
Instead, you may opt for a solution like
<?php
define('BASEPATH', dirname(__FILE__) . "/");
include(BASEPATH . "project/someinnerfolder/topbar.php");
Just remember, the includes must be relative to the entry point of your application, so your include must be relative to where you start your app.
BONUS:
Don't start all your files with the tag, and so on, since it will give you issues later on. rather, opt to use a master to keep this kind of html
I finally got it. Playing with the JsFiddle here: http://jsfiddle.net/0ows5vym/4/ put me on the right track.
I have a "container" element that was called twice, once in my php menu and then again in the main page. I made the mistake of giving that container a unique ID where it should be a class, if I want to be able to call it several times.
Replacing the container "id" with "class" fixes it, cf here. http://jsfiddle.net/0ows5vym/6/
<!-- Container div -->
<div class="container">
<?php include('menu.php'); ?>
<!-- Container div -->
</div>
Moshe - thank you for letting me know about JsFiddle. I like that tool. Also your suggestion helped me find the answer.

If class exists give the next div a top margin but margin height determined with php

I'm trying to give the first div a top margin only if the class fixed-header exists, I've tried doing this with pure css but there were to many variables and I was losing track so I'm thinking use jquery.
Here's some simple html
<div id="page-container">
<div id="header" class="fixed-header">header</div>
<div>Test 2</div>
<div>Test 3</div>
<div>Test 4</div>
<div>Test 5</div>
</div>
Basically, if .fixed-header does exists give the first div, in this case it's 'test2' a top margin which matches the header, if there is no 'div2' then give 'div3' a top margin and so on.
Now for the tricky part, the top margin must be determined from a php script, here's how I get the header height below.
<?php echo $header_options['header_height'] ?>
How can I do this in jquery?
Here's a basic fiddle to start me off
If i understood you correctly, you can do that in CSS like that:
.page-container div.fixed-header:nth-child(1) + div,
.page-container div:not(.fixed-header):nth-child(1){
margin-top:20px;
// or
margin-top: <?php echo $header_options['header_height'] ?>px;
background:red;
}
this will give the first div after .fixed-header or the first one in .page-container (if no fixed-header exists) a margin.
Demo
If you want the margin be exactly the same as the height of the header without php, then yes, you'll have to resort to javascript/jquery. Something like this
$('#page-container div.fixed-header:nth-child(1)').each(function(){
$(this).next().css({'margin-top':$(this).height()});
});
Use length to find the div exits or not:
if($('.fixed-header').length > 0){
//do your stuff here
}
And I think it should work just with css:
#page-container .fix-header{
margin: 5px;
}
You can do this in CSS alone you know....you dont need to resort to Javascript or jQuery.
#page-container div:nth-child(1)[class='fixed-header']{
background:red;
}
Demo of the above, variation 1, variation 2
Use CSS in the head of the page:
#page-container #header.fixed-header + div {
/* the following should be parsed by php, but
I don't know whether this generates a full CSS
rule, or just the relevant length. Adjust as appropriate */
<?php echo $header_options['header_height'] ?>
}
There's no need for jQuery in here...
You want to div that follows .fixed-header to have a margin? Use the adjacent selector "+"
<style>
#header.fixed-header {height: <?php echo $header_options['header_height'] ?>px}
#header.fixed-header + div {margin-top: <?php echo $header_options['header_height'] ?>px}
</style>
Btw, you could just set a margin-bottom on #header.fixed-header... ;-)
Well, if each margin is the same, then give a data-attribute to the container. If each margin has different height, the most intuitive option is to put a data attribute to each item.
If each margin is the same, here is you code
$(".fixed-header").each(function(item) {
$($(item).next()).css('margin-top', $(item).parent().data('margin-height'));
});
Your markup should look like this:
<div id="page-container" data-margin-height="50px">
<div id="header" class="fixed-header">header</div>
<div>Test 2</div>
<div>Test 3</div>
<div>Test 4</div>
<div>Test 5</div>
</div>
This is equivalent to the following CSS, if every page-container has the same value as well.
.page-container .fixed-header + div {
margin-top: 50px;
}
You can generate this CSS file with your PHP as well. To make life easier, you can even embed this to you HTML template. If the margin-height does not reflect any information, then possibly generating your CSS is the best option, because then, you don't need to put useless information outside a <style> or <script> tag.
<style>
.page-container .fixed-header + div {
margin-top: <?php echo $header_options['header_height'] ?>;
}
</style>
Another option is to use CSS3 attr, which is not yet supported completely in all browsers.
https://developer.mozilla.org/en-US/docs/Web/CSS/attr
.page-container .fixed-header + div {
margin-top: attr(data-margin-height);
}
This allows you to get rid of your script, but unfortunately, you will have to set data-margin-height for each .fixed-header.
I used .page-container classes in these examples, because this solution can be used if you have multiple different containers on the same page. If you only need one, you can just replace each .page-container to #page-container, and the code will work. Fiddle:
http://jsfiddle.net/k5V2a/

Trying to share a link to facebook only shares the main url

I am new to twitter,facebook etc api's and javascripts.
A similar question might be asked by some one else but please check my question, I guess this question is not a duplicate one.
I am trying to share a url to facebook. Here is my code
<?php $link="www.google.com">
<script>
function fbs_click()
{
u=location.href;
t=document.title;
window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');
return false;
}
</script>
<style>
html .fb_share_button { display: -moz-inline-block; display:inline-block; padding:1px 20px 0 5px; height:15px; background:url(http://static.ak.facebook.com/images/share/facebook_share_icon.gif?6:26981) no-repeat top right; } html .fb_share_button:hover { color:#fff; url(http://static.ak.facebook.com/images/share/facebook_share_icon.gif?6:26981) no-repeat top right; text-decoration:none; }
</style>
<a rel="nofollow" href="http://www.facebook.com/share.php?u=<?php echo $link;?>"
class="fb_share_button" onclick="return fbs_click()" target="_blank" style="text-align:center;"></a>
</div>
But instead of sharing www.google.com it shows main url such as www.mysite.com/facebookshare.php where am i going wrong.
I also tried a simple anchor tag method to share but it disturbs my entire css.
exmaple
<a href = "http://www.facebook.com/sharer/sharer.php?u= <?php echo $link;?>">
<img src = "http://www.mysite.com/FB_2.png"></a>
Please help me to get the exact url i wish (www.google.com) to be shared to facebook.
Thank you
https://stackoverflow.com/questions/10566503/facebook-share-sharer-php-x-facebook-debugger?rq=1
the sharer part of fb is no longer supported by fb you have to use the feed dialog part of javascript api https://developers.facebook.com/docs/reference/dialogs/feed/
also make sure your og meta tags contain the correct information http://ogp.me/ that could be your problem

Prevent Text Overflow by Inserting Breaklines

A question... How can we insert breaks into string and make a multi line string to prevent overflow in axis lengths of an fixed width element?!
Exapmple Code that include the problem:
<div style="width:100px;">
Too Long String...
</div>
I need to be like this one:
<div style="width:100px;">
Too Long String (Line 1st)<br />
Too Long String (Line 2nd)<br />
Too Long String (Line 3rd)<br />
Too Long String (Line 4th)<br />
...
</div>
What kind of client side script should i use for ?!
Use the style property "word-wrap: break-word" u will get a multi lined string without overflow.
regards
This should do it:
<div style="width: 100px; word-break: break-all;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
Not sure about your requirement. If using your code, the long text will show as multi-line text and it won't overflow horizontally by default.
Let me show you all code...
The HTML Code:
<table class="tbl">
<tr>
<td><div>Header Codes ans CSS Comes Here</div></td>
<td><p>Too Long String...</p></td>
</tr>
</table>
And The CSS Code:
.tbl {
table-layout:fixed;
width: 568px;
}
.tbl td {
border:1px solid #C93;
}
The result is something like this : http://www.4ul.com/uploads/Capture[1].JPG
And our too long string go out of the table width (if we set size for the p tag, nothing will changes...)
METHOD
The way I would fix this is by putting a p tag within your div and style is so that it has a width, is floated and has display set to block, this should fix your problem, and this does not include any jQuery so it will reduce client load times.
EXAMPLE:
HTML:
<div class="container">
<p>
Too Long String... Too Long String... Too Long String... Too Long String... Too Long String... Too Long String... Too Long String... Too Long String... Too Long String...
</p>
</div>
CSS:
.container {
float:left;
width:500px;
background-color:#000000;
}
.container p {
float:left;
width:500px;
display:block;
color:#FFFFFF;
}
JSFIDDLE: http://jsfiddle.net/8WP4J/
Source:
General knowledge from using HTML and CSS for similar problems
Hope this helps, any issues, feel free to comment.

Categories