How To Add Short URLs To Your Blogger Posts with Bit.ly
Rabu, 10 November 2010
0
komentar
Having a Shorter Version of your Blog Post’s URL is much useful especially when sharing links with others. For example Take a look at this Link http://bit.ly/aJMJNI . If you visit that link, you will end up right back here. This URL shortening was done with the Help of the Bit.ly API. Bit.ly is one of the most reliable URL shortening services on the Web. Wordpress has got its own URL shortener namely WP.me. If you are interested in providing Short Sharable URLs of your Blogger Posts to your readers, then read on. Demo is present on the post page.
Template Tweaking to Add the Short URLs
- Login to your Blogger Dashboard and navigate to Design > Edit HTML
- Click on the Check Box which says “Expand Widget Templates.
- Locate
and add the following JavaScript Snippet just above that</head>
<script charset='utf-8' src='http://bit.ly/javascript-api.js?version=latest&login=tweettrackjs&apiKey=R_7e9987b2fd13d7e4e881f9cbb168f523' type='text/javascript'/>
<script src='http://blogger-plugins.googlecode.com/files/bloggerplugins.org.bit.ly.short.url.generator.js' type='text/javascript'/> - Now Locate
Or if that is not there then find<p class='post-footer-line post-footer-line-3'>
Or if that is not there then find<div class='post-footer-line post-footer-line-3'>
and place the following code just below any of these lines[whichever is present in your template].<data:post.body/>
<div id='bp_shorturl'>
<form expr:id='"bp_short_holder_" + data:post.id'/></div>
<script type='text/javascript'>
Bloggerplugins_shortener.init("bp_short_holder_<data:post.id/>","<data:post.url/>")
</script>
Optional Tweaks
1.Styling the Share LinkLocate the following line in your template
and just above that line add]]></b:skin>
and save.#bp_shorturl {color:#666;font-size:11px}#bp_shorturl input {color:#999;border:inset 1px #CDCDCD;padding:1px 5px;}
2. Display the Short Link on Post Pages Only
If you want to restrict the Short URLs to your post pages, then wrap the codes mentioned in Steps 1 and 4 within Conditional tags like :
and<b:if cond='data:blog.pageType == "item"'>
<script charset='utf-8' src='http://bit.ly/javascript-api.js?version=latest&login=tweettrackjs&apiKey=R_7e9987b2fd13d7e4e881f9cbb168f523' type='text/javascript'/><script src='http://blogger-plugins.googlecode.com/files/bloggerplugins.org.bit.ly.short.url.generator.js' type='text/javascript'/></b:if>
3. If you have your own Bit.Ly Login and API key, then you can replace them in the code of Step 1(tweettrackjs and R_7e9987b2fd13d7e4e881f9cbb168f523). Its free to signup and it is advised to use your own login and API because too many API calls on the same login can create an undefined error<b:if cond='data:blog.pageType == "item"'>
<div id='bp_shorturl'><form expr:id='"bp_short_holder_" + data:post.id'/></div><script type='text/javascript'>Bloggerplugins_shortener.init("bp_short_holder_<data:post.id/>","<data:post.url/>")</script></b:if>
0 komentar:
Posting Komentar