Web Technology Experts Notes

Showing posts with label Facebook. Show all posts

Tuesday 24 February 2015

How to share Embed youtube video on facebook From my website

Following are two steps

1. Get video-code from YouTube URL video URL
Suppose you have following youtube video.

https://www.youtube.com/watch?v=adn45xIFa4g

Now get the video-Code i.e adn45xIFa4g from YouTube URL.

2. Update the following meta tags (fill Video Code)
<meta property="og:title" content="How to share Embed youtube video on facebook From my website" />
<meta property="og:description" content="How to share Embed youtube video on facebook From my website" />
<meta property="og:url" content="http://www.web-technology-experts-notes.in/2015/02/how-to-share-embed-youtube-video-on-facebook-from-my-website.html" />
<meta property="og:type" content="video" >
<meta property="og:image" content="http://i1.ytimg.com/vi/adn45xIFa4g/maxresdefault.jpg" />
<meta property="og:video" content="http://www.youtube.com/e/adn45xIFa4g" />
<meta property="og:video:height" content="268" />
<meta property="og:video:width" content="480" />


<meta property="og:url:secure_url" content="http://www.web-technology-experts-notes.in/2015/02/how-to-share-embed-youtube-video-on-facebook-from-my-website.html" >
<meta property="og:image:secure_url" content="https://i1.ytimg.com/vi/adn45xIFa4g/maxresdefault.jpg" />
<meta property="og:video:secure_url" content="https://www.youtube.com/e/adn45xIFa4g" >


3. Paste the above meta tags before the closing of head tag (</head>)

Monday 16 February 2015

How to Find a Facebook Profile From an Image URL

Suppose you have following Profile Picture.

Following is URL of above Image
http://graph.facebook.com/1438566719/picture?type=square

In this Profile Image URL, there is Id i.e. 1438566719. This is Facebook Profile ID.
From this facebook ID, we can get the facebook profile URL.

Following is facebook profile URL.
http://facebook.com/1438566719

You will set it will automatic redirect to https://www.facebook.com/arun.compute.

In Facebook, every things have ID whether it is profile URL, Page OR APP.
when you open http://facebook.com/[ID_NUMBER], It wil be automatic redirect to its specific page.

Wednesday 11 February 2015

How to integrate Facebook open Graph API in Website

In April of 2010, Facebook launched Open Graph API. Open Graph API let's you get website information & post on facebook.com. It helps to share your website information globally through facebook.com.

When it was launched within a week around 50,000 website integrate the Facebook Open Graph API. With use of Open Graph API, we can published/post/submit your website's page/article/video on facebook.com and your content will start displaying in Facebook.com

To implement Open Graph API in website, there are two steps and are following.

Step No 1
How to create App in Facebook:
A. Login Facebook, go to the Developers page (https://developers.facebook.com/).
B. Click "Set up a new app" button on the top right corner.
C. Give a name to your new App, "agree" to Facebook terms and conditions, then click on "Create app".
D. Go to Web Site tab, fill up Site URL and Site Domain.
E. Note down the "Application ID" which we will use in Meta Tags.

Step No 2
Following are Different Meta Tags of Open Graph API which you can add in your Website

<meta content='508427595967225' property='fb:app_id'/>
<meta content='en_US' property='og:locale'/>
<meta content='http://www.web-technology-experts-notes.in/2014/12/facebook-comments-integration-in-website.html' property='og:url'/>
<meta content='Facebook comments Integration in website' property='og:title'/>
<meta content='article' property='og:type'/>
<meta content='Web Technology Experts Notes' property='og:site_name'/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihwY-LposUHaskiINc04SYtH2iOmaZoqTTtxnZIK3eDejPPH2V_h1MiBT6Mo9yCzKY9tWfbv0vkuR6g9sFZYmTsMUN_xSatoMayqDAwWS6BxoemOkV05fIyFCo3OsPhTsgPuz-ZbRr52A0/s72-c/facebook+comment+box.png' property='og:image'/>
<meta content='The Comments box lets people comment on your site with Facebok. Add Facebook comments box for you blogger, Generic website, Ecommerce website etc.in few seconds with dynamic URL.' property='og:description'/>


Want to check your Meta tags on facebook.com:
https://developers.facebook.com/tools/debug/ (This need Fb Login)

Need More info, check offical facebook page:
https://developers.facebook.com/docs/opengraph/getting-started

Wednesday 28 January 2015

How to clear Facebook image cache

Following are way to clear the facebook's image from cache.
Step 1, Update the Image URL with version in Meta Tags
<meta content="http://www.aboutcity.net/images/web-technology-experts-notes.jpg?v=12" property="og:image"/>

Step 2:
A) Go to https://developers.facebook.com/tools/debug/
B) Enter URL and Press "Debug" Submit button
C) Click On "Show existing scrape information", It will remove the caching
D) Check the updated image

Following is Screenshot which explain, how to clear the Image Cache?

Wednesday 7 January 2015

Facebook Comments Disable Comment using Yahoo, AOL or Hotmail

Facebook Comments Integration and Disable Comment using Yahoo, AOL or Hotmail

To integrate Facebook Comments without Yahoo, AOL Hotmail, Get an Facebook Apps ID

Login in Facebook.com
Go to https://developers.facebook.com
Create an Apps in facebook
Get App ID
Append below meta tags in header & update your FB APP ID

Use following code snippet to use

<div id="fb-root">
</div>
<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/sdk.js#xfbml=1&amp;appId=508427595967225&amp;version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-colorscheme="light" data-href="http://www.web-technology-experts-notes.in/2015/01/facebook-comments-disable-comment-using.html" data-numposts="5" data-width="570">
</div>

See Example Below

You can manage following Options in Facebook Comment Box.

data-colorscheme: Color scheme used by the plugin. Can be "light" or "dark".
data-numposts: Total no of comments wants to display at the time of page load.
width: Total widths of facebook comments box