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 Linksif 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
Comments