PHP Classes
PHP Classes
elePHPant
Icontem

How to Use PHP to Create a Link Preview like Facebook - PHP Page Preview package blog

Recommend this page to a friend!
  All package blogs All package blogs   PHP Page Preview PHP Page Preview   Blog PHP Page Preview package blog   RSS 1.0 feed RSS 2.0 feed   Blog How to Use PHP to Cre...  
  Post a comment Post a comment   See comments See comments (0)   Trackbacks (0)  

Author:

Updated on: 2019-08-08

Posted on:

Package: PHP Page Preview

When you submit a post in Facebook that contains a link to an external page, Facebook shows a preview of that page below the post text, so users can see a preview of how it will look link when the post is published.

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.

If you script is running on localhost, then https based links will not work appear properly. They will work when you put the code on a server with real domain name.
Here are the types of page details that we retrieve using this class:
  • 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,538,351 PHP developers registered to the PHP Classes site.
Be One of Us!

Login Immediately with your account on:

FacebookGmail
HotmailStackOverflow
GitHubYahoo


Comments:

No comments were submitted yet.



  Post a comment Post a comment   See comments See comments (0)   Trackbacks (0)  
  All package blogs All package blogs   PHP Page Preview PHP Page Preview   Blog PHP Page Preview package blog   RSS 1.0 feed RSS 2.0 feed   Blog How to Use PHP to Cre...