ReTweet
Author: Vivek moyal
Updated on: 2019-08-08
Posted on: 2019-08-08
Package: PHP Page Preview
Read this article to learn how you can implement this feature in a PHP Web site, so you can show previews of posts in your pages that also show how associated external pages look like.
Why Previewing External Pages like Facebook is Useful?
PHP Page Preview is PHP package that is very useful to get the information about the link we want to share so we can preview it before you publish content that references an external page.
Recently I was working on a project and I needed this possibility to show a preview box. While thinking about this problem, I remembered that I have created a script to implement a Facebook like preview box in PHP 5 or 6 years ago. I used that code and made some changes to create a PHP class out of it.
Now you can use it on your projects after you download the class code that I mention at the bottom of the article.
How to Create Page Preview Box in PHP?
So let's start with how I have created the class and what functions are used to get the URL Preview Box result.
In this class I have used an image slide show. I use that to try to show all images that are on the page, so the user can choose whatever suits him.
- Title
- Description
- Keywords
- Image
- OgImage
What are the Important Files Used by this Class?
Here follows a description of the files used by this package:
index.php
We use the index.php script to create a form for taking the URL from the user. It outputs a div element to show the elements of the retrieved page. For processing the page URL, we use an AJAX request to get the detail values.
<form>
<div class="col-md-6 col-md-offset-3">
<h2 class="text-center">URL Preview</h2>
<div class="input-group">
<input type="text" id="urlbox" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-primary" id="extract" name="extract" type="button">Extract</button>
</span>
</div>
<br/>
<i id="loader" class="fa fa-spin fa-spinner fa-2x"></i>
<br/>
<br/>
<div id="bigbox">
<div id="Title"></div>
</div>
</div>
</form>
The form above will show an input box and a button on the page. We use jQuery to setup a click handler function for showing the result.
Below follows a function that will show the loader icon where we get the URL parameter from the input box.
It sends the request to the shareDetails.php script for processing the URL value.
If the code retrieves a success value, it worked perfectly. Then the code will hide the loading icon and parse the received JSON encoded response to show the values in the Title box which is a part of bigbox.
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script>
$('#loader').hide();
$('#extract').click(function(){
$('#loader').show();
var Url=$('#urlbox').val();
$.ajax({
type: "POST",
url: "shareDetails.php",
data:{url:Url},
success: function(data){
console.log(data);
$('#loader').hide();
var boxdata=$.parseJSON(data);
$('#Title').html(boxdata.SharePrice);
}
});
});
</script>
Here follows very small section that defines the CSS definitions to show everything perfectly.
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<style>
#Image img{display: none;}
.active{display:block!important};
</style>
As you can see we have setup the HTML page and everything will look perfect. Now we will move to our main class functions which creates the magic behind the walls. We have created some functions so that we will get the perfect details.
urlDetails.php
Our class is in a file named urlDetails.php which has all the functions that will do the magic. To make this article brief, we are not pasting the class code here but you may access it in this class package page.
Here follows a brief description of the class functions:
initializeDom()
As the function name suggests, it will initialize the DOM object and then it takes an URL as parameter.
This URL is the URL which we will use to put in the input box. In this function we will create a CUrl request and create an object of DOM document class.
We will use the loadhtml function for getting the page contents to extract the relevant. Our function will return the DOM object that has all the details of the page that we need.
getWebsiteTitle()
This function will extract the title of the Web site page.
getWebsiteDescription()
This function will take the description of the Web site page from the respective meta tag.
getWebsiteKeyword()
This function will extract the keywords of the Web site page.
getWebsiteImages()
This function will extract all the images of the Web site page. You can scroll the page to view all images and pick whichever you want to use as the most important image to represent the page in the preview.
getWebsiteOgImage()
Some of the Web sites do not use images but they have OG:Image tag for showing an image for sharing purposes. So this function will extract that image URL.
Conclusion
This class has been of great use for me. I hope it is also useful for you.
If you want to download the class code and try it, you can find it here in the class package page.
Hope you like this tutorial if you have any issues please comment below. You can also download the files of this class.
You need to be a registered user or login to post a comment
1,534,284 PHP developers registered to the PHP Classes site.
Be One of Us!
Login Immediately with your account on:
 |  | ||
 |  | ||
 |  |
Comments:
No comments were submitted yet.
