Social Media Integration : Facebook/Twitter Share/Tweet button

Integration with Social media made a lot easier these days. It is and was easy before just to add share/like buttons in our website. But being able to even change the UI/Design of the buttons was not that easy then. 

Antipattern

After not finding a good workaround people are found to keep the iframe hidden over the “new design” button so that unknowingly the user clicks the button inside the `iframe` thinking that they are clicking the beautifully designed button.

This type of implementation are often called a Hack as they are not officially declared way of doing things however they are eventually discovered by people with hacker mind set.

Simple Social buttons

Facebook:

<code language="html">
  <html>
    <head>
      <title>Your Website Title</title>
      <!-- You can use Open Graph tags to customize link previews.
      Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
      <meta property="og:url" content="http://www.your-domain.com/your-page.html"/>
      <meta property="og:type" content="website"/>
      <meta property="og:title" content="Your Website Title"/>
      <meta property="og:description" content="Your description"/>
      <meta property="og:image" content="http://www.your-domain.com/path/image.jpg"/>
    </head>
    <body>
    
        <!-- Load Facebook SDK for JavaScript -->       
        <!-- Your share button code --> 
  </body> </html>
</code>

In case of Twitter

  • make sure you pre-pended http:// or https:// before the URL

 

Sources:

http://stackoverflow.com/questions/16463030/how-to-add-facebook-share-button-on-my-website

https://developers.facebook.com/docs/plugins/share-button

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s