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
Related
I am trying to add a background image to an Anchor tag when value is "ENGLISH" and "FRENCH"
I was able to make it work when the echoed php value was a digit using DATA-ID this way
HTML AND PHP:
<li><a href="#" class="pjMbSelectorLocale" data-id="<?php echo
$locale['id'];?>"><?php echo pjSanitize::html($locale['title']); ?></a></li>
CSS:
li a[data-id="1"]{
background-
image:url("img/flags/united-
kingdom.svg");
background-position: center;background-repeat: no-repeat;display: inline-
block;
}
li a[data-id="2"]{
background-image:url("img/flags/france.svg");
background-position: center;background-repeat: no-repeat;display: inline-
block;
}
now I am trying to do the same when the echoed value is not an ID (1 or 2) but a text ("English" and "French") with this statement:
<button>
</button>
And I can't seem to figure out how to manipulate it in css
Update: there seems to be a problem with the php, whenever I add the anchor tag, the echoed text disappears: initial php was:
<button>
<?php echo $selected_lang;?>
</button>
using dev tools, I can see the value being passed into the data-value and the css going with either options. but the browser doesn't not render the text nor the image
Solved
Solution:
the image was being hidden by a background-image:none default property and also I had to apply a height and width.
a[data-value="English"]{
background-
image:url("img/flags/united-
kingdom.svg");
background-position: center;background-repeat: no-repeat;display:inline-
block;width: 20px;height: 20px;
}
Did you try:
li a[data-value='ENGLISH']{
...
}
li a[data-value='FRENCH']{
...
}
I'm trying to display images using CSS so that I can switch which image is being displayed depending on what stylesheet is selected. It works fine sometimes, others not. Can you help me figure out why?
I first use php to echo out the HTML based on the page id:
if($host == 'comparison.php?page=1.1.9')
{
echo "<div class='image8'></div>";
}
if($host == 'comparison.php?page=1.1.10')
{
echo "<div class='image9'></div>";
}
In the CSS, I identify the class, and tell it to display the image:
div.image8 {
content:url(homilies/1.1.9.jpg);
width: 100%;
}
div.image9 {
content:url(homilies/1.1.10.jpg);
width: 100%;
}
1.1.10 works perfectly, and the image changes when I select another stylesheet. 1.1.9 does not work at all, and when I inspect the element, the 'div.image8' doesn't even show up. What could be going on here? It works in other places too, I can't figure out the pattern.
Ok D.C, I'm in a good mood and like I mentioned in a comment above, I created a quick, down and dirty, one page code to test your situation. Everything worked great for me, but I did learn a few things too. I have no idea how 1.1.10 worked perfectly for you but not 1.1.9 because from what I can tell neither should work. Tested in Firefox v53.0.2.
Using content:url('some_image'); never showed the image for me.
Had to use background-image: url('some_image'); for an image to appear.
The DIV needed a non-breaking space ( ) between the DIV tags for the DIV to show the image. In other words, you can't have a background image if there is no content in the DIV. So maybe you just need to add a non-breaking space between your DIV tags to make it work?
That's about it. Now for a working example. You can and should modify it to fit your needs. For example link the style sheet instead of internal like I did. I just wanted to make a quick one page of code to test if everything will work.
<?php
//Use a PHP ternary operator to check if the GET variable is set in the URL.
$page=isset($_GET['page'])?$_GET['page']:'';
switch ($page) {
case '1.1.9':
$img_class='image8';
break;
case '1.1.10':
$img_class='image9';
break;
case '1.1.11':
$img_class='image10';
break;
default:
$img_class='image0';
break;
}
?>
<!DOCTYPE HTML>
<html>
<head>
<title>Image By Get Var</title>
<style>
/*Everything between the STYLE tags would actually be in your style sheet instead of internal to your page.*/
html, body {
height: 100%;
background: #ccc;
padding: 10px;
}
#img_container {
margin-top: 20px;
background-repeat: no-repeat;
background-size: contain;
height: 50%;
width: 50%;
}
/* You can use the static images below to test this code, but should replace with your images using a relative path.*/
/* Used tinypic.com for demo images since it allows free hotlinking. */
div.image0 {
background-image: url('http://i50.tinypic.com/j9blw9.jpg');
}
div.image8 {
background-image: url('http://i42.tinypic.com/5n52ex.jpg');
}
div.image9 {
background-image: url('http://i60.tinypic.com/316ozv5.jpg');
}
div.image10 {
background-image: url('http://i43.tinypic.com/2eg5j7s.jpg');
}
</style>
</head>
<body>
<p>The form only exists so that a GET variable can be sent to the page to test PHP setting CSS based on the GET variable.</p>
<form method="get">
<input type="radio" name="page" value="1.1.9"> 1.1.9<br>
<input type="radio" name="page" value="1.1.10"> 1.1.10<br>
<input type="radio" name="page" value="1.1.11"> 1.1.11<br>
<input type="submit" value="Submit">
</form>
<form>
<input type="submit" value="Reset To Default">
</form>
<?php
/* The div container has a non-breaking space so that the div will exist to have a background */
echo '
<div id="img_container" class="'.$img_class.'"> </div>
';
?>
</body>
</html>
I hope that helps. If 1.1.9 still does not work when you replace the image in my example with the relative path to your image, then you should make sure that the image is located in the path that you have specified.
Good luck!
Found the solution, for anyone interested: after using a CSS validator, I found that there were invisible characters mucking things up. Lesson learned.
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¶meter2&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 :)
I'm creating an e-commerce site and I'm having trouble vertically centering all my thumbnails. The problem is all my images are different sizes and getting each one to vertical align across all browsers is turning out to be a pain. I've looked into the different CSS options, display-table, line-height, and others. They worked in modern browsers, but not well in IE (of course). My thought is the large big time sites are resizing the image (which I can do with no problem) and then overlaying the image on top of a background the exact size they need. Does anyone know if this is how it's done? IF so can you direct me to some documentation of how to do this in PHP?
Or if someone thinks I can do this without all the extra work of overlaying images please let me know. In-case you want to see what I'm working with here ya go:
HTML
<a href="#">
<div id="product">
<div id="product-image">
<img src="" border="0" />
</div>
<div id="product-name"></div>
<div id="product-price"></div>
</div>
</a>
OPTION 1 : JQUERY (this seemed to be my best hope, but couldn't get it to work right)
var h = $('#product-image').height();
$.map($('#product-image img'), function(e)
{
var top =( h- $(e).height())/2;
$(e).css("margin-top",top);
});
OPTION 2 : CSS
#product
{
float:left;
margin:5px;
width:200px;
height:200px;
border:1px solid #999;
}
#product-image
{
margin:2px auto;
width:194px;
height:145px;
text-align:center;
}
#product-image img
{
max-height: 100%;
max-width: 100%;
vertical-align:middle;
}
EDIT
I found the working code, thanks Explosion Pills. For anyone trying to get this work I would suggest using this jQuery method and Fiddle link http://jsfiddle.net/9VfUS/1/:
WORKING JQUERY
var h = $('div#product-image').height();
$('div#product-image img').each(function ()
{
var top = (h - $(this).height()) / 2;
$(this).css("margin-top",top);
});
If you can use JavaScript, I would do it that way as it's surefire to get things to work the way you want. You are using .map for the wrong purpose. You want .each:
$('#product-image img').each(function () {
var top = (h - $(this).height()) / 2;
$(this).css("margin-top",top);
});
I assume that h was already calculated correctly as the tallest image or the height of the container or what have you. If it's not, then you have to do that.
Try this, if you know in advance the sizes of your images...
HTML:
<a href="#">
<div class="product">
<div class="product-image" data-image-loc="path_to_your_image"> </div>
<div class="product-name"></div>
<div class="product-price"></div>
</div>
</a>
CSS:
div.product-image {
background-position:center center;
background-repeat:no-repeat;
background-color: transparent;
background-attachment: scroll;
}
div.product-image-width-x-height {
width:{width}px;
height:{height}px;
}
JS:
$(document).ready(function() {
$('div.product-image').each(function() {
$(this).css({backgroundImage:url($(this).attr('data-image-loc'))});
});
});
If you don't know your sizes, then a resize script that serves all your images to a new size would fix that, and you would simply move the width/height css properties to the div#product-image CSS declaration.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I've created a grid portfolio page on my website and I'm looking to add a feature to the thumbnails. I'd like that whenever someone hovers over a thumbnail, it will show the post title, date of post and excerpt.
I've been trying to find an example of what I mean and this is very similar;
http://lucybenson.net/redesign2011/
So far my loop on Wordpress looks like this
http://pastie.org/2135220
Is there a plugin that does this? If not, would anyone be able to tell me how I could achieve this?
Thanks in advance.
There are plugins for this kind of thing, but it's very easy to do by yourself.
This isn't tested, but it should get you going in the right direction:
<style type="text/css" media="screen">
.image-list {
list-style-type: none;
margin: 0;
padding: 0;
}
.image-list li {
margin: 0 10px 0 0;
padding: 0;
float: left;
}
.image-list li a {
display: block;
position: relative;
height: 50px;
width: 50px;
}
.image-list li a span {
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.4);
color: #fff;
}
</style>
<ul class="image-list">
<li>
<a href="#">
<img src="myimage.jpg" alt="My Image">
<span>
This is my overlay content
</span>
</a>
</li>
</ul>
<script type="text/javascript">
$(function() {
$(".image-list li a").hover(
// Mouse Over
function() {
$(this).find("span").fadeIn();
},
// Mouse Out
function() {
$(this).find("span").fadeOut();
}
);
});
</script>
If you're looking for a javascript-independent solution - I know, sounds really silly but it's worth a try - you can do it through CSS purely. It's not too hard - http://jsfiddle.net/teddyrised/TWBhU/
What I did was to use the -webkit-transition / transition property. Of course, my solution isn't as elegant as what Jesse has posted, but it's just nice to know CSS could work some magic, too.
There are a few things you need to get sorted here - first you need to get your head around getting one thing on top of the other - so here's the effect you're after done really simply in just css using the :hover class. The key is using the absolute position in an absolutely positioned wrap to get the text on top of the image
http://jsfiddle.net/aDwe4/
Next you want the fade the item - some people might not like it - but jquery makes this super easy - drop the hover class and put the animate function in your footer in some script tags
http://jsfiddle.net/aDwe4/1/
Finally you now need to translate this into your wordpress tempalte - I'm not sure what's going on with your template - so I'll just write an example. I would install the get_the_image plugin then put something like this within your loop
<div class="imagewrap">
<div class="image">
<?php if ( function_exists( 'get_the_image' ) ) get_the_image(); ?>
</div>
<div class="copy">
<h3><?php the_title(); ?></h3>
<?php the_excerpt(); ?>
</div>
</div>
You're obviously going to have to look up how get_the_image works, but I think with all this you should be laughing!