I am wondering whether it is possible to change the action of a Facebook like button on an Ajax event.
What I am trying to do:
I display an article when the page was loaded. At the end of the article I have a button which loads the next article via Ajax. Additional I have the following Facebook like button:
<fb:like href="http://www.myurl.com" layout="standard" show-faces="true" action="like" id="fblike" />
When I load the next article I put the new URL of the article into the "href"-attribute via Javascript (which works fine), but when I click on the like button the initial article url will be pushed to facebook, and not the new one.
Any ideas?
Thanks a lot.
You don't actually need the iframe version as it is more limited and not as good for performance. All you need to do is use this snippet to re-render the button in the DOM; without a page refresh, the element does not "refresh" otherwise:
FB.XFBML.parse();
See docs here: http://developers.facebook.com/docs/reference/javascript/
You could try the iFrame version instead the XFBML version:
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fexample.com%2Fpage%2Fto%2Flike&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
See here for more infos:
http://developers.facebook.com/docs/reference/plugins/like
Related
This is a bit complicated but I've got an image which uses the Pinterest parameter in its anchor entity, with the Pinterest button appearing elsewhere in the page:
<a id="im_popup" class="cloud-zoom" pi:pinit:media="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fmatchmybag.com%2Fshop%2Fbags%2Fbespoke-clutch%26media=http%3A%2F%2Fmatchmybag.com%2Fimage%2Fcache%2Fdata%2Fbags%2Fdesign-a-bag%2FThe-Clutch%2FCD1_fr_xlsq-467x467.jpg" title="" onclick="" rel="position: 'inside'" href="image/paps/linked/243241_colour_silvercrest.jpg" style="position: relative; display: block;">
The image in the 'media' parameter is not the same as the one in the img entity - just using it for testing for now but will change it to a dynamically set URL later.
When I click on the Pinterest button, the pop-up form appears and contains the correct description text, but the preview image is blank and when I click 'Pin It' in the popup form I get the 'This is not a valid image.' message.
The URL appearing in the Pinterest popup form is as follows:
http://www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fmatchmybag.com%2Fbespoke-clutch&media=http%3A%2F%2Fpinterest.com%2Fpin%2Fcreate%2Fbutton%2F%3Furl%3Dhttp%3A%2F%2Fmatchmybag.com%2Fshop%2Fbags%2Fbespoke-clutch%26media%3Dhttp%3A%2F%2Fmatchmybag.com%2Fimage%2Fcache%2Fdata%2Fbags%2Fdesign-a-bag%2FThe-Clutch%2FCD1_fr_xlsq-467x467.jpg&description=Bespoke%20Clutch&layout=
Can anyone see what the problem is here? I've spent more hours than I'd care to admit to on this and would be so grateful for some pointers. Let me know if you need any more info.
Thanks a lot.
Apparently Pinterest is very strict about showing only images that actually appear on the web site. So maybe that is the issue, right now I cannot see that image on the web site provided in the url parameter (but then the question is quite old already...)
I am new to web development..
i have created views using Entity Framework in MVC3 Razor..
What i have done yet is,
i 1st created model(Clients) and DbContext(ClientDbContext) Classes.
then, i add controller with scaffolfind options
Template: Controller with read/Write actions and View, Using Entity Framework
Model Class: Clients
Data Context Class : ClientDbContext
Views : Razor(CSHTML)
It Creates the controller class and index, Detail, Delete, Delete Views...
After that i modified the index page for search and pagination...
All are working good...
in the index page i have create, edit, delete, detail links...
When i click the links browser loads to that page and working good...
But i need to popup those views when i click the links in the index page...
i don't know how to do this... i studied many articles but i am confused...
Please help me to solve this with an efficient manner...
Thanks in advance...
Creating a model pop-up within a page isn't something that can be done directly with ASP.NET MVC. You could do it yourself using javascript & css but I would strongly recommend using a JS UI framework to do this. jQuery UI has a pop-up modal box, except they call it a dialog.
The docs for jQuery UI's dialog can be found here. Have a look through the examples to see the fine details of how to set it up. But this is the basic flow of what you need to do:
Download the jQuery UI files needed and include them on your page (CSS/JS files)
Take the html from your create/update/delete views and put it on your index page, wrap them in a div with an appropriate id
When the page loads use jquery ui to target your div's you want to be a popup
Things such as the link you want to make a dialog popup is set by passing options to the dialog initialize method, again the exact options and examples can be found on the docs page.
Refer this : http://jqueryui.com/dialog/ to create a jQuery Dialog box.
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
<div id="dialog">
#using(Html.BeginForm()){
#Html.EditorForModel()
<input type='submit' value ='Submit'/>
}
</div>
I'm adding a facebook share button to each post on a Wordpress (Using Facebook Share Button New plugin), it works ok for each post/page except when i'm loading them trough ajax, the result it's a normal Facebook like button but the popup (to write a comment) appears inside the button it is not expanded.
To check go to: http://iwanttobeher.com/ and then click on any face at the bottom of the page, then test the like button and you'll see what happens.
I don't know what to do, i tried to FB.XFBML.parse() after loading the content but the result is the same.
Switching to HTML5 didn't help in our case. What did was to remove the FB object just prior to new content being inserted into the page via Ajax:
delete FB;
wrapper.html(response.data);
We reload full pages via Ajax and so new page content recreates the FB object and re-initializes XFBML anyway. Not sure if this workaround would work if we reloaded only parts of the page though.
The original answer is here.
I've managed to fix it by changing the implementation to HTML5 instead Iframe or XFBML using Facebook's tool to generate like buttons: https://developers.facebook.com/docs/reference/plugins/like/
I am new to AJAX,
I want to have a javascript that will make all the link(include webpage,internal link, external link) load in a lightbox when clicked. Just like Facebook, when you click the photo, it will give you a frame , without redirect you to the photo page.
Overall, I want my user to click on ANY link of my website do not redirect to a new page which need to refresh the whole page.
I want the link to be load in a frame on demand, also know as AJAX right?
Actually I just want to know this technique is called as what?? Any google search term ?? searching queries??
Any recommend article or tutorial to do this?
AJAX: Asynchronous JavaScript and XML. Your example isn't AJAX, but rather it's using JavaScript to do event binding that causes actions to take place in response to events made by the user in the browser.
You could use jQuery to bind an event to all the links of a certain type on a page. The exact implementation will depend on your HTML markup.
If, for example, you have several images wrapped in link tags:
<img src="image1.jpg" />
<img src="image2.jpg" />
You could have jQuery similar to the following (be sure to load jQuery prior to this in the page):
<script>
$('.image_link').click(function(event) {
event.preventDefault(); // stops it from doing normal link action
// and then down here you'd need JS for your lightbox library
});
</script>
Smashing Magazine has an article that might help you: Modal Windows in Modern Web Design.
I'm very new to yii, and I'm trying to integrate the facebook-wall-like style into my post list.
In short, I just want to add a "Load More" with ajax to load more posts at the bottom of the post list.
I know how to write ajax or html, but I don't know how to integrate this style into yii.
I'v tried the zii.widgets.CListView/CDetailView.. but I can't find ways to add ajax.
If there's anyone who knows the how-to, please share it with me.
Thanks!
Take a look at this extension, it is a pager that adds infinite scroll like in twitter - when you get to the bottom of the page it loads more content via ajax. If you prefer to load more only once a button is pressed, i'm sure it's just a matter of overriding the button's onclick event.