I have a prettyPhoto problem; Twitter button shows ok but Facebook won't. Any advice?
Check example here
Here is the pretty photo code part for social buttons:
social_tools: '<div class="twitter">Tweet<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div><div class="facebook"><iframe src="http://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></div>' /* html or false to disable */
}, pp_settings);
And in the prettyPhoto.css
.pp_social{float:left;margin:0}
.pp_social .facebook{float:left;margin-left:5px;overflow:hidden;width:55px}
.pp_social .twitter{float:left}
I want to guess that it is in fact there but the twitter icon is covering it. try moving the facebook class more to the right, or align it to the left.
Related
I am making phonegap application using Onsen-UI. In that,I made a signup page. Now whenever I am trying to scroll the screen, whole body of page is scrolling. I want a particular division in a body that should scroll only. I have app Logo above the signup page and Logo is in the body part. So that shouldn't be scrolled. Only List div should be scrolled.
You can try using the <ons-scroller> directive:
<ons-scroller style="height: 200px">
<p>I am scrollable</p>
</ons-scroller>
I made a simple example: http://codepen.io/argelius/pen/dPeKOB
This option works to me:
<ons-page>
Toolbar here
<div class="background"></div>
<div class="content">
Scrollable content here
</div>
Fixed content here
</ons-page>
from: https://onsen.io/v2/api/js/ons-page.html
I used the below code to get the Like button of Facebook. Now the things is, I would like to change the size of the Like button that is rendered.
I tried the width attribute which not not working at all. And I tried to override the CSS class that's used for the below code by facebook. But overriding the CSS class is also not working as well.
So tell me how can I increase the height and width of the Like button.
<div class="fb-like" data-href="http://www.xxxxx.com" data-send="true" data-width="450" data-show-faces="true"></div>
Or you could target the iframe with CSS and scale it by using CSS3. Something like this:
#fbiframe
{
transform: scale(1.5);
-ms-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
-moz-transform: scale(1.5);
transform-origin: top left;
-ms-transform-origin: top left;
-webkit-transform-origin: top left;
-moz-transform-origin: top left;
-webkit-transform-origin: top left;
}
Here's an example http://www.tinydesign.co.uk/like/
Facebook Like buttons are rendered in an iFrame by the Javascript snipped they provide, that iFrame is hosted by Facebook and the styles cannot be overridden.
Quite rightly so.... If you were able to change the size or style of a Like Button then we would see HUGE, bright red, flashing like buttons all over the internet - that would be awful. They're designed to be discreet, recognisable and non-obtrusive.
You can't change the style of this kind of Facebook buttons, but you can create your own ones if you use the JavaScript OpenGraph SDK, in this way you can use a div (with custom information) or use an image, basically customize it however you want it. The downside is that is not as straight forward as using the Facebook generated buttons, and that you require an App Id and that the user gives you some permissions, but aside of that you can use them as you please.
Create div class for iframe
<div class='like-btn'>
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width=105&layout=button_count&action=like&show_faces=false&share=false&height=35&appId=422608707941592" width="105" height="35" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</div>
now add this CSS
.like-btn iframe{margin:0 auto;float;none;border-radius:3px;display:block;max-width:105px;padding-top:2px;padding-left:2px;box-shadow:2px 2px 0px #222;height:35px;border:6px solid #3D58A4 !important;background: #3D58A4}
Result:
Facebook Like Demo
If you don't want button at center, you can use float insteed of margin
I posted the following in my blogger page to add individual Facebook "likes" to each post -
<script>
document.write('<iframe src="http://www.facebook.com/plugins/like.php?href=<data:post.url/>&layout=standard&show_faces=false&width=380&action=like&font=trebuchet+ms&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:25px"></iframe>');
</script>
After clicking "like" in specific post, such story will also appear on the timeline of the one who clicked "like". However, the thumbnail is not working.
http://img.photobucket.com/albums/v369/q_quincyluk/fb_like_bug.jpg
How can my pictures in individual posts be shown as thumbnails?
You're probably missing the og:image meta tag on the post which tells Facebook which image to use
Run your page through the debugger at https://developers.facebook.com/tools/debug to see which tags you're missing and/or what Facebook is detecting for each URL.
I'm integrating FB social plugins - Like box and Like buttons (as iframes) - on a web page, but they don't work.
When I click on Like in "Like box", I get "Error" text with link, which displays a message dialog "The page at https://www.facebook.com/provocateur.eu could not be reached.".
JSON response is:
for (;;);{"__ar":1,"payload":{"requires_login":false,"success":false,"already_connected":false,"is_admin":false,"show_error":true,"error_info":{"brief":"Website Inaccessible","full":"The page at https:\/\/www.facebook.com\/provocateur.eu could not be reached.","errorUri":"\/connect\/connect_to_node_error.php?title=Website+Inaccessible&body=The+page+at+https\u00253A\u00252F\u00252Fwww.facebook.com\u00252Fprovocateur.eu+could+not+be+reached.&hash=AQARp73z7huT0Eiu"}}}
When I click on the Like button, the JSON response is:
for (;;);{"__ar":1,"payload":{"requires_login":false,"success":false,"already_connected":false,"is_admin":false,"show_error":true,"error_info":{"brief":"An error occurred.","full":"There was an error liking the page. If you are the page owner, please try running your page through the linter on the Facebook devsite (https:\/\/developers.facebook.com\/tools\/lint\/) and fixing any errors.","errorUri":"\/connect\/connect_to_node_error.php?title=An+error+occurred.&body=There+was+an+error+liking+the+page.+If+you+are+the+page+owner\u00252C+please+try+running+your+page+through+the+linter+on+the+Facebook+devsite+\u002528https\u00253A\u00252F\u00252Fdevelopers.facebook.com\u00252Ftools\u00252Flint\u00252F\u002529+and+fixing+any+errors.&hash=AQAFI_8ieMUGPPxS"}}}
This is the "Like box" iframe code:
<iframe frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:240px; height:70px;" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fprovocateur.eu&width=240&height=70&colorscheme=dark&show_faces=false&border_color&stream=false&header=true&appId=283499041689204"></iframe>
and this is the "Like button" iframe code:
<iframe frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:203px; height:21px;" src="//www.facebook.com/plugins/like.php?href&send=false&layout=button_count&width=203&show_faces=false&action=like&colorscheme=light&font=arial&height=21&appId=283499041689204"></iframe>
The behaviour is the same for admin and non-admin visitors and for any browser. I created application with the same name as FB page with appId 283499041689204. Web page is XHTML transitional valid, and it contains no errors according FB debugger/linter. Formely there was age restriction (17+), but I removed it and for the moment it is accessible for anyone (13+).
URL of web page: http://provocateur.eu/
URL of FB page: in the first error message
Any help appriciated. Thanks in advance.
I want to set up a like box for my client on his website (wordpress/joomla) that works as follows: If Facebook user likes the article it displays so in Facebook (this part I got right) but it also states so on my clients Facebook page.
Is this possible?
To do this, you will need to set the link to the facebook page.
<iframe src="http://www.facebook.com/plugins/like.php?href=YOUR_URL"
scrolling="no" frameborder="0"
style="border:none; width:450px; height:80px"></iframe>
here, paste the url of your facebook page at place of YOUR_URL not the link of your website.
or if you want that when user clicks a single like button, he should be able to link both your facebook page and website, you will need to use javascript.
set 2 iframes, one with the link of your facebook page and another with your webpage link. set 1 one them hidden with css and then set a click event so that when user clicks one like, the other like should also be clicked.
All the best.
<iframe src="http://www.facebook.com/plugins/like.php?href=YOUR_FACEBOOK_PAGE"
scrolling="no" frameborder="0"
style="border:none; width:450px; height:80px;"></iframe>
<iframe src="http://www.facebook.com/plugins/like.php?href=YOUR_WEBPAGE"
scrolling="no" frameborder="0"
style="border:none; visibility:hidden;"></iframe>
if you use jquery, u can use this code along with the above code.
$(document).ready(function(){
$(".connect_widget_like_button").click(function(){
$(".connect_widget_like_button").click();
});
});