Profile Share Fixing the Thumbnail Image, Title and Description for Shared Links

user want to share any information then use following code and read step by step Profile Share Fixing the Thumbnail Image, Title and Description for Shared Links

if you want share profile on following social link :
1-Facebook
2-twitter.com
3-LinkedIn
4-google +,

Code link :
https://drive.google.com/open?id=1IzTZZh_0euDqFSHL_vPRiQePlNTw3h-q

Demo link :
http://freeteachnology.hol.es/socialshare/

To modify a page's thumbnail image, description, and additional metadata for these services, you can provide meta tags in the HTML code of the page.Implementing Open Graph Meta Tags

You can implement meta tags in a number of ways. In content management systems might be allow you to modify a page's meta tags ,

then use following code in meta section of your project code,

<link href="bootstrap.min.css" rel="stylesheet">
<link href="bootstrap-tour.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-tour.min.js"></script>

following meta tags is here :

<meta property="og:title" content="Disuza Jen">
<meta property="og:image" content="http://freeteachnology.blogspot.in/favicon.ico">
<meta property="og:description" content="java script, web development, web design, web programming, jquery ajax, ajax php, jquery ajax demos, jquery demos, regular expression, ajax demos, ajax programming, tutorials, php script, ajax tutorial, ajax examples.">
<meta property="og:url" content="view-source:http://freeteachnology.blogspot.in">

above meta tags graph for all social media site but following standered for twitter :

OG is open graph :

Open Graph tag Description of tag

og:title title or alternate title of page which displays as the headline

og:url URL of page

og:description description of the page, of which Facebook displays 300 characters at most

og:image URL of unique image, recommended dimensions 1200×630 pixels

og:type article (otherwise defaults to “website”)

Standard Social Media Tag Template: Article

<!-- Twitter Card data -->
<meta name="twitter:card" content="freeteachnology">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Freeteachnology">
<meta name="twitter:description" content="java script, web development, web design, web programming, jquery ajax, ajax php, jquery ajax demos, jquery demos, regular expression, ajax demos, ajax programming, tutorials, php script, ajax tutorial, ajax examples.">
<meta name="twitter:creator" content="@author_handle">
<-- Twitter Summary card images must be at least 120x120px -->
<meta name="twitter:image" content="http://freeteachnology.blogspot.in/favicon.ico">

Facebook social tags :

if you want share the information on facebook then you can user following code :

<!-- Open Graph data -->
<meta property="og:title" content="Free Teachnology" />
<meta property="og:type" content="freeteachnology" />
<meta property="og:url" content="http://freeteachnology.blogspot.in" />
<meta property="og:image" content="http://freeteachnology.blogspot.in/favicon.ico" />
<meta property="og:description" content="java script, web development, web design, web programming, jquery ajax, ajax php, jquery ajax demos, jquery demos, regular expression, ajax demos, ajax programming, tutorials, php script, ajax tutorial, ajax examples." /> 
<meta property="og:site_name" content="freeteachnology" />
<meta property="fb:admins" content="Facebook numeric ID">

facebook numeric id create on facebook,

Google + :

if share information on google plus then use following code :

Code :

<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="Free Teachnology">
<meta itemprop="description" content="java script, web development, web design, web programming, jquery ajax, ajax php, jquery ajax demos, jquery demos, regular expression, ajax demos, ajax programming, tutorials, php script, ajax tutorial, ajax examples.">
<meta itemprop="image" content="http://freeteachnology.blogspot.in/favicon.ico">

LinkedIn Share :

LinkedIn does not offer a debugger, nor a method to fix certain issues with sharing. The only self-serve workaround for some issues is to move a page to a new URL. LinkedIn automatically clears their cache on a weekly basis.

Code :

<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="Free Teachnology">
<meta itemprop="description" content="java script, web development, web design, web programming, jquery ajax, ajax php, jquery ajax demos, jquery demos, regular expression, ajax demos, ajax programming, tutorials, php script, ajax tutorial, ajax examples.">
<meta itemprop="image" content="http://freeteachnology.blogspot.in/favicon.ico">

following code of example :

Make file structure as below :

1-header.php,

2-footer.php,

3-index.php

1-header.php :

header file section onlin link of bootstrap ,

Code :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Social Share tags</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
  <script   src="https://code.jquery.com/jquery-3.1.1.js"   integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="   crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="icon" href="http://freeteachnology.blogspot.in/favicon.ico" type="image/x-icon"/>

  <!-- Open Graph data -->
<meta property="og:title" content="Free Teachnology" />
<meta property="og:type" content="freeteachnology" />
<meta property="og:url" content="http://freeteachnology.blogspot.in" />
<meta property="og:image" content="http://freeteachnology.blogspot.in/favicon.ico" />
<meta property="og:description" content="java script, web development, web design, web programming, jquery ajax, ajax php, jquery ajax demos, jquery demos, regular expression, ajax demos, ajax programming, tutorials, php script, ajax tutorial, ajax examples." /> 
<meta property="og:site_name" content="freeteachnology" />
</head>
<body>
<!-- start:header -->
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">     
      <a class="navbar-brand" href="#">Free Teachnology</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home <span class="sr-only"></span></a></li>
        <li><a href="#">About us</a></li>   
        <li><a href="#">Contact us</a></li>         
      </ul>
      </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
</br></br></br>
<!-- end:header -->

2-footer :

file include social link and name of who developed.

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Start::footer  -->
<script>
// $(".errorMsg").alert('close');
$(".errorMsg").slideUp(2000);
</script>
<footer>
        <div class="footer footer-bottom">

        <div class="container">  
           <div class="text-muted ">
               <a href="http://freeteachnology.blogspot.in/" >Free Teachnology</a>
            </div>
            <p class="pull-left"> Copyright © <?php echo date('Y');?>. Design and Develop by - Disuza Jen. </p>
            <div class="pull-right">
                <ul class="nav nav-pills payments">
                    <li><i class="fa fa-facebook"></i></li>
                    <li><i class="fa fa-google"></i></li>
                    <li><i class="fa fa-twitter"></i></li>
                    <li><i class="fa fa-link"></i></li>
                </ul> 
            </div>
        </div>
    </div>
    <!--/.footer-bottom--> 
</footer>
<!-- End::footer  -->
<style type="text/css">
  .footer-bottom {
    margin-top:220px;
    background: #E3E3E3;
    border-top: 1px solid #DDDDDD;
    padding-top: 10px;
    padding-bottom: 10px;
}
.footer-bottom p.pull-left {
    padding-top: 6px;
}
</style>
</body>
</html>

3-index.php :

index.php file contains all social share icons :

<?php include('header.php'); ?>
<body>   
<br><br><br>
<div class="cleafix"></div>
<div class="container">
<div class="alert alert-info">
    <strong>Hi..</strong> Social Share.
</div>
       <div class="alert alert-warning">
        <a href="https://drive.google.com/open?id=0BxmTZPVcu72fbGN5TXc1YUVRUVE" class="btn btn-xs btn-warning pull-right" target="blank();">Click</a>
        <strong> Code download link-</strong>
    </div>
       <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet">
        <div class="container">      
      <script id="metamorph-1-start" type="text/x-placeholder"></script>
      <script id="metamorph-21-start" type="text/x-placeholder"></script>
    <div class="container text-center">
                  <h2 class="form-signin-heading">Share on</h2>
            <br><br>
                <p>
                <a  target="_blank" class="btn btn-primary social-login-btn social-facebook" href="https://www.facebook.com/share.php?u=http://freeteachnology.hol.es/socialshare/"><i class="fa fa-facebook"></i>
                </a>
                <a  target="_blank" class="btn btn-primary social-login-btn social-twitter" href="https://twitter.com/intent/tweet?url=http://freeteachnology.hol.es/socialshare/">
                <i class="fa fa-twitter"></i>
                </a>
                </p>
                <p>
                <a  target="_blank"  class="btn btn-primary social-login-btn social-linkedin" href="https://www.linkedin.com/shareArticle?mini=true&url=http://freeteachnology.hol.es/socialshare/"><i class="fa fa-linkedin"></i></a>
                <a  target="_blank" class="btn btn-primary social-login-btn social-google" href="https://plus.google.com/share?url=http://freeteachnology.hol.es/socialshare/"><i class="fa fa-google-plus"></i></a>
                </p>
    
    </div>
        </div>
</br>
<?php include('footer.php'); ?>

i hope you understand all share tags if you have and query please ask me

mail id: disuzajen@gmail.com

using PDO database connection add,update,delete,edit operation

PDO advantage : 1-Object Oriented 2-Bind parameters in statements (security) 3-Allows for prepared statements and rollback functionality (consistency) 4-Throws catcheable exceptions for better error handling (quality) 5-Exception mode; no need to check error state after each API call. It's best to tell PDO how you'd like the data to be fetched. You have the following options: 1-PDO::FETCH_ASSOC: returns an array indexed by column name. 2-PDO::FETCH_BOTH: (default):returns an array indexed by both column name and number. 3-PDO::FETCH_BOUND:Assigns the values of your columns to the variables set with the ->bindColumn() method. 4-PDO::FETCH_CLASS: Assigns the values of your columns to properties of the named class. It will create the properties if matching properties do not exist. 5-PDO::FETCH_INTO:Updates an existing instance of the named class. 6-PDO::FETCH_LAZY: Combines. 7-PDO::FETCH_BOTH/PDO:FETCH_OBJ, creating the object variable names as t...

FT

Search This Blog