How to share on Facebook with JS SDK and Vue?

By | Facebook | No Comments

Facebook share offers different SDK’s to perform the share. JavaScript SDK, PHP SDK, Android SDK, iOS SDK etc.

We’ll be looking into the JS SDK

The project in which I wanted to integrate this Facebook share was based on Vue. Following are the steps, I followed to complete this feature.

Looking for an existing plugin: Vue-social-sharing

Initially I looked for an existing plugin to do the job and I found a really nice one here. It does the job in a nice manner. However, In my project there were certain actions I needed to perform if the facebook share was performed and there was no clear indication whether the share was actually performed or not. The closest information this plugin gave was when the facebook share popup was closed. Not good enough.

If all you need is facebook share and you do not need to perform any actions based on whether the share was performed or not. The plugin should be really a good fit.

Integrating FB Share with JS SDK

Facebook Documentation for JS SDK

Loading the SDK

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
methods: {

    initializeFacebook()
    {

        window.fbAsyncInit = function () {
            FB.init({
                appId: '*******',
                autoLogAppEvents: true,
                xfbml: true,
                version: 'v3.3'
            });
        };

// Since vue doesn't allow placing the script tag inside template we will not use the following script tag but an alternative way to do the same.
        /* <script async defer src="https://connect.facebook.net/en_US/sdk.js"> */

        (function (d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) {
                return;
            }
            js = d.createElement(s);
            js.id = id;
            js.src = "//connect.facebook.net/en_US/sdk.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));

    }
}

The above code loads the SDK for us. I created a method called initializeFacebook and invoked it inside the mounted block.

Click to Share

Now that we have loaded the SDK, we can proceed with the share. During development you might be sharing with a virtual environment. Facebook expects you to input this domain in App’s Domains. Not doing it will end up with an error.


We are ready to perform share now. Let’s add one more method: facebookShare.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
methods: {
    facebookShare()
    {

        let self = this;

        FB.ui(
            {
                method: 'share',
                href: self.issueUrl, // replace with your url
            },
            // callback
            function (response) {
                if (response && !response.error_message) {
                    alert('Posting completed.');
                } else {
                    alert('Error while posting.');
                }
            }
        );

    }
}

We can call this function on the click of the share button.

Voila! Now we know whether the user did share our post or not.

For local development share, facebook can’t read our meta tags since it is our virtual domain and we should not expect a proper share content on local development environment. However, once you put this code on your production server, a domain that is accessible to everyone and facebook, it should work just fine.

If this guide helped you in anyway, please consider dropping a comment, it will mean a lot to me.

PHPDocumentor

By | Uncategorized

Download the PHAR from their website. This is the easiest method to start with and works perfectly.


1
php ~/phpDocumentor.phar -d . -t docs

I found an excellent configuration file that you just need to place and it will make life easier.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
&lt;?xml version="1.0" encoding="UTF-8" ?>
&lt;phpdoc>
    &lt;title>App Plugins Documentations&lt;/title>
    &lt;parser>
        &lt;target>reference/docs&lt;/target>
    &lt;/parser>
    &lt;transformer>
        &lt;target>reference/docs&lt;/target>
    &lt;/transformer>
    &lt;files>
        &lt;directory>.&lt;/directory> &lt;!-- Scan and parse all the php files except those found in the paths below -->
        &lt;ignore>assets/*&lt;/ignore>
        &lt;ignore>includes/gm-virtual-pages/*&lt;/ignore>
        &lt;ignore>includes/app_virtual_pages/*&lt;/ignore>
        &lt;ignore>includes/third-party/*&lt;/ignore>
        &lt;ignore>vendor/*&lt;/ignore>
        &lt;ignore>reference/docs/*&lt;/ignore>
        &lt;ignore>storage/*&lt;/ignore>
        &lt;ignore>views/*&lt;/ignore>
        &lt;ignore>index.php&lt;/ignore> &lt;!-- Ignore all the index.php files -->
    &lt;/files>
&lt;/phpdoc>

Ignoring vendor directory should be the first step to start with.

Debugging Issues with Apache2

By | Apache

Knowing the exact issue is important.


1
2
3
4
5
apachectl configtest
journalctl -xe
systemctl status apache2.service
sudo nano /var/log/apache2/error.log
netstat -ltp | grep :80 # To know if a program is occupying port 80

FYI: Apache modules reside in following. Sometimes we have mismatch of module especially after switching php version. If the loaded version is different and available version is different, that causes error too.


1
/usr/lib/apache2/modules

PHP: function number_format issues and solution

By | PHP

Following is not really an issue but we could run into a trap if we don’t be careful about it. Bottom line is to understand that number_format returns string and when any arithmetic operation is performed to it, we could end up with huge problems.

We can use round but round for 45.20 will give 45.2. Even when we asked for 2 decimals. money_format returns string as well. I guess it will be best to use round for calculations and for displaying numbers use number_format or money_format.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
&lt;?php

$a = number_format(100000, 2);
$b = number_format(100000, 2);

$c = $a + $b; // 200

// TODO: FIXME: REMOVE THIS
var_dump($c);

$a = round(100000, 2);
$b = round(100000, 2);

$c = $a + $b; // float(200000)

// TODO: FIXME: REMOVE THIS
var_dump($c);


$c = 45.1261423;
echo money_format('%i', $c); // 45.13


setlocale(LC_MONETARY, 'en_CA');

var_dump(money_format('%i', $c)); // string(13) "CAD200,000.00"

JavaScript Numbers

By | Javascript

What is JavaScript equivalent for number_format in php?


1
2
3
4
5
6
7
8
// Lodash to rescue
// Works exactly as we expect. Output is a typeof number.
_.round("10.608", 2); // 10.61

// Following returns the output as string. That's one major down side.
parseFloat("10").toFixed(2); // 10.00
parseFloat("10.60").toFixed(2); // 10.60
parseFloat("10.605").toFixed(2); // 10.61