Hello,
I wonder how to create facebook & twitter share button which share articles title (twitter) & article title/content (facebook)?
So far I only find the following codes:
https://about.twitter.com/resources/buttons#tweet
https://developers.facebook.com/docs/plugins/share-button/
It doesn't share the article title/content though. I have to type the title to share (not automatic).
You can use the Open Graph protocol:
For example:
<html prefix="og: http://ogp.me/ns#">
<head>
...
<meta property="og:title" content="Title of this page" />
<meta property="od:description" content="Once upon a time..." />
How to control the text being tweeted? Is it by the html <title> ?
This is the code that I have so far:
event_article.php
<?php
include('include/con_database.php');
$result = mysql_query("SELECT * FROM dynamic_content WHERE id='".$_GET["id"]."'");
while ($data = mysql_fetch_array($result)){
echo '<center>'.'<div id="title">'.$data['title'].'</div>'.'</center>'.'<br>';
echo '<center>'.'<div id="images">'.'<img src="images/events/' . $data['images'] . '" >'.'</div>'.'</center>'.'<br>';
/*height="300px" width="400px" */
echo '<div id="text">'.$data['content'].'</div>'.'<br>';
echo '<div class="fb-share-button" data-href="http://developers.facebook.com/docs/plugins/" data-type="button_count"></div>';
}
?>
<br><br>
<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<br><br>
</div>
</body>
<html prefix="og: http://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>
I would like the text that is being tweeted is determined by $data['title'].
How to code it?
Hello,
I finally figure out how to link the twitter share button and share the title but I cannot show the facebook share button, I wonder why?
This is my codes:
event_article.php
<body>
<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/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="titlebar"><div id="title"><h2 class="title">Events</h2></title></div>
<div id="container">
<div id="banner">
<div id="desc">
<h1></h1>
<br><br><br>
<?php
include('include/con_database.php');
$result = mysql_query("SELECT * FROM dynamic_content WHERE id='".$_GET["id"]."'");
while ($data = mysql_fetch_array($result)){
echo '<center>'.'<div id="title">'.$data['title'].'</div>'.'</center>'.'<br>';
echo '<center>'.'<div id="images">'.'<img src="images/events/' . $data['images'] . '" >'.'</div>'.'</center>'.'<br>';
/*height="300px" width="400px" */
echo '<div id="text">'.$data['content'].'</div>'.'<br>';
echo '<div class="fb-share-button" data-href="http://localhost/IndonusaCMS/event_article.php?id=137" data-type="button_count"></div>';
/* http://localhost/IndonusaCMS/event_article.php?id='.$_GET["id"].' */
echo '<a href="https://twitter.com/share" class="twitter-share-button" data-text="'.$data['title'].'">Tweet</a>';
}
?>
<br><br>
<div class="fb-share-button" data-href="http://localhost/IndonusaCMS/event_article.php?id=137" data-type="button_count"></div>
facebook will crawl your website URL for to get the title, description, and thumbnail.
when you test with localhost, change the the URL http://localhost/ to http://127.0.0.1/.
Thanks that part works. Now, whatif I would like to share the article title instead of url. The twitter part works, but I cannot apply it to facebook.
event_article.php
<?php
include('include/con_database.php');
$result = mysql_query("SELECT * FROM dynamic_content WHERE id='".$_GET["id"]."'");
while ($data = mysql_fetch_array($result)){
echo '<center>'.'<div id="title">'.$data['title'].'</div>'.'</center>'.'<br>';
echo '<center>'.'<div id="images">'.'<img src="images/events/' . $data['images'] . '" >'.'</div>'.'</center>'.'<br>';
/*height="300px" width="400px" */
echo '<div id="text">'.$data['content'].'</div>'.'<br>';
echo '<div class="fb-share-button" data-href="http://127.0.0.1/IndonusaCMS/event_article.php?id=137" data-type="button_count"></div>';
echo '<div class="fb-share-button" data-type="button_count"></div>';
echo '<br><br>';
/* http://localhost/IndonusaCMS/event_article.php?id='.$_GET["id"].' */
echo '<div id="twitter"><a href="https://twitter.com/share" class="twitter-share-button" data-text="'.$data['title'].'">Tweet</a></div>';
}
?>
Hello,
I finally find this article: share button
I just wonder how to apply it to my codes?
This is what I tried and it doesn't work:
event_article.php
echo '<div class="fb-share-button" data-href="http://127.0.0.1/IndonusaCMS/event_article.php?id=137" og:title="title" data-type="button_count"></div>';
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.