News Article Tools (digg, delicious, stumbleupon...) User Defined Tag
Posted: Mon May 21, 2007 9:05 am
Hi all,
Been scratching my head and googling all night to put this together (I have no PHP knowledge at all) and have finally got it working.
Thought I'd post it here for comments and improvements and if people think it's useful I'll try and add it to the wiki.
The tag is called 'news_tools' and is used in your news detail template to output a list of icons which send your article (url,title & summary as needed) to the selected news site. Examples of some of these sites are http://del.icio.us/, http://www.stumbleupon.com/ and http://digg.com/ but there are lots of others.
Below is what this could look like.
To create the UDT, do the following:
1. Create a new user defined tag called 'news_tools' or whatever you prefer.
2. Copy and paste in the following code:
3. Save your tag.
4. Add the tag to your news detail template wherever you'd like the list to appear using '{news_tools}'
5. Add the following CSS to your existing stylesheets or attach it as a new one:
6. And finally, add the following icon images (right click > save image as) to the correct path in the css above:
Et voila, everything should be gravy
I've cut this all out of the site I'm working on, so if I've forgotten to include anything, just shout.
Afew things to note:
Big thanks to samalah and calguy for their previous posts which I took bits from and which pointed me in the right direction (TOPIC: Send to friend button/ link & TOPIC: working with smarty templates
I'm no expert at php or smarty, so if anyone can suggest any improvements, see anything where I've gone wrong or gets stuck, please let me know.
Making links open in new windows using javascript:
1. Copy and paste the following code into a plain text document and name it 'domFunction-min.js'
2. Copy and paste the following code into a plain text document and name it 'newwindow.js'
3. FTP the two *.js files you've just created to your assets folder, or somewhere suitable on your server (I use ROOT/_assets/js/)
4. Include the two files between the tags of your templates using the following html:
5. Add the following css to your stylesheet:
And that's it. All the links with the class 'newwindow' will automatically open in a new window.
Phewf, sorry if that was abit long winded. Again, any suggestions or criticisms feel free.
Enjoy
M
Been scratching my head and googling all night to put this together (I have no PHP knowledge at all) and have finally got it working.
Thought I'd post it here for comments and improvements and if people think it's useful I'll try and add it to the wiki.
The tag is called 'news_tools' and is used in your news detail template to output a list of icons which send your article (url,title & summary as needed) to the selected news site. Examples of some of these sites are http://del.icio.us/, http://www.stumbleupon.com/ and http://digg.com/ but there are lots of others.
Below is what this could look like.
To create the UDT, do the following:
1. Create a new user defined tag called 'news_tools' or whatever you prefer.
2. Copy and paste in the following code:
Code: Select all
function curPageURL() {
$pageURL = 'http';
if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
$pageURL .= "://";
if ($_SERVER["SERVER_PORT"] != "80") {
$pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
} else {
$pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
}
return $pageURL;
}
$entry = $smarty->get_template_vars('entry');
$url = curPageURL();
$summary = urlencode(strip_tags($entry->summary));
$title = urlencode(strip_tags($entry->title));
echo "<div class='toolbar'>
<ul class='tools'>
<li class='first'><a class='rss newwindow' title='View RSS feed' href='http://evokeshop.com/feed/'>View RSS Feed</a></li>
<li><a class='delicious newwindow' title='Send to del.icio.us' href='http://del.icio.us/post?url=$url&title=$title¬es=$summary'>Send to del.icio.us</a></li>
<li><a class='stumble newwindow' title='Send to stumbleupon' href='http://www.stumbleupon.com/refer.php?url=$url&title=$title'>Send to stumbleupon</a></li>
<li><a class='blinklist newwindow' title='Send to blinklist' href='http://blinklist.com/index.php?Action=Blink/addblink.php&url=$url&Title=$title'>Send to blinklist</a></li>
<li><a class='digg newwindow' title='Send to digg' href='http://digg.com/submit?phase=2&url=$url'>Send to digg</a></li>
<li><a class='fark newwindow' title='Send to fark' href='http://cgi.fark.com/cgi/fark/edit.pl?new_url=$url&new_comment=$title'>Send to fark</a></li>
<li><a class='furl newwindow' title='Send to furl' href='http://furl.net/storeIt.jsp?t=$title&u=$url'>Send to furl</a></li>
<li><a class='magnolia newwindow' title='Send to ma.gnolia' href='http://ma.gnolia.com/beta/bookmarklet/add?url=$url&title=$title&description=$summary'>Send to magnolia</a></li>
<li><a class='newsvine newwindow' title='Send to newsvine' href='http://www.newsvine.com/_tools/seed&save?u=$url&h=$title'>Send to newsvine</a></li>
<li><a class='reddit newwindow' title='Send to reddit' href='http://reddit.com/submit?url=$url&title=$title'>Send to reddit</a></li>
<li><a class='simpy newwindow' title='Send to simpy' href='http://www.simpy.com/simpy/LinkAdd.do?href=$url&title=$title'>Send to simpy</a></li>
<li><a class='spurl newwindow' title='Send to spurl' href='http://www.spurl.net/spurl.php?url=$url&title=$title'>Send to spurl</a></li>
<li class='last newwindow' ><a class='yahoo' title='Send to yahoo' href='http://myweb2.search.yahoo.com/myresults/bookmarklet?u=$url&t=$title'>Send to yahoo</a></li>
</ul>
</div>";
4. Add the tag to your news detail template wherever you'd like the list to appear using '{news_tools}'
5. Add the following CSS to your existing stylesheets or attach it as a new one:
Code: Select all
/* SECTION: news toolbar */
div.toolbar { float: left; padding-top: 20px; }
ul.tools { float: left; }
ul.tools li { float: left; padding-right: 5px; }
ul.tools li a { font-size: 0; text-indent: -99999em; display: block; width: 14px; height: 14px; }
ul.tools li a { background: url("images/icons/imgBGicon_rss.png") top left no-repeat; }
ul.tools li a:hover,ul.tools li a:focus { background-position: top right; }
ul.tools li a.rss { background-image: url("images/icons/imgBGicon_rss.png"); }
ul.tools li a.delicious { background-image: url("images/icons/imgBGicon_delicious.png"); }
ul.tools li a.blinklist { background-image: url("images/icons/imgBGicon_blinklist.png"); }
ul.tools li a.stumble { background-image: url("images/icons/imgBGicon_stumble.png"); }
ul.tools li a.digg { background-image: url("images/icons/imgBGicon_digg.png"); }
ul.tools li a.fark { background-image: url("images/icons/imgBGicon_fark.png"); }
ul.tools li a.furl { background-image: url("images/icons/imgBGicon_furl.png"); }
ul.tools li a.magnolia { background-image: url("images/icons/imgBGicon_magnolia.png"); }
ul.tools li a.newsvine { background-image: url("images/icons/imgBGicon_newsvine.png"); }
ul.tools li a.reddit { background-image: url("images/icons/imgBGicon_reddit.png"); }
ul.tools li a.simpy { background-image: url("images/icons/imgBGicon_simpy.png"); }
ul.tools li a.spurl { background-image: url("images/icons/imgBGicon_spurl.png"); }
ul.tools li a.yahoo { background-image: url("images/icons/imgBGicon_yahoo.png"); }
Et voila, everything should be gravy
I've cut this all out of the site I'm working on, so if I've forgotten to include anything, just shout.
Afew things to note:
- You can put the icons anywhere you like, but the paths in the css must be changed. Or you could use your own css & styles.
- You don't have to use the links I've set out, there are others like technorati you may need. You can add & remove list items from the tag, find out how to submit links to sites using query strings and add in the correct variable ($url, $title, $summary)
[li]If you can, it's best to have the links open a new window or tab. For valid xhtml, you should no longer use the 'target' attribute. New windows should be opened using javascript. I'll post this below for anyone who needs it.
Big thanks to samalah and calguy for their previous posts which I took bits from and which pointed me in the right direction (TOPIC: Send to friend button/ link & TOPIC: working with smarty templates
I'm no expert at php or smarty, so if anyone can suggest any improvements, see anything where I've gone wrong or gets stuck, please let me know.
Making links open in new windows using javascript:
1. Copy and paste the following code into a plain text document and name it 'domFunction-min.js'
Code: Select all
function domFunction(f,a)
{var n=0;var t=setInterval(function()
{var c=true;n++;if(typeof document.getElementsByTagName!='undefined'&&(document.getElementsByTagName('body')[0]!=null||document.body!=null))
{c=false;if(typeof a=='object')
{for(var i in a)
{if
((a[i]=='id'&&document.getElementById(i)==null)||(a[i]=='tag'&&document.getElementsByTagName(i).length<1))
{c=true;break;}}}
if(!c){f();clearInterval(t);}}
if(n>=60)
{clearInterval(t);}},250);};
Code: Select all
var init = new domFunction(function()
{
if (!document.getElementsByTagName) return false;
var links=document.getElementsByTagName("a");
for (var i=0; i < links.length; i++) {
if (hasClass(links[i],"newwindow")) {
var span = document.createElement("span");
var txt = document.createTextNode("Opens in new window");
span.appendChild(txt);
links[i].appendChild(span);
links[i].onclick=function() {
window.open(this.href, "");
return false;
}
}
}
});
var hasClass = function(element,cName) {
return new RegExp('\\b'+cName+'\\b').test(element.className);
}
4. Include the two files between the tags of your templates using the following html:
Code: Select all
<__script__ src="_assets/js/domFunction-min.js" type="text/javascript"></__script>
<__script__ src="_assets/js/newwindow.js" type="text/javascript"></__script>
Code: Select all
div.toolbar a.newwindow span { font-size: 0; text-indent: -99999em; line-height: 0; padding: 0; }
Phewf, sorry if that was abit long winded. Again, any suggestions or criticisms feel free.
Enjoy
M