Share new CMS page in facebook

G00sfraba · December 4, 2013

Hello there presta gurus

Today I wake with a new query:
Is there a way to add like/share button to new pages created in the shop.

Example:

I have this page currently http://shop.artofgat.com/index.php?id_cms=6&controller=cms&id_lang=1

and I want guests/customers to be able to share/like it on facebook with a button in the bottom of the page.

How can I do this/ Is there a free way for this?

Call me cheap, but every cent I can spare is important for a new artist trying to start something on his own!

I can see this is available for products currently out of the box, which is great, but not for pages...

Best Regards

Georgi

NemoPS · December 4, 2013

If you are okay to adding it to every cms page, you can edit cms.tpl (theme folder). Over there, grab some code from a site like Addthis, and simply copy it at the bottom. It will appear after your cms content on every cms page

vekia · December 4, 2013

in cms.tpl file use this code:

<iframe src="//www.facebook.com/plugins/like.php?href=http://{$smarty.server.HTTP_HOST}{$smarty.server.REQUEST_URI}&width&layout=standard&action=like&show_faces=true&share=true&height=80&appId=517452181695470" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:80px;" allowTransparency="true"></iframe>

G00sfraba · December 4, 2013

If you are okay to adding it to every cms page, you can edit cms.tpl (theme folder). Over there, grab some code from a site like Addthis, and simply copy it at the bottom. It will appear after your cms content on every cms page

Thank you for opening my eyes

Here is the solution I tried and worked for me. This is for Prestashop 1.5.6.1:

1) Open your /shop/themes/default/header.tpl

2) Serach for

<body {if isset($page_name)}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} class="{if isset($page_name)}{$page_name|escape:'htmlall':'UTF-8'}{/if}{if $hide_left_column} hide-left-column{/if}{if $hide_right_column} hide-right-column{/if}{if $content_only} content_only{/if}">

3) Right after the last ">" press enter and on the new line paste the following code (this code I took directly from facebook click here)

<!--From here starts the facebook add on-->
<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>
<!--Here ends the fb addon-->

Save and exit

4) Open shop/themes/default/cms.tpl

5) Locate the following code and press enter after the last "}"

<div class="rte{if $content_only} content_only{/if}">
        {$cms->content}

6) Paste the following on the new row:

<!--From here starts the facebook buttons section-->
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
<!--From here ends the facebook button section-->

Save and exit.

Now you see the link in green above is the example link given by facebook. In order to get your dynamic url (the url of the actual thing you want to share) replace the code

data-href="https://developers.facebook.com/docs/plugins/"

with:

data-href="http://{$smarty.server.HTTP_HOST}{$smarty.server.REQUEST_URI}"

To test it.. go to your page and press Ctrl + F5.

There is one issue here if you load the store in english and then change the language, the Like button is not displaying any data which is odd. You have to reload the page in the new language in order to get data in the pop-up box after pressing "Like"

How can I fix this?

Now there is one thing here if you notice in the first step there is one piece of code /en_US/.

With this you can change the language of your buttons accordingly by hard coding your language or taking it dynamically.

Hard coding is clear... Does anybody know how to take the current locale of the store as I am headbanging almost 60 minutes now..

Edited December 4, 2013 by G00sfraba (see edit history)

G00sfraba · December 4, 2013

in cms.tpl file use this code:

<iframe src="//www.facebook.com/plugins/like.php?href=http://{$smarty.server.HTTP_HOST}{$smarty.server.REQUEST_URI}&width&layout=standard&action=like&show_faces=true&share=true&height=80&appId=517452181695470" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:80px;" allowTransparency="true"></iframe>

I tried this just to test it, but this is not creating the correct sharing format for the page.

with this code you share the whole site and the share link is referencing the homepage. With the other thing I posted it gets the exact link of the page I want to share... Maybe I did it wrong with your code, but it didn't work for me the way I expected it.

The longer solutions fits my needs best. Anyway.. some toughs on the questions?

Also there are other questions aswell:

Where do this came from (see attached file the under tittle surrounded by red)?

UPDATE:

The information in the red bubble in the screenshot attached is coming from the field Meta description

But.... It takes the initial value...

So if you create a page and place some information in this field, it doesn't matter how many times you are updating. It it will remain with the information you put there initially by creation.

Now How do we fix that? Any Ideas?

In summary the open questions for this topic are:

1) In the scenario: Open CMS page in front office --> change language --> press share/like

No information is displayed in the facebook popup (missing tittle and description). How do we fix this?

2) How to take the current shop locale (selected language from the customer from the drop down) and replace the /en_US/ value in the following line

js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";

3) How to fix the data in the meta description for the CMS pages.

Scenario: Create page with some meta description ---> share it on facebook ---> Update the meta description --> Try sharing it again and see that the description is not updated for the shearing tool

Edited December 4, 2013 by G00sfraba (see edit history)

G00sfraba · December 4, 2013

Anybody with any ideas??

bgarcia · February 6, 2014

Hi G00sfraba,

Im tyring o install this. Did you get any solutions? I want to add facebook comments or share button on my cms pages not on my facebook products, because I already have it.

I have install this module:

Facebook sharing block.

Can I re- use this module properties to my cms pages. For example this page:

http://clientes.bcsoporte.com/atlesia2/index.php?id_cms=6&controller=cms

please help me.

Regards!

vekia · February 6, 2014

i used this code:

<iframe src="//www.facebook.com/plugins/like.php?href=http://{$smarty.server.HTTP_HOST}{$smarty.server.REQUEST_URI}&width&layout=standard&action=like&show_faces=true&share=true&height=80&appId=517452181695470" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:80px;" allowTransparency="true"></iframe>

effecT: http://demo.mypresta.eu/en/content/4-about-us

you can do the same for facebook comments and any other plugin you want to use

bgarcia · February 6, 2014

The app id need to be diferent, right? or not need to change?

vekia · February 6, 2014

you can use different app id if you want, but it's not necessary.

you can read this guide: how to get facebook app id

bgarcia · February 6, 2014

Hi Vekia,

Thanks for your help! I installed it and when I click on share button it share the site url instead the cms url. How can I fix it?

I use the code you gave me on cms.tpl:

<iframe src="//www.facebook.com/plugins/like.php?href=http://{$smarty.server.HTTP_HOST}{$smarty.server.REQUEST_URI}&width&layout=standard&action=like&show_faces=true&share=true&height=80&appId=517452181695470" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:80px;" allowTransparency="true"></iframe>

I put it here:

<div class="rte{if $content_only} content_only{/if}">
                                {$cms->content}
                                <iframe src="//www.facebook.com/plugins/like.php?href=http://{$smarty.server.HTTP_HOST}{$smarty.server.REQUEST_URI}&width&layout=standard&action=like&show_faces=true&share=true&height=80&appId=517452181695470" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:80px;" allowTransparency="true"></iframe>
                            </div>

Here you can see on my page, also I add an screenshot too.

http://clientes.bcsoporte.com/atlesia2/index.php?id_cms=1&controller=cms

Can I had facebook comments there too? how?

Regards!

Edited February 6, 2014 by bgarcia (see edit history)

vekia · February 7, 2014

it shares correct url, but you haven't got meta tags defined for this page.

go to preferences > cms > edit your page

and define Meta tags:

vekia · February 7, 2014

Can I had facebook comments there too? how?

Regards!

read this guide: facebook comments on CMS pages in prestashop

bgarcia · February 7, 2014

it shares correct url, but you haven't got meta tags defined for this page.

go to preferences > cms > edit your page

and define Meta tags:

Hi, thanks!

I have all metas there and its not working. Im using PrestaShop™ 1.5.4.1. The code you gave me is for this version?

Regards!

vekia · February 8, 2014

This is metas for delivery cms page, - before you attached screenshot to "about us" page.

to test your meta definition, please use this tool: https://developers.facebook.com/tools/debug/

enter there url you want to test, then - try to share it on wall, you will see correct data then.

bgarcia · February 11, 2014

Hi Vekia, thanks for the tool. I've tested two pages and I get the same description when I share it. I get different Id and when I share through facebook the link shared sent to http://clientes.bcsoporte.com/atlesia2 instead to http://clientes.bcsoporte.com/atlesia2/index.php?id_cms=1&controller=cms / (nosotros).

I tried the tool first and then Ive made the test. Here are one of the results:

regards,

Dh42 · February 11, 2014

Ok, what you are needing is something to provide the open graph data for facebook. Check this out it is a free module, http://nemops.com/free-prestashop-module-facebook-open-graph/#.UvlxUvldVc4

vekia · February 11, 2014

Hi Vekia, thanks for the tool. I've tested two pages and I get the same description when I share it. I get different Id and when I share through facebook the link shared sent to http://clientes.bcsoporte.com/atlesia2 instead to http://clientes.bcsoporte.com/atlesia2/index.php?id_cms=1&controller=cms / (nosotros).

cms pages are shared well, i checked it and it works as it should, if there is no OG tags desc and title are based on meta tags, so facebook will use datas defined under preferences > seo & urls

bgarcia · February 11, 2014

Ok, what you are needing is something to provide the open graph data for facebook. Check this out it is a free module, http://nemops.com/free-prestashop-module-facebook-open-graph/#.UvlxUvldVc4

Hí, this module works for PrestaShop™ 1.5.4.1 version? Thanks!

warehouser · November 20, 2016

Hi

I'm trying to use this tutorial on 1.6.1.7. I tried G00sfraba way and vekia way. Both doesn't work in my shop.

When I run separed file like like.php on my server with <IFRAME> solution - it works, when I add :

<iframe src="//www.facebook.com/plugins/like.php?href=http://{$smarty.server.HTTP_HOST}{$smarty.server.REQUEST_URI}&width&layout=standard&action=like&show_faces=true&share=true&height=80&appId=517452181695470" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:80px;" allowTransparency="true"></iframe>

to my CMS source code (in tinyMCE editor) - it works,

but when i add code to header.tpl and cms.tpl - it doesn't work for all. Plugin is not visible.

Please could you help me with this? I have no idea.

NemoPS · November 21, 2016

Is the iframe in the code if you inspect the source?

warehouser · November 21, 2016

I added two solutions to cms.tpl. Both - iframe and div - for testing. Both doesn't work.

When I inspect source code of generated page - i can see part of code from header.tpl.

I can't find code from cms.tpl. It seems my shop avoid to use cms.tpl file when vieving.

{if isset($cms) && !isset($cms_category)}
	{if !$cms->active}
		<br />
		<div id="admin-action-cms">
			<p>
				<span>{l s='This CMS page is not visible to your customers.'}</span>
				<input type="hidden" id="admin-action-cms-id" value="{$cms->id}" />
				<input type="submit" value="{l s='Publish'}" name="publish_button" class="button btn btn-default"/>
				<input type="submit" value="{l s='Back'}" name="lnk_view" class="button btn btn-default"/>
			</p>
			<div class="clear" ></div>
			<p id="admin-action-result"></p>
		</div>
	{/if}
	<div class="rte{if $content_only} content_only{/if}">
		{$cms->content}
		<!--From here starts the facebook buttons section-->
<iframe src="//www.facebook.com/plugins/like.php?href=http://{$smarty.server.HTTP_HOST}{$smarty.server.REQUEST_URI}&width&layout=standard&action=like&show_faces=true&share=true&height=80&appId=517452181695470" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:80px;" allowTransparency="true"></iframe>
<!--From here ends the facebook button section-->
	</div>
{elseif isset($cms_category)}
	<div class="block-cms">
		<h1><a href="{if $cms_category->id eq 1}{$base_dir}{else}{$link->getCMSCategoryLink($cms_category->id, $cms_category->link_rewrite)}{/if}">{$cms_category->name|escape:'html':'UTF-8'}</a></h1>
		{if $cms_category->description}
			<p>{$cms_category->description|escape:'html':'UTF-8'}</p>
		{/if}
		{if isset($sub_category) && !empty($sub_category)}	
			<p class="title_block">{l s='List of sub categories in %s:' sprintf=$cms_category->name}</p>
			<ul class="bullet list-group">
				{foreach from=$sub_category item=subcategory}
					<li>
						<a class="list-group-item" href="{$link->getCMSCategoryLink($subcategory.id_cms_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}">{$subcategory.name|escape:'html':'UTF-8'}</a>
					</li>
				{/foreach}
			</ul>
		{/if}
		{if isset($cms_pages) && !empty($cms_pages)}
		<p class="title_block">{l s='List of pages in %s:' sprintf=$cms_category->name}</p>
			<ul class="bullet list-group">
				{foreach from=$cms_pages item=cmspages}
					<li>
						<a class="list-group-item" href="{$link->getCMSLink($cmspages.id_cms, $cmspages.link_rewrite)|escape:'html':'UTF-8'}">{$cmspages.meta_title|escape:'html':'UTF-8'}</a>
					</li>
				{/foreach}
			</ul>
		{/if}
	</div>
{else}
	<div class="alert alert-danger">
		{l s='This page does not exist.'}
	</div>
{/if}
<br />
{strip}
{if isset($smarty.get.ad) && $smarty.get.ad}
{addJsDefL name=ad}{$base_dir|cat:$smarty.get.ad|escape:'html':'UTF-8'}{/addJsDefL}
{/if}
{if isset($smarty.get.adtoken) && $smarty.get.adtoken}
{addJsDefL name=adtoken}{$smarty.get.adtoken|escape:'html':'UTF-8'}{/addJsDefL}
{/if}
{/strip}
<div class="fb-comments" data-href="http://{$smarty.server.HTTP_HOST}{$smarty.server.REQUEST_URI}" data-numposts="5" data-colorscheme="light"></div>
GEGKWNDRFLFASOLASFBNBNFBASNFBABFASBFASBASFBASFBASFBFKASBFBASFKBASF

GEGKWNDRFLFASOLASFBNBNFBASNFBABFASBFASBASFBASFBASFBFKASBFBASFKBASF

at the end of file is also for testing

Why my shop don't want to use cms.tpl file?

EDIT:

Sorry, header.tpl content is also missing. This part which i supposed it comes from header.tpl, comes from vekia module Facebook likebox.

It seems my shop ignore header.tpl and cms.tpl files. Maybe I use wrong path to files.

/themes/default-bootstrap/cms.tpl

I always reload browser with SHIFT+F5 for clearing cache in browser.

Edited November 21, 2016 by warehouser (see edit history)

warehouser · November 21, 2016

I have found solution. After applying changes in tpl files we have to change option of theme compile.

I have checked "never compile", switched to "compile when something is changed".

Thank you for your answer.

noodles57 · January 7, 2017

I recently add templatemonster Deal Of The Day module. It's a great add-on. I'd like to add a Facebook Share button.

The code I found in this discussion displays a generic share feature.

I want something similar to the product detail page Facebook share.

Can this be done?

Share new CMS page in facebook

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites