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).

Recommended Answers

All 6 Replies

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>';

}
?>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.