RationalSpace

Archive for the ‘Social Media’ Category

Sharing videos to play embedded within Facebook

leave a comment »

So you have created good video content and have put it up on your website. How do you make it shareable on facebook?

Well, you can put a share button that facebook provides and the appropriate og meta tags on the page. Here is a set that facebook tells us to put in the page.

Now, in a typical scenario where you might have put your videos on Amazon S3 or your own Server, then clicking on the facebook share button will share the page of your website on which the video is embedded. It will not really embed the video in the news feed of facebook. Embedding in facebook news feed is much more useful as the users can click there itself and play the video. He need not go to one more page and again click play there. So the chances of your content going viral is more if the video that we share on facebook plays there itself.

This basically requires 2 things:

  • All your videos should be hosted on a secure URL i.e a URL starting with “https://” . Now you can get this done by applying for an SSL certificate for your website and enabling that on your server. However, if you are on Amazon AWS, you can do this very simply by using “Cloudfront”. You can create a cloudfront distribution – choose the S3 bucket that stores the videos and configure it.  Cloudfront by default gives an SSL certificate. Cloudfront does not give us very pretty URLs but then it suffices for the purpose of sharing. Also make sure that you have selected support for both HTTP and HTTPS on the cloudfront.
  • You also need a “SWF” / Flash player. Also this player should be hosted on the same S3 bucket which is behind the secure cloudfront. Basically, the flash player URL also needs to be secure. I used flow-player SWF  for this purpose but you can use whatever you like.

Here is a working demo.

Advertisements

Written by rationalspace

April 27, 2015 at 5:45 pm

Posted in Frontend, Social Media

Tagged with ,

How to integrate twitter login

leave a comment »

Register your app

First, you need to register your app with twitter: https://dev.twitter.com/ . Fill up everything and then go to the tab “oAuth tool”. Note down the following things:

  1. CONSUMER KEY
  2. CONSUMER SECRET

Also, look at  OAUTH CALLBACK variable in settings tab . We need to fill this with the url of the page that we would callback. For now, you can fill it with the url http://yourdomain.com/getTwitterData.php

Download twitter php library files
https://github.com/abraham/twitteroauth/tree/master/twitteroauth
Store them in a folder that you can name as “twitter”

Put the configuration variables in settings/include files of your code

define('CONSUMER_KEY', 'your key');
define('CONSUMER_SECRET', 'your secret');
define('OAUTH_CALLBACK', 'http://yourdomain.com/getTwitterData.php');

Add a javascript function to open a popup
A solution to open login in a popup works better as the user need not go away to a new page and then redirected back.

var w = 550;
var h = 350;
var left = Number((screen.width/2)-(w/2));
var tops = Number((screen.height/2)-(h/2));
function openPopup(urlloc){
window.open(urlloc,'1367320228425','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+tops+', left='+left);
}

Add Twitter button

<img src="https://dev.twitter.com/sites/default/files/images_documentation/sign-in-with-twitter-gray.png" onclick="openPopup('http://yourdomain.com/login-twitter.php');">

Create login-twitter.php file
<?php
require 'includes.php';
require_once "twitter/twitteroauth.php";
if (CONSUMER_KEY === '' || CONSUMER_SECRET === '' || CONSUMER_KEY === 'CONSUMER_KEY_HERE' || CONSUMER_SECRET === 'CONSUMER_SECRET_HERE') {
echo 'You need a consumer key and secret to test the sample code. Get one from dev.twitter.com/apps';
exit;
}
/* Start session and load library. */
session_start();
/* Build TwitterOAuth object with client credentials. */
$connection = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET);
/* Get temporary credentials. */
$request_token = $connection->getRequestToken(OAUTH_CALLBACK);
/* Save temporary credentials to session. */
$_SESSION['oauth_token'] = $token = $request_token['oauth_token'];
$_SESSION['oauth_token_secret'] = $request_token['oauth_token_secret'];
/* If last connection failed don't display authorization link. */
switch ($connection->http_code) {
case 200:
/* Build authorize URL and redirect user to Twitter. */
$url = $connection->getAuthorizeURL($token);
header('Location: ' . $url);
break;
default:
/* Show notification if something went wrong. */
echo 'Could not connect to Twitter. Refresh the page or try again later.';
}
?>

Create callback file getTwitterData.php
/* Request access tokens from twitter */
$access_token = $connection->getAccessToken($_REQUEST['oauth_verifier']);
/* Save the access tokens. Normally these would be saved in a database for future use. */
$_SESSION['access_token'] = $access_token;
/* Remove no longer needed request tokens */
unset($_SESSION['oauth_token']);
unset($_SESSION['oauth_token_secret']);
/* If HTTP response is 200 continue otherwise send to connect page to retry */
if (200 == $connection->http_code) {
/* The user has been verified and the access tokens can be saved for future use */
$_SESSION['status'] = 'verified';
// Let's get the user's info
$user_info = $connection->get('account/verify_credentials');
if (isset($user_info->error)) {
// Something's wrong, go back to square 1
header("Location: $siteurl".'views/login-twitter.php');
} else {
$email='';
$uid = $user_info->id;
$username = $user_info->name;
$user = new User(); // Create your user object
$userdata = $user->checkUser($uid, 'twitter', $username,$email); // Checks if user already exists. If not, add the user
if(!empty($userdata)){
session_start();
$_SESSION['id'] = $userdata['id'];
$_SESSION['oauth_id'] = $uid;
$_SESSION['username'] = $userdata['username'];
$_SESSION['oauth_provider'] = $userdata['oauth_provider'];
//close the popup and reload the page to show logged in state
echo "<script>
window.close();
window.opener.location.reload();
</script>";
}
}
} else {
/* Save HTTP status for error dialog on connnect page.*/
header('Location: ./clearsessions.php');
}
?>

Create Clear sessions file

<?php
/**
* @file
* Clears PHP sessions and redirects to the login page.
*/
/* Load and clear sessions */
session_start();
session_destroy();
/* Redirect to page with the connect to Twitter option. */
header('Location: login-twitter.php');

Written by rationalspace

June 28, 2013 at 11:23 am

Twitter sharing with URL shortening

leave a comment »

This post attempts to discuss how we could share some text/comment from our website to twitter by providing a tweet link. The steps to integrate twitter share link on a website are pretty straight-forward.

  1. Put the javascript code in the head of your page :
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
  2.  Put the url for share : 
    <a href='https://twitter.com/share' class='twitter-share-button' data-url='http://yourlandingpageurl' data-text='the text you want to show up in tweet'>Tweet</a>

The only catch is that twitter imposes 140 character limit – this includes your text as well as the landing url. On click on “Tweet” button, if  the user sees the error thrown up by twitter that the text is long, he/she is likely to close the window and drift away. Now to resolve this one could check the text length and shorten it. Also, we should shorten the urls. Shortening of URLs really helps since it not only reduces the number of characters in the url but it also makes the urls look pretty and do not take the focus away from the text.

How can we shorten the url?

The basic idea behind url shortening is that you use some kind of encoding algorithm for a distinct id/number and store the old url vs new url mapping in database. When the url is clicked and your site is hit you interpret it in .htaccess , redirect it to a file that decodes it , looks up in database and redirects to the actual URL.

  1. Create shortened URL :
    $randomid=rand(10000,99999);
    $shorturl=base_convert($randomid,20,36);
    This will generate a url with a character length of 4.
  2. Store the mapping in DB:  
    $url = 'http://mydomain.com/longurl?page=1&tab=2";
    $shorturl = "http://mydomain.com/shorturl" ;
    "insert into url_mapping values ($randomid,'$url','$shorturl')";
  3.  Put rules in .htaccess  
    RewriteRule ^([\w\d]{4})$ decoder.php?decode=$1 [L]
  4. Look up the db and redirect
    $de=$_GET["decode"];
    $sql = "select * from url_mapping where shortUrl='$de'";
    $sth = $dbh->prepare("$sql");
    $sth->execute();
    while($row = $sth->fetch()){
    $res=$row['longUrl'];
    header("location:$siteurl".$res);

Written by rationalspace

May 24, 2013 at 11:16 pm

SEO Checklist – Steps to do before you launch your website

leave a comment »

I wanted to prepare a check-list of things one should do with respect to Search Engine Optimization before a site is launched. This is not an attempt to discuss what each of these items mean  – for that one could refer google guide for seo

This is just a summary of all big items in one place.

  1. Title tags in each page – should be unique, relevant to page content and brief. Within 70 characters.
  2. Description meta tag – summarize each page, should be relevant, don’t put just keywords there. Within 160 characters. Try to use this wisely – Not very long and not very short.
  3. Simple to understand URLs – use words , should not be cryptic , avoid parameters and session ids
  4. Provide one version of URL – don’t have multiple urls with same content . If they are there – use rel="canonical" or 301 redirect. rel=”canonical” should be a link to the url of the original content.
  5. Navigation by breadcrumbs
  6. Allow for the possibility of part if url being missing  – If one removes the last bit from the url, the rest of it should still work instead of showing 404.
  7. Create html sitemap with organisation of content  along with xml sitemap
  8. Content – avoid spelling mistakes,  organize your article, create fresh & unique content
  9. Write better anchor text – title in “<a>” tag can help the search engines understand what the href is about.
  10. Use heading tags well
  11. Use robots.txt to restrict crawling where its not needed.
  12. Use rel="nofollow" to tell search engines that you don’t want these pages to be followed or pass your page’s reputation to pages linked to. For example : a comment by a spammer on your site or some other site’s url that you may have referenced.
  13. Go Social , create back-links
  14. Use alt tags well – Alt tags in image is a way to make the search engines understand what the image is about. If you are posting an image of a car let the alt tag say that and not just image1 or any such meaningless text. Also try to keep the image names meaningful.
  15. If  you are using pagination for any listing type of content, make sure each new page has a unique title and description. Mostly people forget to add page numbers to the tiles and description of pages that are added due to pagination and have unique content. For example: title could be “Job listing – Internet Industry – Bangalore – Page 1”
  16. Add rel=’prev’ and rel=’next’ meta tags in pagination related unique pages. So if you are on page one of your listing pages, add rel=’next’ meta tag with second page url. On second page url, add “rel=’prev'” for page 1 and “rel=’next'” for page 2. Be careful not to add “rel=next” on last page 🙂
  17. Using structured data : If Google understands the content on your pages, it can create rich snippets—detailed information intended to help users with specific queries. For example, the snippet for a restaurant might show the average review and price range.  Read more about this here: structured data

Written by rationalspace

April 29, 2013 at 12:42 pm

Posted in SEO, Social Media

Integrating Facebook Like dynamically

leave a comment »

Basics:

  • Include div

<div id=”fb-root”></div>

  • Include JS

<script>(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/all.js#xfbml=1&appId=whatever“;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>

  • Add html 

    <div class=”fb-like” data-send=”true” data-width=”450″ data-show-faces=”true” data-href=”whatever“></div> (data href url is not needed if open graph meta tags are included already)

    Meta Tags

    <meta property=”og:image” content=”whatever“/>
    <meta property=”og:title” content=”whatever” />
    <meta property=”og:url” content=”whatever” />
    <meta property=”og:site_name” content=”whatever“/>
    <meta property=”og:type” content=”whatever“/>
    <meta property=”og:description” content=”whatever“/>

    Parse FBML ( needed if fb like div is added dynamically)

    FB.XFBML.parse();







Written by rationalspace

May 22, 2012 at 3:06 pm

Posted in Social Media

Tagged with , ,

Tools to monitor social engagement of your brand

leave a comment »

Written by rationalspace

May 11, 2012 at 3:18 pm

Posted in Social Media

Tagged with

%d bloggers like this: