I have searched and gone through many so called solutions but none helped.
I have a situation where i need multiple facebook comments on a same page for different li tags.
The code will make it clear I guess.
<?php foreach($events_without_upcoming as $single_events):?>
<li id="event_<?php echo $single_events->id; ?>" class="events" style="cursor:default">
<span class="sn"><?php $i++; ?></span>
<span class="date"><?php echo $new_date?></span>
<span class="venue"><?php echo $single_events->venue; ?></span>
<span class="address"><?php echo $single_events->address; ?></span>
<span class="option"><?php echo share_button('facebook', array('url'=>"http://www.xxxxxx.com", 'text'=>$text))?><?php echo share_button('twitter', array('url'=>$url, 'text'=>$text, 'via'=>'Lightning At The Opera', 'type'=>'iframe'))?></span>
<div id="fb_<?php echo $single_events->id; ?>" class="fb_plugin" style="display:none;"></div>
<div class="fb-like" style="display:block" data-href="http://www.xxxxxx.com/<?php echo $single_events->id; ?>" data-send="true" data-width="450" data-show-faces="false"></div>
<div class="fb-comments" data-href="http://www.xxxxxx.com/#event<?php echo $single_events->id;?>" data-width="470"></div>
</li>
<?php endforeach;?>
The FB comment plugin is within a foreach loop.
Every li contains the comment plugin.
I tried giving data-href a unique url as in code but its not working.
I have been trying this from morning but I couldn't find anything.
If i haven't made myself clear please ask anything thats required.
Thx in advance.
<iframe
style="border: none; overflow: hidden; height: 155px; width: 470px;"
scrolling="no"
src="https://www.facebook.com/plugins/comments.php?api_key=your_api_key&elation%3Dparent.parent&numposts=1&width=470&href=http%3A%2F%2Fexample.com"></iframe>
as we cannot find any solution with js so We are using iframe without any js libs,
it also helpful when we want to show comments dynamically.
Related
I have a link in the following div, it code is,
<?php _e('More', 'isis'); ?>
Now, I want to make the whole div a hyperlink. Please guide me. Thanks. The whole code is below,
<div class="midrow_blocks_wrap">
<i class="fa <?php echo of_get_option('block1_logo'); ?> fa-3x icon"></i>
<a href="#">
<div class="midrow_block">
<!--We need to make this div a link -->
<div class="mid_block_content">
<h3><?php echo of_get_option('block1_text'); ?></h3>
<p><?php echo of_get_option('block1_textarea'); ?></p>
</div>
<?php if ( of_get_option('block1_link') ) { ?><?php _e('More', 'isis'); ?><?php } ?>
</div>
</div>
<div class="shadow"><img src="<?php echo get_template_directory_uri(); ?>/images/service_shadow.png" alt="<?php the_title_attribute(); ?>" /></div>
</div>
A lot of the time when I'm trying to make a hyperlink fill a whole div I give the div a position: relative and the hyperlink a position: absolute; width: 100%; height: 100%; left: 0; top:0; I developed this because wrapping a whole div in a hyperlink can be screwy.
It is usually much easier to do it that way. If you give a z-index: 9 or some higher number you will cover most of your base for the div and then if you need other links or content in there you'll need to do a higher z-index.
Just a thought.
When using Instagrams API to display the images on my website, the images aren't inheriting the containing divs style.
The style being float:left. So they don't stack on top of each other, they actually appear in rows and columns... rather than just a column.
The CSS:
#instagram.img {
float:left;
margin:10px;
}
The HTML/PHP (omitting get data & parsing) :
<div class="instagram">
<?php foreach ($result->data as $post): ?>
<a class="group" rel="group1" href="<?= $post->images->standard_resolution->url ?>"><img src="<?= $post->images->thumbnail->url ?>"></a>
<?php endforeach ?>
</div>
I tested that, images outside of the php adhere to the styling and they do. They float:left as expected.
Any help greatly appreciated.
.instagram {
float:left;
margin:10px;
display: inline-block;
}
As I said in the comment, # is the selector for id, . is the selector for class.
<div>
<?php foreach ($result->data as $post): ?>
<a class="group instagram" rel="group1" href="<?= $post->images->standard_resolution->url ?>"><img src="<?= $post->images->thumbnail->url ?>"></a>
<?php endforeach ?>
</div>
Add the .instagram class to your <a>, because adding it to your div will float the div left, and not the picture.
See display properties to see why the display: inline-block;.
I successfully implemented the Bootstrap popover after some trying...
Now I want to implement another HTML into the popover. Normal Tags like <p align=center>some text</p>
are working, but if I add some quotes, it doesen't work anymore:
" data-placement="top">...
Then I tried this:
" data-placement="top">...
I also tried to replace the content of the data-content-attribute with <?PHP echo '...' ?> but that didn't work too.
Can anyone help me please?
Edit: Actual code
<a href="myFacebookPage" rel="popover" data-content='<div style="width: 100px; height: 200px;" class="fb-like" data-href="myFacebookPage" data-layout="box_count" data-action="like" data-show-faces="true" data-share="true"></div>' data-placement="top" target="_blank">
<img src="theUsedIcon"
</a>
In the options for the popover you'll note that it states to use the html option set to true, because if false, jQuery's text method will be used to insert content into the DOM. It also warns that the default value is false, and you should use text if you're worried about XSS attacks.
So, try writing your link this way instead:
<a href="myFacebookPage" rel="popover" data-content='<div style="width: 100px; height: 200px;" class="fb-like" data-href="myFacebookPage" data-layout="box_count" data-action="like" data-show-faces="true" data-share="true"></div>' data-placement="top" target="_blank" data-html="true">
<img src="theUsedIcon">
</a>
Ok thanks for your answers :)
I replaced the javascript Like-Button with the iFrame Like-Button and now it's working.
I am using the pin it button script to display pin it button on hover.
It's working fine on desktop.
But it throwing error on iPad's Safari.
The error: "Safari cannot open the page. because the address is invalid."
I am using code like this:
<div class="pin-it-hover">
<a href="//www.pinterest.com/pin/create/button/?url=<?php echo current_url(); ?>&media= <?php echo site_url($imagepath); ?>&description=<?php echo $description; ?>"
data-pin-do="buttonPin" data-pin-config="none">
<img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png"/>
</a>
</div>
Included script only once.
<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>
CSS used:
.pin-it-hover {
right: 20px;
top :20px ;
position: absolute;
visibility: hidden;
}
.outerdiv:hover .pin-it-hover {
visibility: visible;
}
Any suggestion?
What's wrong with my code?
Use http: in front of URLs or remove // in every urls like below.
http://assets.pinterest.com/js/pinit.js or assets.pinterest.com/js/pinit.js
instead of //assets.pinterest.com/js/pinit.js
<div class="pin-it-hover">
<a href="http://www.pinterest.com/pin/create/button/?url=<?php echo current_url(); ?>&media= <?php echo site_url($imagepath); ?>&description=<?php echo $description; ?>"
data-pin-do="buttonPin" data-pin-config="none">
<img src="http://assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png"/>
</a>
</div>
I think this will helps you.
I want to show the image title when hovered to the image connected to mysql using php.
Here are the code I used.
<div class="galleryko">
<?php $data = mysql_query("SELECT * FROM tbl_gallery_featured")?>
<div class="lalagyan1">
<?php while($row = mysql_fetch_assoc($data)):?>
<div class="lalagyan">
<div id="wew">
<img src="admin/featured/<?php echo $row['photo']?>" style="width:150px; height: 150px;"/></br>
</div>
</div>
<?php endwhile?>
</div>
</div>
Then I tried to insert a TITLE inside the code of
<img src="admin/featured/<?php echo $row['photo']?>" style="width:150px; height: 150px;"/></br>
But when I hover the images after I did, what happened was, all images are entitled with SOMETEXT, Now I want to show the TITLE of an IMAGE seperately.
Some one please solve my problem,. Thank you in advance! :)
Remove title="SOMETEXT" and add something like this to img tag alt="$row['title']"
<img src="admin/featured/<?php echo $row['photo']?>" style="width:150px; height: 150px;"/>