Sunday, January 20, 2013

[Share with Me] Create a Facebook Share Button Dinamically Using PHP

Facebook social plugins are widely used to promote websites, blog posts etc. In this post I am going to tell you how to dynamically create a Facebook share button in PHP and how to populate and open the Facebook share popup so the user can stay on the same page while sharing to Facebook. Meta tags will be used to populate this.

Let’s get on with it then

Lets start with the Facebook share button. To create a Facebook share button you need two things, first is the share button image and second is the unique URL that is used by facebook to fetch the data from. For a unique URL we’ll use fbsharepage.php with the query string parameter that is the id to make it unique, the id can be a number or a string and if you’re using a database then you can use a primary key as an id as it’s always unique.

Here is the URL

$url = $_SERVER['HTTP_HOST']."/demo/fbshare/fbsharepage.php?id=1";

 

Javascript is used to create a popup for share. Window.open is used to open a share popup where the first parameter is the page URL you want to display in the popup, second parameter is the name of the popup and the thrid is the list of options you can set to window. Please note that in second parameter i.e the popup name, do not use space and – characters as IE doesn’t allow these characters.

Here is the JavaScript function to open a share popup

function fbshare() { window.open ("http://www.facebook.com/share.php?u=<;?php echo $url?>", "Facebook_Share","menubar=1,resizable=1,width=900,height=500"); }

 

And the Facebook Share Button

<a href="javascript:fbshare()"> <img src="images/Share.png" /> </a>

And here is the complete code of the Facebook share page saved as php-create-fb-share-button.php

<div style="font-weight: bold;font-size:12px;"> PHP how to dynamically create facebook share button </div> <?php $url = $_SERVER['HTTP_HOST']."/demo/fbshare/fbsharepage.php?id=1"; //$url = "http://".$_SERVER['HTTP_HOST']."/php-create-fb-share-button/fbsharepage.php?id=1"; ?> <script type="text/javascript"> function fbshare() { window.open ("http://www.facebook.com/share.php?u=<;?php echo $url?>", "Facebook_Share","menubar=1,resizable=1,width=900,height=500"); //window.open("http://www.javascript-coder.com","mywindow","menubar=1,resizable=1,width=900,height=500"); } </script> <a href="javascript:fbshare()"> <img src="images/Share.png" /> </a>

 

Now create a folder in the same place as images and copy the Share.png in the folder

Lets move to fbsharepage.php

As we are using fbsharepage.php as the share URL so Facebook uses this page to fetch the data using meta tags. This page is also used to redirect the user to the post page once they click on the shared link on Facebook feed.

Here is the redirection code

//if user come from facebook by clicking on the link, we can redirect user to the post page. 
//Referer address is the address where user comes from by clicking on the link in this case facebook is the referer.
if(isset($_SERVER['HTTP_REFERER']))
{
//a regular expression to match the facebook address from the referer address
if(preg_match("/www.facebook.com/",$_SERVER['HTTP_REFERER']))
{
$url = $_SERVER['HTTP_HOST']."/demo/php-create-fb-share-button.php";
?>
<SCRIPT type="text/javascript">
window.location="php-create-fb-share-button.php";
</SCRIPT>
<?php
}
}

Here is the meta tags. You can use the query string id that we have passed to dynamically create the meta tags. I’m just using static meta tags for this example

<?php
?>
<meta property="og:title" content="How to dynamically create facebook share button in PHP" />
<meta property="og:image" content="<?php echo $imageURL;?>" />
<meta property="og:description" content="In this post I am going to tell you how to dynamically create
facebook share button and how facebook fetch data from the provided link on like to automatically
share on facebook using page meta tags." />

And here is the complete code for the fbsharepage.php page

<meta property="og:image" content="" />

Click here to download the full source code.


[Share with Me] Create a Facebook Share Button Dinamically Using PHP

No comments: