Display share buttons with Ajax. Where to put facebook and twitter scripts? - ajax

This is a simple php file that displays a Like and Tweet button.
<? $url = "http://example.com"; $title = "Title";?>
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=247886858583094&xfbml=1"></script><fb:like href="<?=$url?>" send="false" layout="button_count" width="80" show_faces="true" font=""></fb:like>
Tweet<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
My problem is basically that I want to get this file to display in my page via Ajax and it doesn't. It works as a standalone page, just doens't load through ajax.
Why doesn't it work and what can I do to make it work?

Facebook :
http://forum.developers.facebook.net/viewtopic.php?id=68635
Twitter :
http://www.ovaistariq.net/447/how-to-dynamically-create-twitters-tweet-button-and-facebooks-like-button/

Related

How to auto refresh a page on an embedded google form submit

Note upfront: I do not have any experience using scripts but only some basic HTML and PHP skills.
I would like a page on my google site to refresh automatically as soon as the embedded google form was submitted. This to instantly display the embedded and updated google form results after the button is clicked without the visitor having to reload the page manually. (like you would have for any online poll)
My form sheet is updating perfectly but I have not yet found an example or tutorial how to make a page refresh work for the google site with an embedded google form when the submit button is clicked. I hope someone can help me by providing an example on how to make this work. Preferably I would like to use an embedded google form rather than having to create a separate PHP form loading into google forms what could be an alternative. Thanks.
Below the HTML as I can see it on my Google page. I would need a trigger I guess from these embedded forms to refresh the page on submit. I just have no idea on how to get this done.
<div>
<div style="text-align:left">
<div><img src="https://www.google.com/chart?chc=sites&cht=d&chdp=sites&chl=%5B%5BSpreadsheet+form'%3D20'f%5Cv'a%5C%3D0'10'%3D499'0'dim'%5Cbox1'b%5CF6F6F6'fC%5CF6F6F6'eC%5C0'sk'%5C%5B%22test+int+sheet%22'%5D'a%5CV%5C%3D12'f%5C%5DV%5Cta%5C%3D10'%3D0'%3D500'%3D397'dim'%5C%3D10'%3D10'%3D500'%3D397'vdim'%5Cbox1'b%5Cva%5CF6F6F6'fC%5CC8C8C8'eC%5C'a%5C%5Do%5CLauto'f%5C&sig=5VZGSIULBu8sSdf833qiLWVDcx8" data-origsrc="1VACx4d2pJEZlvAezbO9Gnh_nX3nIPwSJ4iCNjEmCiUM" data-type="spreadsheet-form" data-props="align:center;borderTitle:test int sheet;doctype:freebird;height:400;objectTitle:test int sheet;showBorder:false;showBorderTitle:false;wrap:false;" width="500" height="400" style="display:block;margin:5px auto;text-align:center;"></div>
<br>
</div>
<div style="text-align:left"><img src="https://www.google.com/chart?chc=sites&cht=d&chdp=sites&chl=%5B%5BGoogle+Gadget'%3D20'f%5Cv'a%5C%3D0'10'%3D499'0'dim'%5Cbox1'b%5CF6F6F6'fC%5CF6F6F6'eC%5C0'sk'%5C%5B%22Include+gadget+(iframe)%22'%5D'a%5CV%5C%3D12'f%5C%5DV%5Cta%5C%3D10'%3D0'%3D500'%3D397'dim'%5C%3D10'%3D10'%3D500'%3D397'vdim'%5Cbox1'b%5Cva%5CF6F6F6'fC%5CC8C8C8'eC%5C'a%5C%5Do%5CLauto'f%5C&sig=t6_Deqv8rgMQCB28aqz1n9MoVTU" data-igsrc="http://164.gmodules.com/ig/ifr?mid=164&synd=trogedit&url=http%3A%2F%2Fhosting.gmodules.com%2Fig%2Fgadgets%2Ffile%2F106581606564100174314%2Fiframe.xml&up_iframeURL=https%3A%2F%2Fdocs.google.com%2Fspreadsheets%2Fd%2F1g2cGeavUciTy6po7_DXPXMNqC1fqTTROHRoTnsafFfM%2Fpubhtml%3Fgid%3D754672963%26single%3Dtrue&up_scroll=no&h=400&w=100%25" data-type="ggs-gadget" data-props="align:center;borderTitle:Include gadget (iframe);height:400;igsrc:http#58//164.gmodules.com/ig/ifr?mid=164&synd=trogedit&url=http%3A%2F%2Fhosting.gmodules.com%2Fig%2Fgadgets%2Ffile%2F106581606564100174314%2Fiframe.xml&up_iframeURL=https%3A%2F%2Fdocs.google.com%2Fspreadsheets%2Fd%2F1g2cGeavUciTy6po7_DXPXMNqC1fqTTROHRoTnsafFfM%2Fpubhtml%3Fgid%3D754672963%26single%3Dtrue&up_scroll=no&h=400&w=100%25;mid:164;scrolling:no;showBorder:false;showBorderTitle:null;spec:http#58//hosting.gmodules.com/ig/gadgets/file/106581606564100174314/iframe.xml;up_iframeURL:https#58//docs.google.com/spreadsheets/d/1g2cGeavUciTy6po7_DXPXMNqC1fqTTROHRoTnsafFfM/pubhtml?gid=754672963&single=true;up_scroll:no;view:default;width:100%;wrap:false;" width="500" height="400" style="display:block;margin:5px auto;text-align:center;" class="igm"></div>
<div style="text-align:left"><br>
</div>
<div style="text-align:center">
<div></div>
<br>
</div>
<div style="text-align:left">
<div style="text-align:center"><br>
</div>
<div style="text-align:center"><br>
</div>
<br>
</div>
</div>
I'm sorry to be the annunciator of a such bad news but that's impossible.
As your code show, you are actually using a google Site to display your google form. The line:
<img src="https://www.google.com/chart?chc=sites&cht=d&...
IS the way google tell you there is a google form in this page when you hit the button to get the source code.
In other words: google don't let you put whatever you want in a google site. It's impossible to add some JS code that will be fired when the user submit the form.
Even if you host your form in something else than a google Site, you won't have this ability, as the form himself will be displayed in an iframe that can't be modified by external scripts.
This is an hard limitation of Google Form, the only workaround that you may use is to write to the user in the confirmation message of the form that he now need to reload the page or go to an other link.

Trigger click on link on jquery mobile not working

I tried triggering a link via .trigger() function but is not working
<a data-role="button" id="redirectprofile_btn" href="profile.html" rel="external" style="display:block;">Profile</a>
Once i click the link manually, it will display the profile page (profile.html, with its own css and js) but if i use
$("#redirectprofile_btn").click() or $("#redirectprofile_btn").trigger('click'),
it wont redirect.
Im new to jquerymobile, any help would really be great.
Thanks
Use event.prevent default() followed by event.stopImmediatePropogation then changePage to the links href attr value.

Generate Pinterest Share Button That Specifies URL

I am trying to create a "pinterest share" button, but am running into a snag.
Currently, I have the pinterest button (generated from their Widget Builder) appearing in a Lightbox. (For certain reasons, it must appear this way.)
The issue is the Lightbox code has direct linking on it, so the code for the lightbox window is something like: www.domain.com/#/social/4
Pinterest is picking up that URL (which has no images since it's just the lightbox) instead of the URL for the main page (www.domain.com).
Does anyone know how I can specify the exact URL to share via the pinterest button?
I have read some posts that said doing this would work:
<img src="//assets.pinterest.com/images/PinExt.png" alt="Pin it" / > <script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>
However, specifying the URL does not seem to work at all. It appears to be totally ignored and has no impact.
Any ideas?
Thanks in advance!
You can use a standard link and specify all the data in the parameters:
<a href="http://www.pinterest.com/pin/create/button/
?url=http%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F
&media=http%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg
&description=Next%20stop%3A%20Pinterest"
data-pin-do="buttonPin"
data-pin-config="above">
<img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" />
</a>
Source: http://developers.pinterest.com/pin_it/
You can try using structured meta data and Rich Pins.

Copying AdSense on page using jQuery - is it against AdSense rules?

I need loading Google Adsense Ads with AJAX. I found, that it's not allowed at this time, so I was thinking and invet this:
I normally include Google javascript code into HTML page in DIV with some ID like:
<div id="google_ad">
<script>
google_ad_client = "ca-pub-XXXXXXXXXXXXXXXXXXXX";
google_ad_slot = "XXXXXXXXXXX";
google_ad_width = 300;
google_ad_height = 250;
</script>
<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>
And then, when I'm loading new content via AJAX, I create new DIV with some CLASS and then copy content of into every like this:
$('#content').append($('<div>').load('http://www.foo.com/load.php'), function(){
$('.google_ad').html($('#google_ad').html());
}));
Do you thing that it's ok or it's against Google AdSense rules?
Thank you for your answer.
I am an Adsense publisher since 2006, your ajax trick looks cool. So you mean your full and unaltered Google adsense code is inside the load.php file ?
According to this link (google forum) loading your Adsense code via ajax is same as loading your adsense code via IFRAME.
So to protect your adsense account, put your adsense code naturally.

Using plugin outside of Wordpress pages

I am trying to use lightbox plus plugin for Wordpress which works fine for most of my site.
I have a php page which is used by a jQuery AJAX function to retrieve data in order to paginate a large result set back in wordpress. This page is not part of wordpress.
I have managed to get Wordpress functions to work fine in this php page by using:
define('WP_USE_THEMES', false);
require('/home/love/public_html/dev/wp-blog-header.php');
require('/home/love/public_html/dev/wp-load.php');
However, in this page is an include, and within the included file is a link to an external sheet which is meant to be brought in with a lighbox:
<a class="" rel="lightbox" href="<?php bloginfo('url'); ?>/more-product-info?a=<?php echo $post->ID ?>">
<div id="moreprodinfo">More Info</div>
</a>
This method of retrieving information in a lighbox works ok on most parts of my site, but its just not working on the part that uses AJAX to retrieve the link to the lighbox page.
I assumed it was something to do with plugins not working when the page is not part of Wordpress, but all the Wordpress function have been working so why not plugins? Also my cufon plugin doesnt work on this ajax retrieved page either.
Is it becuase I am using .html javascript function to display the content retrieved by AJAX:
if(pageType == 'prizeHome'){
loading_hide();
$("#tab-prize-home #container").html(msg);
Any help would be appreciated
It looks like a common issue when using ajax to load html content :
You probably call lightbox and cufon when document is ready, which happens only once before your ajax call. You have to call again lightbox and cufon after your ajax call.

Resources