Bergin's Programming Blog

Capture Website Screenshots in PHP with GrabzIt API

2014-12-01T23:42:00.004-08:00

GrabzIt has just launched their screenshot service, which allows developers to easily take screenshots of websites for free using the open source GrabzIt PHP Library. To take a screenshot with GrabzIt you first need to register to get your application key and secret, once done you will be up and running in no time.

You first request a screenshot with the following code:


include("GrabzItClient.class.php"); 
//Create the GrabzItClient class
//Replace "APPLICATION KEY", "APPLICATION SECRET" with the values from your account!
$grabzIt = new GrabzItClient("APPLICATION KEY", "APPLICATION SECRET");
//Take the picture the method will return the unique identifier assigned to this task
$id = $grabzIt->TakePicture("http://www.google.com", "http://www.example.com/GrabzItHandler.php");

Then you accept the resulting screenshot with code similar to this:


include("GrabzItClient.class.php");
 
$message = $_GET["message"];
$customId = $_GET["customid"];
$id = $_GET["id"];
$filename = $_GET["filename"];
 
//Custom id can be used to store user ids or whatever is needed for the later processing of the
//resulting screenshot
 
$grabzIt = new GrabzItClient("APPLICATION KEY", "APPLICATION SECRET");
$result = $grabzIt->GetPicture($id);
 
if (!$result)
{
    return;
}
 
//Ensure that the application has the correct rights for this directory.
file_put_contents("images" . DIRECTORY_SEPARATOR . $filename, $result);

Remember to replace APPLICATION KEY and APPLICATION SECRET with your actual values.

How to track Downloads on ur Websites

2014-08-27T03:47:00.003-07:00

Probably we all love to know how many times a file on our website is downloaded. You can observe that I track all my downloads whether its templates, icons, buttons or any other blogger resource. This helps me know how popular that particular file is. Many questioned us about the script we use to track our files and today we would share every detail on how we actually track downloads on Blogger.

How To Track Downloads in Blogger?

I use Dstats service for tracking number of downloads. The method is simple. There are two steps which are,
Inside your posts simply paste the code below. Replace PASTE-FILE-LINK-HERE with the link of your file you want readers to download. And replace Image URL OF Download Button with the Image Link of your Download button.

<a href="http://dstats.net/download/PASTE-FILE-LINK-HERE"><img src="Image URL OF Download Button" border="0"/></a>
<p>Downloads:<a href='http://dstats.net/download/PASTE-FILE-LINK-HERE'></a>
<script type='text/javascript' src='http://dstats.net/dstatsjs.php?file=PASTE-FILE-LINK-HERE'></script>
<script type='text/javascript'>document.write(dsCounter);</script></p>

Grab these Download Buttons.

You can use the following Download buttons from dryicons Simply right click an image and select “Copy Image Location” and this will give you the Image URL for the button.

Once you are done, publish your post and see a beautiful Download button with an auto download tracker hanging inside your post.

How To Password Protect Your Post With Password in Blogger

2014-08-27T03:44:00.000-07:00

Whenever we think about security the first words arrives in our mind is “Password Protection”. We are in 21^st century the era of information technology, now days almost every thing has highest security i.e. online communities, files, documents and etc. Security plays vital role and have great significance when it comes to the personal matters and complex things. If the entire world is getting protected so why do we bloggers left behind.

An extremely powerful and useful script for blogger Blogspot blogs has been introduced by well known blog vincentcheung This script is capable of hiding what ever text you want in a form of encrypted code which can be uncovered if your users know the password to see the hidden text. Currently it is the most useful and secured method of protecting our post which I personally liked a lot. The hidden text is not easy to crack so it remains hidden from un-welcomed visitors. And according to the creator even he cannot decrypt (View) the hidden text except the person who knows the password. The whole systems works like a security lock which will only operate if we have the key to unlock so Today we will Password Protect our Bloggers Posts.

I know you would love to see the live demo that how the whole process works so before we spin our fingers over the tutorial first look at the instant preview

Adding JavaScript To Blogger Blogs:

These steps are simple so do as directed

Go To Blogger.com >> Your Blog
Now Select Template >> Edit HTML
Now Press Proceed >> And Search For

]]></b:skin>

And Now just below it paste the following code

<script type="text/javascript" src="http://www.vincentcheung.ca/jsencryption/jsencryption.js"></script>

How To Password Protect Our Post in Blogger

Now it is up to us whatever we wish to show images, text, videos, or any thing to only preferred visitors. So to password protect a certain content of your post simply go to Blogger.com>> Create Post and once you are finished do as directed

Step #1. Now Switch to HTML mode and copy all the code that is present there as shown in the image below

Step #2. Now we will go to Encryption Page. On this page you will be able to see four boxes

One with yellow color is called Key Box.
One with green color is called Plain Text Box
One with red color is called Cipher Text Box.
And one with blue color is called HTML Code Box. But we are only interested in Key box, Plain Text Box and Html Box. so do as follows.

Enter your desirable password in Key box.

Now we will Paste the code into Plain Text Box which we copied from Blogger post editor.

And Now after Pasting the code Hit Encrypt button present below Plain Text Box

After Pressing Encrypt Button COPY the code from the HTML CODE box

The Html Code which you copied in the previous step is the same post that you created previously in Blogger but this time you will observe strange illogical characters so don’t worry it is the same post with same images, videos. Now you can use this HTML code in your any posts and instead of seeing the big sum of code your visitors will see a link >> Show Encrypted text.

Step #3. Now after copying the code get back where we were working previously, Blogger >> Create Post>> Now in the Blogger Post Editorunder HTML TAB paste the HTML code which your copied earlier. You can write anything instead of this text >> Show Encrypted text But make sure you do all the changes under HTML TAB

So That's how we can password protect our post in Blogger. This is a new feature which we discovered I hope you will enjoy this newly introduced function. Till then Peace, Blessings, And Happy Protecting

4 Ways to Optimize URLs Articles Blog

2014-08-27T03:41:00.003-07:00

4 Ways to Optimize URLs Articles Blog - Before you write a new article, be sure to check out the URL of the article prior to publishing the article.

Method # 1 - Setting Permalink.

This is what you need to do before publishing your new articles. Permalink settings to be made like the image above (Blogspot).

Method # 2 - Long URL.

Shorter URLs tend to give better effect to the search engines. To shorten the URL, with permalink settings as above. In the URL section, I suggest not too long.

Method # 3 - Keyword in URL.

To optimize the URL, the URL appended to the article advised to target keywords. And this is also recommended by many bloggers predecessors.

Method # 4 - The word separator in URLs.

Hyphen (-) separator is the best word in the URL. If my friend to dividing the word using the 'space' it will look strange word in the url buddy, besides Hyphen sign could also use a dot. Maybe my friend all have other ideas.Please share via comments below.

How To Setup A Drop Cap Wrapped Large First Letter In Blogger posts

2014-08-27T03:35:00.002-07:00

The Large first letter in article is very common in magazine and news papers. It will be good idea to setup a drop cap wrapped large first letter in your blogs, especially for news based blogs. I found a lot of open source codes for changing entire article to Drop cap mode but none of them worked perfectly. Here I am posting a code which is not fully automatic. Even though it is like that, it works perfectly.

Follow These Steps

Go to Blogger Edit HTML
Search for ]] >
Just paste the given code just above/below of ]]>

.post large { float:left; color: $headerBgColor; font-size:100px; line-height:80px; padding-top:1px; padding-right:5px; }

Now The half of the job is done, when you need a large letter you can write like below

letter

Just for example, the first sentence of this blog post can write as

The Large first letter in article is very common in magazine and news papers

Customization

Size of the “large letter” can be customized too
You can change the “font;size” and “line-height” for altering size.
Important: You should keep the ratio between “font;size” and “line-height” constant for a good look

How To Setup Custom Control Panel For Blogger?

2014-08-27T03:32:00.002-07:00

As you know Blogger.com is one of the best blogging platform available for free of cost. There are lot of Blogger.com tweaks and hacks are available online. Here I got some fresh and Interesting Blogger hack. The default Dashboard of Blogger is not bad, but it seems nice to change it. In this post I am gonna explain “How to setup custom Control panel(Dashboard) for Blogger.

Custom Control Panel For Blogger

This control panel only change some alignment of Blogger links and looks good too. We can’t add any extra features which Blogger doesn’t provide. As an Introduction the options available in this control panel are featured below.

Blogger’s Homepage link
Create new Post or Page
All Posts
Comments
Edit Layout option
HTML and Template edit option.
Blog settings
Stat Viewer
Logout

After customizing your Control panel, it can be seen on the top of your browser as a horizontal navigation menu.

How To Setup

1.Getting your blog ID is the first step to do our job. Go to your default control panel, there you can see your blog ID in your url box.

Copy and save the Blog ID

2.Go to Template -> Edit HTML

3.Find given code in your template

template

<body expr:class=’"loading" + data:blog.mobileClass’>

If the code is not there then try

<body>

4.Just below the tag paste the given code

<span class=’item-control blog-admin’>
<style>
.control-panel ul{z-index: 20; position: absolute; margin: 0px auto; background-color: #F6F6F6; width: 100%; }
.control-panel ul li{display: inline-block; float: left; padding: 7px 0px;}
.control-panel ul li a {color:#686868;padding: 7px 15px;border-right: 1px solid #E3E3E3;font-weight: bold;font-size: 13px;}
.control-panel a:hover {text-decoration:none; color:#FC8F44;}
</style>
<div class=’control-panel’>
<ul>
<li><a href=’http://www.blogger.com/home’>My Blogs</a></li>
<li><a href=’http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#editor/src=sidebar’>New Post</a></li>
<li><a href=’http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#editor/target=page’>New Page</a></li>
<li><a href=’http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#posts’>All Posts</a></li>
<li><a href=’http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#comments’>Comments</a></li>
<li><a href=’http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#pageelements’>Layout</a></li>
<li><a href=’http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#templatehtml’>Edit HTML</a></li>
<li><a href=’#’ onclick=’location.reload(true); return false;’>Refresh</a></li>
<li><a href=’/’ target=’_blank’>New Tab</a></li>
<li><a href=’http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#basicsettings’>Settings</a></li>
<li><a href=’http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#overviewstats’>Stats</a></li>
<li><a href=’http://www.blogger.com/logout.g’>Logout</a></li>
</ul>
</div>
</span>

6. Replace the XXXXXXXXXXXXX with your blog ID

7.Save Template

Check your blog, you can see a control panel above your blog just like WordPress. Enjoy all features of Blogger without exiting your blog home page.

Redirect To A Web Address With Facebook Like Button

2014-07-26T01:47:00.003-07:00

Learn how to redirect anyone with a facebook like button.For example,if you have any freebies to give or any useful source page then you can use this hack to redirect to custom url in exchange with a like to your facebook page.

MAKE A FACEBOOK LIKE REDIRECT BUTTON

➨Paste the code given below just above </body>

    <script type='text/javascript'>
    window.fbAsyncInit = functionundefined) {

    //change to your facebook app id
    FB.initundefined{
    appId: & #39;YOURAPPID&# 39;, status: true,
    cookie: true,
    xfbml: true
    });

    FB.Canvas.setSizeundefined{
    width: 520,
    height: 1500
    });

    FB.Event.subscribeundefined & #39;edge.create&# 39;,

    functionundefinedresponse) {

    // change pagetoredirectto
    window.location = & quot;
    RedirectURL & quot;;

    }

    );

    };

    undefinedfunctionundefined) {

    var e = document.createElementundefined & #39;script&# 39;);
    e.async = true;

    e.src = document.location.protocol +

    & #39;//connect.facebook.net/en_US/all.js&# 39;;

    document.getElementByIdundefined & #39;fb-root&# 39;).appendChildundefinede);

    }undefined));
    </script>

SAVE YOUR TEMPLATE!

➨Now wherever you want button to appear,just paste the code given below.

<div id="fb-root"></div>
<fb:like href="FacebookPageURL" send="false" width="450" show_faces="false" font=""></fb:like>

CUSTOMIZATIONS

➨In first code snippet replace RedirectURL with the destination url and in second code snippet replace FacebookPageURL with your facebook page url.