Embeding Google calendar with custom calendar colors - php
I've embeded a google calendar displaying multiple calendars in my website, but I want to have the calendars displaying in colors other than the default options.
The request URL contains a color parameter for each calendar, but doesn't seem to accept non default colors. (The rendered colors also don't seem to be the same as these)
Looking at the source; the colors for each event are defined by inline CSS, and do not appear to have class or ID attributes that could be used to style them via a CSS file.
I've tried using PHP to get the html of the calendar and then use string replace to change the colors (based on this answer) which works, except it doesn't change the colors
The PHP file I'm using:
<?php
$content = file_get_contents('https://www.google.com/calendar/embed?showTitle=0&showPrint=0&showTabs=0&showTz=0&height=750&wkst=2&bgcolor=%23FFFFFF&src=1.keswickscouts.org_5d750s21fh55t45nsh4i49co5g%40group.calendar.google.com&color=%23691426&src=1.keswickscouts.org_k8ai784s6meu1eh71fk21etseg%40group.calendar.google.com&color=%23182C57&src=1.keswickscouts.org_4omjhqh48ud1lkigino18dmid0%40group.calendar.google.com&color=%232F6309&src=06illa48gj7en6896jv32cm93c%40group.calendar.google.com&color=%23125A12&src=1.keswickscouts.org_m6mb8idejtptmfkve9gm6latd8%40group.calendar.google.com&color=%236B3304&src=1.keswickscouts.org_5uaafulf65hrc4b64j3bfa6660%40group.calendar.google.com&color=%235229A3&src=1.keswickscouts.org_qudhcb0ii68u6b5mgs2ase200o%40group.calendar.google.com&color=%23B1365F&ctz=Europe%2FLondon');
$content = str_replace('</title>','</title><base href="https://www.google.com/calendar/" />',$content);
$content = str_replace('B5515D','CC9966', $content); //ASU
$content = str_replace('536CA6','099FF', $content); //Beavers
$content = str_replace('7EC225','33CC00', $content); //Cubs
$content = str_replace('125A12','006990', $content); //Eden
$content = str_replace('194D14','999966', $content); //Explorers
$content = str_replace('8C66D9','4D2177', $content); //Group
$content = str_replace('E67399','006666', $content); //Scouts
echo $content;
?>
Any sugestions? Simpler would be better
This is tricky because the Google calendar you link to loads its elements dynamically with javascript so there is nothing to be changed by the potential solution you post.
The HTML-only version of the calendar doesn't have the variety of colours you're looking for, so that won't work either.
Further complications arise because the javascript rebuilds the calendar's body when the user resizes or moves between months. So even if you get the colouring right for the page load, it may not stay the way you want it to.
One solution is to continue to import the calendar to a local page to avoid cross-site restrictions, then get things right on the page load and fight to keep them that way by continuously checking for changes. I'm not sure if there is a more efficient way:
LOCAL CALENDAR PAGE: cal.php
<?php
$content=file_get_contents("https://www.google.com/calendar/embed?showTitle=0&showPrint=0&showTabs=0&showTz=0&height=750&wkst=2&bgcolor=%23FFFFFF&src=1.keswickscouts.org_5d750s21fh55t45nsh4i49co5g%40group.calendar.google.com&color=%23691426&src=1.keswickscouts.org_k8ai784s6meu1eh71fk21etseg%40group.calendar.google.com&color=%23182C57&src=1.keswickscouts.org_4omjhqh48ud1lkigino18dmid0%40group.calendar.google.com&color=%232F6309&src=06illa48gj7en6896jv32cm93c%40group.calendar.google.com&color=%23125A12&src=1.keswickscouts.org_m6mb8idejtptmfkve9gm6latd8%40group.calendar.google.com&color=%236B3304&src=1.keswickscouts.org_5uaafulf65hrc4b64j3bfa6660%40group.calendar.google.com&color=%235229A3&src=1.keswickscouts.org_qudhcb0ii68u6b5mgs2ase200o%40group.calendar.google.com&color=%23B1365F&ctz=Europe%2FLondon");
$content = str_replace('</title>','</title><base href="https://www.google.com/calendar/" />',$content);
print $content;
?>
Calendar Display Page
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script language='javascript'>
var oldhtml;
function swapcolors(oldcolor, newcolor){
console.log("Searching for " + oldcolor);
$('iframe#gcal').contents().find('.rb-n').filter(
function() {
console.log(this);
console.log($(this).css('background-color'));
console.log($(this).css('background-color')==oldcolor);
return $(this).css('background-color')==oldcolor;
}
).css({'background-color': newcolor});
}
function recolor(){
swapcolors('rgb(83, 108, 166)', '#099FF'); //Beavers
swapcolors('rgb(126, 194, 37)', '#000000'); //Cubs 33CC00
swapcolors('rgb(181, 81, 93)', '#CC9966'); //ASU
swapcolors('rgb(18, 90, 18)', '#006990'); //Eden
swapcolors('rgb(25, 77, 20)', '#999966'); //Explorers
swapcolors('rgb(140, 102, 217)', '#4D2177'); //Group
swapcolors('rgb(230, 115, 153)', '#006666'); //Scouts
}
function keepcolored(){
if( $('iframe#gcal').contents()!=oldhtml){
recolor();
oldhtml=$('iframe#gcal').contents();
}
}
$(document).ready(
function() {
$('iframe#gcal').load(recolor);
oldhtml=$('iframe#gcal').contents();
window.setInterval(keepcolored, 700);
}
);
</script>
</head>
<body>
<iframe id="gcal" style="width:100%;height:100%" src="cal.php">
</iframe>
</body>
</html>
Note that find('.rb-n') may need to be adjusted and that background colours are converted to RGB values (ala rgb(230, 115, 153)) before they are returned.
I can suggest you using two arrays an only one str_replace :
$search = array('B5515D', '536CA6', '7EC225');
$replace = array('CC9966', '099FF', '33CC00');
$content = str_replace($search, $replace, $content);
A much more complicated advise would be to use the google calendar API.
Related
Save the contents of manipulated div to a variable and pass to php file
I have tried to use AJAX, but nothing I come up with seems to work correctly. I am creating a menu editor. I echo part of a file using php and manipulate it using javascript/jquery/ajax (I found the code for that here: http://www.prodevtips.com/2010/03/07/jquery-drag-and-drop-to-sort-tree/). Now I need to get the edited contents of the div (which has an unordered list in it) I am echoing and save it to a variable so I can write it to the file again. I couldn't get that resource's code to work so I'm trying to come up with another solution.
If there is a code I can put into the $("#save").click(function(){ }); part of the javascript file, that would work, but the .post doesn't seem to want to work for me. If there is a way to initiate a php preg_match in an onclick, that would be the easiest.
Any help would be greatly appreciated.
The code to get the file contents.
<button id="save">Save</button>
<div id="printOut"></div>
<?php
$header = file_get_contents('../../../yardworks/content_pages/header.html');
preg_match('/<div id="nav">(.*?)<\/div>/si', $header, $list);
$tree = $list[0];
echo $tree;
?>
The code to process the new div and send to php file.
$("#save").click(function(){
$.post('edit-menu-process.php',
{tree: $('#nav').html()},
function(data){$("#printOut").html(data);}
);
});
Everything is working EXCEPT something about my encoding of the passed data is making it not read as html and just plaintext. How do I turn this back into html?
EDIT: I was able to get this to work correctly. I'll make an attempt to switch this over to DOMDocument.
$path = '../../../yardworks/content_pages/header.html';
$menu = htmlentities(stripslashes(utf8_encode($_POST['tree'])), ENT_QUOTES);
$menu = str_replace("<", "<", $menu);
$menu = str_replace(">", ">", $menu);
$divmenu = '<div id="nav">'.$menu.'</div>';
/* Search for div contents in $menu and save to variable */
preg_match('/<div id="nav">(.*?)<\/div>/si', $divmenu, $newmenu);
$savemenu = $newmenu[0];
/* Get file contents */
$header = file_get_contents($path);
/* Find placeholder div in user content and insert slider contents */
$final = preg_replace('/<div id="nav">(.*?)<\/div>/si', $savemenu, $header);
/* Save content to original file */
file_put_contents($path, $final);
?>
Menu has been saved.
To post the contents of a div with ajax:
$.post('/path/to/php', {
my_html: $('#my_div').html()
}, function(data) {
console.log(data);
});
If that's not what you need, then please post some code with your question. It is very vague.
Also, you mention preg_match and html in the same question. I see where this is going and I don't like it. You can't parse [X]HTML with regex. Use a parser instead. Like this: http://php.net/manual/en/class.domdocument.php
How to open a link which was parsed in a div?
My site parses a spanish dictionary and lets you search for more than one word at a time. If you look up "hola" you get the first div). Some words come up with suggestions, like "casa", instead of definitions like "hola":
And what i am looking for is this:
So, i would like to: when you click on the suggestions (like CASAR in the example I posted) to print the result in a div like HOLA. Here is the code used:
$words = array('word0','word-1');
function url_decode($string){
return urldecode(utf8_decode($string));
}
$baseUrl = 'http://lema.rae.es/drae/srv/search?val=';
$cssReplace = <<<EOT
<style type="text/css">
// I changed the style
</style>
</head>
EOT;
$resultIndex = 0;
foreach($words as $word) {
if(!isset($_REQUEST[$word]))
continue;
$contents = file_get_contents($baseUrl . urldecode(utf8_decode($_REQUEST[$word])));
$contents = str_replace('</head>', $cssReplace, $contents);
$contents = preg_replace('/(search?[\d\w]+)/','http://lema.rae.es/drae/srv/search', $contents);
echo "<div style='
//style
", (++$resultIndex) ,"'>", $contents,
"</div>";
}
I have tried with: $contents .= '' . $word . '<br/>'; But it didn't work nor I know really where/how to use it.
Okay, I'll use jQuery for the example because it will be the easiest to get the job done specially if you are new to programming.
NOTE: I DO NOT RECOMMEND USING JQUERY -BEFORE- LEARNING JAVASCRIPT -- DO IT AT YOUR OWN RISK, BUT AT LEAST COME BACK AND LEARN JAVASCRIPT LATER
First, read up on how to download and install jquery here.
Secondly, you will want something a little like this, let's pretend this is your markup.
<div id="wrapper">
<!-- This output div will contain the output of whatever the MAIN
word being displayed is, this is where HOLA would be from your first example -->
<div id="output">
</div>
<!-- This is your suggestions box, assuming all anchor tags in here will result in
a new word being displayed in output -->
<div id="suggestions">
</div>
</div>
<!-- Le javascript -->
<script>
// Standard jQuery stuff, read about it on the jquery documentation
$(function() {
// The below line is a selector, it will select any anchor tag inside the div with 'suggestions' as identifier
$('#suggestions a').click(function(e) {
// First, stop the link going anywhere
e.preventDefault();
// Secondly, we want to replace the content from output with new content, we will use AJAX here
// which you should also read about, basically we set a php page, and send a request to it
// and display the result without refreshing your page
$.ajax({
url: 'phppage.php',
data: { word: 'casar' },
success: function(output) {
// This code here will replace the contents of the output div with the output we brought back from your php page
$('#output').html(output);
}
})
});
})
</script>
Hopefully the comments will shed some light, you need to then set up your php script which will be sent a GET request. (for example, http://some.address.com/phppage.php/?word=casar)
Then you just echo out the output from PHP
<?php
$word = $_GET['word'];
// Connect to some database, get the definitions, and store the results
$result = someDatabaseFunctionThatDoesSomething($word);
echo $result;
?>
Hope this helps, I expect you have a lot of reading to do!
Echoing out JavaScript with nested quotes from a PHP script onto an HTML page?
I've been trying for about two hours to get the following code stored in a PHP string and then echoed out as JavaScript on a webpage:
<div id="reply-box" style="display: block; width:100%;float:right;">
<script type="text/javascript" src="http://example.com/public/js/3rd_party/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
/* Dynamic items */
CKEDITOR.config.IPS_BBCODE = {"acronym":{"id":"8","title":"Acronym","desc":"Allows you to make an acronym that will display a description when moused over","tag":"acronym","useoption":"1","example":"[acronym='Laugh Out Loud']lol[/acronym]","switch_option":"0","menu_option_text":"Enter the description for this acronym (EG: Laugh Out Loud)","menu_content_text":"Enter the acronym (EG: lol)","single_tag":"0","optional_option":"0","image":""},"ads1":{"id":"46","title":"ads1","desc":"","tag":"ads1","useoption":"0","example":"","switch_option":"0","menu_option_text":"","menu_content_text":"","single_tag":"1","optional_option":"0","image":""},"background":{"id":"27","title":"Background-color","desc":"Adds a background color behind the text","tag":"background","useoption":"1","example":"[background=red]Red background behind this text[/background]","switch_option":"0","menu_option_text":"","menu_content_text":"","single_tag":"0","optional_option":"0","image":""},"entry":{"id":"35","title":"Blog Entry Link","desc":"This tag provides an easy way to link to a blog entry.","tag":"entry","useoption":"1","example":"[entry=100]Click me![/entry]","switch_option":"0","menu_option_text":"Entry ID","menu_content_text":"Text to display","single_tag":"0","optional_option":"0","image":""},"blog":{"id":"34","title":"Blog Link","desc":"This tag provides an easy way to link to a blog.","tag":"blog","useoption":"1","example":"[blog=100]Click me![/blog]","switch_option":"0","menu_option_text":"Blog ID","menu_content_text":"Text to display","single_tag":"0","optional_option":"0","image":""},"code":{"id":"13","title":"Code","desc":"Allows you to enter general code","tag":"code","useoption":"0","example":"[code]$text = 'Some long code here';[/code]","switch_option":"0","menu_option_text":"","menu_content_text":"Code","single_tag":"0","optional_option":"0","image":""},"extract":{"id":"33","title":"Extract Blog Entry","desc":"This will allow users to define an extract for an entry. Only this piece of the entry will be displayed on the main blog page and will show up in the RSS feed.","tag":"extract","useoption":"0","example":"[extract]This is an example![/extract]","switch_option":"0","menu_option_text":"","menu_content_text":"Blog entry extract","single_tag":"0","optional_option":"0","image":""},"hr":{"id":"12","title":"Horizontal Rule","desc":"Adds a horizontal rule to separate text","tag":"hr","useoption":"0","example":"[hr]","switch_option":"0","menu_option_text":"","menu_content_text":"","single_tag":"1","optional_option":"0","image":""},"html":{"id":"15","title":"HTML Code","desc":"Allows you to enter formatted/syntax-highlighted HTML code","tag":"html","useoption":"0","example":"[html]<div class='outer'>\n <p>Hello World</p>\n </div>[/html]","switch_option":"0","menu_option_text":"","menu_content_text":"HTML Code","single_tag":"0","optional_option":"0","image":""},"imgr":{"id":"39","title":"Image","desc":"Displays linked images, floating to the right","tag":"imgr","useoption":"0","example":"[imgr]http://www.google.com/intl/en_ALL/images/logo.gif[/imgr]","switch_option":"0","menu_option_text":"","menu_content_text":"","single_tag":"0","optional_option":"0","image":""},"jump":{"id":"45","title":"jump","desc":"","tag":"jump","useoption":"0","example":"","switch_option":"0","menu_option_text":"","menu_content_text":"","single_tag":"0","optional_option":"0","image":""},"media":{"id":"32","title":"Media","desc":"Allows a user to post media content from certain common media sites","tag":"media","useoption":"1","example":"[media]http://www.youtube.com/watch?v=YqqLx-2vUr0[/media]","switch_option":"0","menu_option_text":"Dimensions (Flash Only)","menu_content_text":"Media URL","single_tag":"0","optional_option":"1","image":""},"member":{"id":"31","title":"Member","desc":"Given a member name, a link is automatically generated to the member's profile","tag":"member","useoption":"1","example":"[member=admin] runs this site.","switch_option":"0","menu_option_text":"Member Name","menu_content_text":"","single_tag":"1","optional_option":"0","image":""},"page":{"id":"38","title":"Multi-Page Articles","desc":"This tag can be used to create multi-page articles. Page links are automatically added based on the number of times this tag is used, and the content is hidden until you reach the specified \"page\".","tag":"page","useoption":"0","example":"Content 1\n[page]\nContent 2\n[page]\nContent 3","switch_option":"0","menu_option_text":"","menu_content_text":"","single_tag":"1","optional_option":"0","image":""},"overline":{"id":"42","title":"Overlined Text","desc":"Makes the text overlined","tag":"overline","useoption":"0","example":"[overline]This text is underlined[/overline]","switch_option":"0","menu_option_text":"","menu_content_text":"","single_tag":"0","optional_option":"0","image":""},"php":{"id":"14","title":"PHP Code","desc":"Allows you to enter PHP code into a formatted/highlighted syntax box","tag":"php","useoption":"0","example":"[php]$variable = true;\n\nprint_r($variable);[/php]","switch_option":"0","menu_option_text":"","menu_content_text":"PHP Code","single_tag":"0","optional_option":"0","image":""},"post":{"id":"6","title":"Post Link","desc":"This tag provides an easy way to link to a post.","tag":"post","useoption":"1","example":"[post=1]Click me![/post]","switch_option":"0","menu_option_text":"Enter the Post ID","menu_content_text":"Enter the title for this link","single_tag":"0","optional_option":"0","image":""},"pre":{"id":"43","title":"pre","desc":"","tag":"pre","useoption":"0","example":"","switch_option":"0","menu_option_text":"","menu_content_text":"","single_tag":"0","optional_option":"0","image":""},"spoiler":{"id":"7","title":"Spoiler","desc":"Spoiler tag","tag":"spoiler","useoption":"0","example":"[spoiler]Some hidden text[/spoiler]","switch_option":"0","menu_option_text":"","menu_content_text":"Enter the text to be masked","single_tag":"0","optional_option":"0","image":""},"sql":{"id":"16","title":"SQL Code","desc":"Allows you to enter formatted/syntax-highlighted SQL code","tag":"sql","useoption":"0","example":"[sql]SELECT p.*, t.* FROM posts p LEFT JOIN topics t ON t.tid=p.topic_id WHERE t.tid=7[/sql]","switch_option":"0","menu_option_text":"","menu_content_text":"SQL Commands","single_tag":"0","optional_option":"0","image":""},"tab":{"id":"48","title":"tab","desc":"adds a tab (twelve spaces)","tag":"tab","useoption":"0","example":"[tab]","switch_option":"0","menu_option_text":"","menu_content_text":"","single_tag":"1","optional_option":"0","image":""},"tex":{"id":"41","title":"tex","desc":"LaTeX","tag":"tex","useoption":"0","example":"","switch_option":"0","menu_option_text":"","menu_content_text":"","single_tag":"0","optional_option":"0","image":""},"topic":{"id":"5","title":"Topic Link","desc":"This tag provides an easy way to link to a topic","tag":"topic","useoption":"1","example":"[topic=1]Click me![/topic]","switch_option":"0","menu_option_text":"Enter the topic ID","menu_content_text":"Enter the title for this link","single_tag":"0","optional_option":"0","image":""},"twitter":{"id":"36","title":"Twitter","desc":"A tag to link to a user's twitter account","tag":"twitter","useoption":"0","example":"[twitter]userName[/twitter]","switch_option":"0","menu_option_text":"","menu_content_text":"Twitter Username","single_tag":"0","optional_option":"0","image":"twitter.png"},"xml":{"id":"17","title":"XML Code","desc":"Allows you to enter formatted/syntax-highlighted XML code","tag":"xml","useoption":"0","example":"[xml]<outer>\n <inner>\n <tag param='1'>Test</tag>\n </inner>\n</outer>[/xml]","switch_option":"0","menu_option_text":"","menu_content_text":"XML Code","single_tag":"0","optional_option":"0","image":""}};
CKEDITOR.config.IPS_BBCODE_IMG_URL = "http://example.com/public/style_extra/bbcode_icons";
CKEDITOR.config.IPS_BBCODE_BUTTONS = [];
/* Has to go before config load */
var IPS_smiley_path = "http://example.com/public/style_emoticons/default/";
var IPS_smiles = {"total":20,"count":20,"emoticons":[{"src":"mellow.png","text":":mellow:"},{"src":"dry.png","text":"<_<"},{"src":"smile.png","text":":)"},{"src":"wub.png","text":":wub:"},{"src":"angry.png","text":":angry:"},{"src":"sad.png","text":":("},{"src":"unsure.png","text":":unsure:"},{"src":"wacko.png","text":":wacko:"},{"src":"blink.png","text":":blink:"},{"src":"sleep.png","text":"-_-"},{"src":"rolleyes.gif","text":":rolleyes:"},{"src":"huh.png","text":":huh:"},{"src":"happy.png","text":"^_^"},{"src":"ohmy.png","text":":o"},{"src":"wink.png","text":";)"},{"src":"tongue.png","text":":P"},{"src":"biggrin.png","text":":D"},{"src":"laugh.png","text":":lol:"},{"src":"cool.png","text":"B)"},{"src":"ph34r.png","text":":ph34r:"}]};
var IPS_remove_plugins = [];
var IPS_hide_contextMenu = 0;
var IPS_rclick_contextMenu = 0;
/* Has to go after */
/* Load our configuration */
CKEDITOR.config.customConfig = 'http://example.com/public/js/3rd_party/ckeditor/ips_config.js';
</script>
<input type='hidden' name='isRte' id='isRte_editor_4fe2476d708e8' value='1' />
<textarea id="ipb_editor" name="Post" class='ipsEditor_textarea input_text'></textarea>
<p class='desc ipsPad' style='display: none' id='editor_html_message_editor_4fe2476d708e8'></p>
<script type="text/javascript">
ipb.textEditor.initialize('editor_4fe2476d708e8', { type: 'full',
height: 200,
minimize: 0,
bypassCKEditor: 0,
delayInit: 0,
isHtml: 0,
isRte: 1,
isTypingCallBack: '',
ips_AutoSaveKey: '',
ips_AutoSaveData: [] } );
</script>
</div>
I've tried escaping quotes using several different JavaScript and PHP methods, but no matter what I try I can't get it echoed out without either breaking the page or the editor not working.
Does anyone know of a way to get this code stored in a string in a manner that can be then echoed out onto the page as working JavaScript?
Try: <?php ob_start(); ?> <div id="reply-box" style="display: block; width:100%;float:right;"> <script type="text/javascript" src="http://example.com/public/js/3rd_party/ckeditor/ckeditor.js"></script> <script type="text/javascript"> .... your HTML/Javascript </script> </div> <?php $string = ob_get_contents(); ob_end_clean(); ?> I don't have your javascript libs but it appears to show up fine when I echo out $string. PHP is basically copying all of the display content to a buffer and instead of rendering the page, we copy it to a variable.
$variable = <<<END xxx xxx xxx END; echo $variable; Make sure you have END; on it's own line WITHOUT whitespace before it. Hope have helped!
Dynamic Changes for Webmaster's Code
First of all apologies, if the question title misleads you. Here is what I want to achieve. I want webmasters to come to my site, copy a piece of code(basically it displays an image on the webmasters's website) and then paste it on their website for promotion of my website. I am good till this and have succeeded in doing so. Now, I want the image to have a dynamic rank that will be fetched from my website. So, when webmasters paste the code on their website, the rank displayed on the image(as a text) changes based on my Database setting. Can anyone let me know how this can be achieved..
You can do an iframe as aniruddha suggested or you can also use javascript. See Twitter, Facebook, and Google Calendar on how their various widgets work.
I've provided some very simplified implementations for you to see how they work. But it's probably better to look at the examples mentioned above. Ignore the security issues in my examples here. Just wanted to show how it works on the simplest level.
iFrame Example
Client Code For Iframe Example:
<html>
<head>
</head>
<body>
<h1>User Website Title</h1>
<p>Some random user text</p>
<p>Iframe version here</p>
<!--This is the code that the client would paste in to their website -->
<iframe src="http:/your.domain.com/server_iframe_test.php?user=TestUser" height="30" width="500" scrolling="no" frameBorder="0"></iframe>
<!-- End client iframe code to paste-->
</body>
</html>
On your server, you can have page to use as the source for the iFrame. Here I'm calling mine server_iframe_test.php:
<?php
//Generating a random number to show that page will update on reload
$randomNumber = rand(1, 999);
//In the src of the iframe we will send a get parameter called user to determine which user we should look up
$data = array('user' => $_GET['user'], 'rank' => $randomNumber, 'image' => 'http://url/to/some/image.png');
?>
<!-- This is the output that will be generated in the iframe -->
<div class="widget_wrapper"><?php echo $data['user'] ?>: <?php echo $data['rank'] ?> and <? echo $data['image'] ?></div>
Javascript Example
For the javascript example it is possible to make ajax calls across domains using JSONP. You can read up on how it works here: http://www.ibm.com/developerworks/library/wa-aj-jsonp1/
Here is the client side for the javascript version:
<html>
<head>
<!-- I'm cheating here by including jquery in the head. My test script needs it-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<h1>User Website Title</h1>
<!--Code that user pastes into their page-->
<!--First get the script from your domain-->
<script src="http://your.domain.com/test_widget.js"></script>
<!--This code is also pasted by the client. We use this to set user name and then render the html. Also I added an id to the script tag here to know where to append the html. This is a more of a shortcut.-->
<script id="test_widget_script">
var widget = new testWidget('TestUser');
widget.render();
</script>
<!-- Widget will render html here -->
<!--End Code to Paste-->
<p>Some random user text</p>
</body>
</html>
Here is the server side js script called test_widget.js:
var testWidget = function(user){
var _user = user;
this.render = function() {
//We make a JSONP call here to our php script which generates the data for the user. Note the &callback?. We need to add this to make it a JSONP call.
$.getJSON('http://your.domain.com/test_js.php?user=' + _user + '&callback=?', function(data){
//Append html result after the js tag with the following id
$("#test_widget_script").after('<div class="widget_wrapper">' + _user + ': ' + data.rank + ' and ' + data.image + '</div>');
});
}
}
Here is the php file called test_js.php that will handle the request:
<?php
$randomNumber = rand(1, 999);
$data = array('user' => $_GET['user'], 'rank' => $randomNumber, 'image' => 'http://url/to/some/image.png');
//We need to make the content type javascript
header("Content-type: text/javascript");
?>
<?php //Here we take the name of the callback passed as a GET parameter and use it as a function to pass in our json data. We don't call the function in php, but when the text gets returned, jQuery knows how to handle the response. ?>
<?php echo $_GET['callback'] ?>(<?php echo json_encode($data); ?>);
I think a iframe is required with src of your server side script page which will fetch the rendered code with rank over the image from your server. The purpose of the iframe will be to render the whole html.
Modify the code from here http://php.net/manual/en/function.imagettftext.php to make an image with your rank in it. Here is tested example based on that code, note you need GD and truetype for this. All you need do is send then a link and use a get variable to set which user so you can get the right ranking back from your DB. I won't code that part. // Create the image $im = imagecreatetruecolor(400, 30); // Create some colors $white = imagecolorallocate($im, 255, 255, 255); $grey = imagecolorallocate($im, 128, 128, 128); $black = imagecolorallocate($im, 0, 0, 0); imagefilledrectangle($im, 0, 0, 399, 29, $white); // The text to draw (your ranking) $text = '21'; // <== change this as you need over time // Replace path by your own font path $font = 'arial.ttf'; // Add some shadow to the text imagettftext($im, 20, 0, 11, 21, $grey, $font, $text); // Add the text imagettftext($im, 20, 0, 10, 20, $black, $font, $text); // Using imagepng() results in clearer text compared with imagejpeg() imagepng($im); imagedestroy($im); ?>
Using embed.ly to only embed certain links
I'm using embed.ly to embed links when a user types in [embed=LINK]. I'm using the jQuery embed.ly plugin.
I only want links that are tagged as embed, to be embedded:
For example if there are two links:
http://www.youtube.com/watch?v=7aPGa9Gqj2c&feature=related
and
[embed=http://www.youtube.com/watch?v=7aPGa9Gqj2c&feature=related]
I only want the second link to be embedded, and the first one to appear as a link.
I use the following code to find all Embed tags:
if (preg_match_all('/\[Embed=([^\]]+)\]/i', $input['body'], $matches, PREG_SET_ORDER))
{
$get_embedly = true;
foreach ($matches as $match)
{
if (preg_match($embedly_re, $match[1])) // $embedly_re = list of sites allowed
{
$input['body'] = str_replace($match[0], '> '. "$match[1]", $input['body']);
}
}
}
I use jQuery and embedly in the header:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="js/embedly/jquery.embedly.js"></script>
Do you have any suggestions as to how I should go about this? Cheers.
You are 98% of the way there. There are just a couple things you should add/change and you will be set.
Change line 9 of your PHP code to add a class embedly:
$input['body'] = str_replace($match[0], '> '. "<a class=\"embedly\" href=\"$match[1]\">$match[1]</a>", $input['body']);
Then use the class we just added to tell Embedly jQuery what <a> tags to embed.
$('a.embedly').embedly(
{maxWidth: 500,
method: "replace"});
Done.