I'm having a weird problem on this page www.vivopositivo.it/media/foto/guarda-chi-sorride-over-18-e-famiglie/ with the like button. I'm using PrettyPhoto to include the pictures from Flickr and open them in a lightbox. Each picture has it's own like button which shows in the lightbox and uses a specific URL such as:
http://www.vivopositivo.it/media/foto/guarda-chi-sorride-over-18-e-famiglie/#prettyPhoto[pp_gal]/1/
where the number in #prettyPhoto[pp_gal]/1/ is the key for the specific image.
The like buttons are included with the following code:
iframe src="//www.facebook.com/plugins/like.php?locale=en_US&href={location_href}&layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:23px;" allowTransparency="true" /iframe
where {location_href} gets replaced with the image specific URL.
This works for most of the images, but for some of them doesn't! They seem to get the like counter of the page instead, therefore, I get about 10 images which show the same 128 like counter which is obviously wrong. This seems completely random..
Do you have any idea on how to fix this?
Cheers,
Andrea
This is because of # in URL which identifies the image.
Please refer to this post for further explanation.
Related
Warning: I'm a noob. The little I know comes from fiddling around.
I maintain a hobby website of images created in bootstrap 3 and I would like to have a responsive rollover image that also links to the full size image.
I have been able to complete the responsive rollover part, but I can't figure out how to add the link to display the full image.
Here's what I have so far:
https://jsfiddle.net/11cmcznn/
HTML:
<div class="rollover-wrapper-1"><div class="rollover-image-1"></div>
I can't post the CSS because I don't have reputation points yet.
Any help would be much appreciated.
Put href before the div and make sure you close the parent div too. Like this
<div class="rollover-wrapper-1"><div class="rollover-image-1"></div></div>
Well I've run into another problem. I have the rollover image working properly including linking to the full size image. But for some reason whenever I add the code to the webpage and the style sheet, somehow the webpage is looking for the style sheet in the wrong place on my website.
I have a style sheet "default.css" that I use for all my webpages. This css sheet is in the root of the website. But for some reason the webpage with the rollover image will not display the image, and when I inspect the element within Chrome it gives me 404 error stating that the default.css is not found in a certain folder on the website. I've never had the default.css in any folder besides the root.
So somehow the webpage is looking for a style sheet in a place where none exists, and I have no idea why.
If I copy the default.css style sheet from the root into the folder it's looking for then the webpage loads properly, but I don't want to have to maintain two identical style sheets. I just don't know how the style sheet got attached to the webpage.
I'm sorry for the vagueness of this problem, but I don't know enough to make a more informed question.
I use the following page as example:
http://isbndb.com/book/the_new_public_health_second_edition
You can see the box "Loading Prices" when you first load the page, and it will change afterwards to show relevant information on the same box as below:
I am trying to building some price comparison engine using django, and I think I need to inform user that the page is now loading, rather than letting user to wait in front of a blank screen.
Can anyone tell me know to do it?
In your HTML
<div id="lazyLoad">
<img src="\path\to\loading.gif">
</div>
On successful ajax call replace the innerHTML of #lazyLoad with the formatted result.
I have added on my web-sire some social buttons. Tweet share button works just fine but I have some issues with facebook and google+ button.
In fact I added this away the buttons : (the buttons are supposed to link to a web page through a parameter $URL
<div class="g-plusone" data-size="medium" href="{$URL}"></div>
and for facebook
<iframe src="http://www.facebook.com/plugins/like.php?href={$URL}&layout=button_count&show_faces=false&width=90&action=like&font=verdana&colorscheme=light" allowtransparency="true" style="border: medium none; overflow: hidden; width: 90px; height: 21px;" frameborder="0" scrolling="no"></iframe>
In fact I used iframe because my buttons are wrapped by divs that displays them in grey and color them the expected way on hovering.
The problem I have is that when clicking on the g+ no box appears, and when I click again, the g+ button displays a red triangle instead and I have a "+1 button errors" message : but I am in none of the case that would explain this kind of message.
When clicking on the facebook-like, I have nothing displayed on my facebook's wall...
Does anybody has an idea how to fix it ?
For the +1 button, I have a few things you can try. Is the actual button itself rendering also or are you getting unexpected behavior when you click it?
If the button isn't rendering, you might be missing the JavaScript library for Google+. The following code should be added to your post before the actual button gets rendered:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
If you are getting unexpected behavior when the button is clicked, you probably are having an issue with the URL parameter. You might be able to get by without passing a URL because the +1 button defaults to the current page. The following example shows the simplest case of rendering the +1 button for the current page:
<g:plusone></g:plusone>
If that correctly renders, you are putting something bad into the URL parameter or have something wrong with the strings in your parameters. For example, check that the strings you're using don't have backticks in the starting or closing quotes as opposed to single quotes.
The +1 documentation will have any additional details that you will need for configuring and customizing the button and its parameters. You can find it here:
https://developers.google.com/+/plugins/+1button/
I have a website where I want to show a facebook like button, which shows the faces.
my FBML looks like this
<fb:like send="false" width="200" show_faces="true" action="like" href="http://www.facebook.com/my-page" colorscheme="lite"></fb:like>
this doesnt show the faces, but if I add a url which is not a FB one, something like
http://mysite.com/somepage/
it shows the faces
any idea?
ok, I think I found the answer after some troubleshooting. The faces will only show for a URL that you either like or you have friends that like it.
Try this in your code and let me know if that works for you --
show-faces="true"
OR
data-show-faces="true"
I found a few similar topics however none specific to my issue. I went to create a like button code, I clicked the create like box, added my link http://www.facebook.com/pages/SpartaPerformancecom/248083571902684 to the URL formated the like button how I want it to appear. Then I opened Dreamweaver and pasted the Facebook code in the Dreamweaver HTML code where I want the Like button to appear but I get nothing. Please respond like "coding for dummies" language so I can understand how to solve my issue. Thanks in advance.
Make sure you add <div id="fb-root"></div> somewhere between the <body></body> tags. Their latest like button generator is missing that part.