There is a trend on facebook and other social media now a days that uses the users name along with a url and shows some fun and interesting fact, charcter or fortune about the user.

This is done by using the new feature in facebook and other social media that uses an url and displays a small preview of the web page. So when a user types the url in the comment or post, then a request is made to the url address and a preview of the web page is shown to the user.

Well I tried to build one and got success after a day and a night of work. I tried basic stuff and build a page that displays an Avenger Character along with the user name, by simply typing 'www.techconductor.com/a/?your_name ' on any platform Facebook, WhatsApp, Twitter in any comment, post or message section. You may first want to try commenting on TechConductor faceboook post | open in your facebook app and also Techconductor Twitter post and come back again, so you get a better understanding of whats going on here.

The first step was basically to build a web page that grabs the link and splits out the last part after '?' which will be stored in a name variable. Next step is to provide a image link and then display the result. Sounds simple but can get a bit complicated lets try to understand the process step by step.

Step 1:

Build a web page in the folder techconductor.com/a/ and save it as index.php with all the basic html and css. The first thing the web page have to do is grab the full link or url which the user have typed, and from it extract the user name. Well this line of PHP code does the same.

It simply request to the server to provide the full url typed by the user. The isset function just checks if the $_SERVER variable is https or not if not the it assigns it to http, then concatenates it with $_SERVER which returns the host or domain, then finally $_SERVER gives the remaning part of the url. The full link is stored in the $actual_link variable. Also the remaining code does a very important job it extrats the user name from the link.
It uses the substr function which takes two inputs first the string and second the starting index number. Here basically the function cuts the first 32 character from the starting of the link and stores the remaining part in the variable $me_name. eg: http://www.techconductor.com/a/?User_Name so the function cuts out the underlined portion of the url http://www.techconductor.com/a/?User_Name and whats left is the users name.

Step 2:

Next step is to assign a randomly selected Avengers Character image link and also the character name along with the user name. Here is the PHP code that does the above work.

Here the the variable $id_no is assigned a random value from 0 to 50. Next $images is an array storing all the images name along with its format. The no. of array elements is reduced in the above image to make it redable, actual array contains 50 elements. Making this array was the toughest task, I used python and BeautifulSoup to download images and build the above array, this will be covered in details in another python post. And lastly we make a variable $me_image which stores a randomly selected image from the array by providing the array index number as the random number we have generated.

Step 3:

Now we just need to display the result, well this was the most time consuming part as it has to go through many trial and error cases. But finally this is the working code. Well for facebook and whatsapp we have to use the Open-Graph(og) meta tags as provided in the developer.facebook.com section, there are few basic og tags ( 'og:url','og:title', 'og:description','og:image','og:type') . I basically tried to make the user name appear as the title of the page so we have to use PHP to echo out all the og tags as for different users title will be different. The code looks messed up but its very simple.

The first is the og:url for every url till the ? sign all the links are same so we just concatenated the $me_name variable which holds the user name in the end of the url. This tag is very important for facebook scrapper because it uses this link to scrape the web page and based on that it will display the result. The og:type basically tells the facebook that it an article.
Next og:title displays the title which is the combination of user name and character name. Here again substr function is used to cut the character name from its format that is '.jpg' by using the starting point 0 and the end point -4 so the function takes Thor.jpg and outputs Thor then both is simply concatenated.
And lastly og:image is used to provide the link of the image. Also og:image:height and og:image:width is used for better performance.

So finally its done and now when a user types www.techconductor.com/a/?user_name anywhere on facebook, whatsapp, twitter they will see their Avengers Character along with there name. Here are some preview:

Facebook

WhatsApp

Twitter

Try commenting on TechConductor facebook post and also on Twitter post also Share on WhatsApp to your friends. Try to Like, Share and Comment. If you found it usefull and helpfull or learned something.