Search code examples
facebookbloggerblogspot

Custom Facebook Send button

I have this group of share buttons in my website:

<div class='post-share'>                

                <a class='share-twitter' expr:href='&quot;https://twitter.com/home?status=&quot;+data:post.url' id='tuiter' onclick='ga(&apos;send&apos;, &apos;event&apos;, &apos;click&apos;, &apos;tuiter&apos;);' target='_blank'><i class='fa fa-twitter'/></a>

                <a class='share-google-plus' expr:href='&quot;https://plus.google.com/share?url=&quot;+data:post.url' id='gugleplus' onclick='ga(&apos;send&apos;, &apos;event&apos;, &apos;click&apos;, &apos;gugleplus&apos;);' target='_blank'><i class='fa fa-google-plus'/></a>

                <a class='share-pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;description=&quot; + data:post.title' id='pintresti' onclick='ga(&apos;send&apos;, &apos;event&apos;, &apos;click&apos;, &apos;pintresti&apos;);' target='_blank'><i class='fa fa-pinterest'/></a>         
                <a class='share-linkedin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' id='linkdini' onclick='ga(&apos;send&apos;, &apos;event&apos;, &apos;click&apos;, &apos;linkdini&apos;);' target='_blank'><i class='fa fa-linkedin'/></a>

I would like to add also a Facebook Send button. I see in bbc website that they have a custom Send button:

bbc custom share buttons

My difficulties related to a custom Send button are related to the fact that i'm working in a blogger blog platform.

I know i can use something like:

<a class='share-facebook' expr:href='&quot;http://www.facebook.com/dialog/send?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' id='tuiter' onclick='ga(&apos;send&apos;, &apos;event&apos;, &apos;click&apos;, &apos;tuiter&apos;);' target='_blank'><i class='fa fa-facebook'/></a>

but actually this is not working. API Error Code: 100

I tried also:

<a class='share-facebook' expr:href='&quot;http://www.facebook.com/dialog/send?link=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' id='tuiter' onclick='ga(&apos;send&apos;, &apos;event&apos;, &apos;click&apos;, &apos;tuiter&apos;);' target='_blank'><i class='fa fa-facebook'/></a>

but when i test it i get this message: "The link you followed may have expired, or the page may only be visible to an audience you're not in."

My question is:

  • How to create a custom Facebook Send button for Blogger blog which sends the default link of a post (data:post.url)
Solution

  • The code for the custom send Button will be like -

    <a expr:href='"https://www.facebook.com/dialog/send?app_id=YOURAPPID&amp;link=" + data:post.canonicalUrl + "&amp;redirect_uri="+ data:post.canonicalUrl' >Send</a>

    You will need to create a new Facebook app to make it work.

    For information regarding the required parameters by Send Dialog, refer to https://developers.facebook.com/docs/sharing/reference/send-dialog -

    app_id - Your app's unique identifier. Required.

    redirect_uri - The URL to redirect to after a person clicks a button on the dialog. Required when using URL redirection.

    link - Required parameter. The URL that is being sent in the message.