How to set up Facebook Share option?

79 Posts

bblinda74 Reply #1, 12 years, 3 months ago

I would like to add a simple Facebook Share button within a news page, including the headline, the image, the main text and the page URL. I have researched forever but didn't find anything about an existing extension, only this link helped me somewhat: https://github.com/DESIGNfromWITHIN/social-sharing-modx

However, how do I get modx to include a specific image (the image from the news article) to show in the sharing dialog?

Can you please help?

This is my template chunk for the news article (still very raw, I didn't include nice icons yet):

<div class="contentLeft">
   <div class="roundimage">
	<a href="[[+roundImage:phpthumbof=`h=750&zc=1`]]" class="colorbox" title="[[+roundImageCaption]]"><img class="round" 
	src="[[+roundImage:phpthumbof=`w=170&h=170&zc=1&q=95`]]" alt="[[+roundImageCaption]]" /></a>
   </div>
        <a target="_blank" href="http://www.facebook.com/sharer/sharer.php?u=[[!++site_url]][[*uri]]">Share on Facebook</a>
        <h4 class="blue" style="margin-bottom:10px; margin-top:0;">[[+articleHeadline]]</h4>
        <p class="datetext">[[+datetimeText]]</p>
        <p class="readmoretext">[[+articleText]]</p>
</div>

Thank you in advance!

EDIT:
I forgot to mention that my website is a single-page website, which means that only one meta is in the header. How can I get the share buttons to use the article image and text? [ed. note: bblinda74 last edited this post 12 years, 3 months ago.]

☆ A M B ☆
275 Posts

modx.customize Reply #2, 12 years, 3 months ago

Hi there

for evo - it might need the code from here: http://www.phpcmsmodx.info/social-locker-limited-with-like-only.html or http://phpcmsmodx.info/social-locker-limited-with-like-only-v2.html

I think I have published a few chunks for modx community in Russia http://modx.im/blog/triks/1520.html as well the code for chunk to the pastie ;-)

and for revo - see this one http://modx.im/blog/triks/239.html

modx and ecommerce pro

79 Posts

bblinda74 Reply #3, 12 years, 3 months ago

Thank you for your reply, but my problem is that my website is a single page site, which means that all content only has one header with the meta tags. I am not sure how I can manage so that the specific article image and description will be used, since there is obviously only one open graph object per page possible. Do you know of any workaround I can use?

☆ A M B ☆
275 Posts

modx.customize Reply #4, 12 years, 3 months ago

The fbsharelike chunk looks like follows:
<a href="#"
onclick="javascript:window.open(
'https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href),
'facebook-share-dialog',
'width=410,height=210');
return false;">
Share on Facebook
</a>

<fb:share-button href="[+SharePage+]" type="button_count">Button Count </fb:share-button>

<h1>Link</h1>
<fb:share-button href="[+SharePage+]"
type="link">
</fb:share-button>

<h1>Icon and Link</h1>
<fb:share-button href="[+SharePage+]"
type="icon_link">
</fb:share-button>

<h1>Button</h1>
<fb:share-button href="[+SharePage+]"
type="button">
</fb:share-button>

<h1>Box Count</h1>
<fb:share-button href="[+SharePage+]"
type="box_count">
</fb:share-button>

----------------------------------------------------

I think it pulls the image from <meta property="og:image" content="http://phpcmsmodx.info/assets/files/devil.gif" /> on my pages. Hope this meta is available on your side ;-)

modx and ecommerce pro

79 Posts

bblinda74 Reply #5, 12 years, 3 months ago

Quote from: modx.customize at Jun 19, 2014, 02:48 AM

I think it pulls the image from <meta property="og:image" content="http://phpcmsmodx.info/assets/files/devil.gif"> on my pages. Hope this meta is available on your side ;-)

I do have the meta tags on the page, but I don't want to use just this one image, text etc., but the specific image and text from the news article where the actual FB share buttons are. This is the issue, and I don't know how to "push" this specific image and text into the share dialog.

☆ A M B ☆
275 Posts

modx.customize Reply #6, 12 years, 3 months ago

I though this would help:

<a title="send to Facebook" 
  href="http://www.facebook.com/sharer.php?s=100&p[title]=YOUR_TITLE&p[summary]=YOUR_SUMMARY&p[url]=YOUR_URL&p[images][0]=YOUR_IMAGE_TO_SHARE_OBJECT"
  target="_blank">
  <span>
    <img width="14" height="14" src="'icons/fb.gif" alt="Facebook" /> Facebook 
  </span>
</a>

But still can't confirm it and trying to make it work: http://www.phpcmsmodx.info/hourly-base-developments-and-general-support.html

modx and ecommerce pro

79 Posts

bblinda74 Reply #7, 12 years, 3 months ago

Thank you, this looks like something that could work, I will try it out and see if I can make it work!

☆ A M B ☆
275 Posts

modx.customize Reply #8, 12 years, 3 months ago

OK, pls update this thread if you find the correct way first too ;-)

modx and ecommerce pro

☆ A M B ☆
2,213 Posts

AMDbuilder Reply #9, 12 years, 3 months ago

I just added some social buttons to a site, perhaps this code will help you some. The Pinterest button is a little closer to what you might want code wise, but all three should give you some ideas of ways to make the respective buttons work.

## Facebook
<div class="fb-like" data-href="[[~[[*id]]? &scheme=`full`]]" data-width="59" data-layout="box_count" data-action="like" data-show-faces="true" data-share="false"></div>

<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&version=v2.0"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>

## Twitter
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-related="TWITTERUSERNAME" data-count="vertical">Tweet</a>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

## Pinterest

<a href="//www.pinterest.com/pin/create/button/?url=[[~[[*id]]:urlencode? &scheme=`full`]]&media=[[++site_url]][[*IMAGETV:urlencode]]&description=[[*pagetitle:urlencode]]" data-pin-do="buttonPin" data-pin-config="above" data-pin-color="red"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_red_20.png" /></a>

<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>

Patrick | Server Wrangler
About Me: Website | Tweets | MODX Hosting

☆ A M B ☆
275 Posts

modx.customize Reply #10, 12 years, 3 months ago

Thanks, I believe you have a demo then, please? ;-)

modx and ecommerce pro