Printable View
Hi,
Quick question - I have a Facebook page which I quickly post news and info to which I'd like to add to my main website as either a small feed or the entire page. Is there a widget or easy way of doing this incorporating it into the main site?
Thank you
Have you tried the Embed a website Widget?Quote:
Originally Posted by Britangie1
Acorn
No not yet - wasn't sure if there was a specific Facebook widget for this - didn't realise there was a website one - just want it to sit within a frame and my header /menusQuote:
Originally Posted by Acorn
Can I get widgets only from the online catalogue or from the software itself? I have premium atm and I'm worried that as my purchase from last year expired in Feb I no longer have access to any widgets which I'm finding astounding if true for what I paid. :-O I'm hoping I just can't see them and I have them wrong...
(I've looked in my designs gallery and I have nothing at all.... )
As I'm trying to find an alternative way to do this I'm trying https://developers.facebook.com/docs...s/page-plugin/
I've put the html code into the body in the page properties but I'm stuck with a fb page to the top left side of my image pushing my website to the right. I figure I need to put the plugin code actually in the layers on the page to stay within the website page but I can't see where to put the HTML code into the mouse off layer or another layer on the page. I don't want to end up with a layer of the html code in text. :D
I really don't want to upgrade when I can't afford another £50 right now. Surely premium should come with some basic widgets as part of the basic programme? :-O
You want to create an iframe. https://www.w3schools.com/tags/tag_iframe.asp Create this and add it to a placeholder rectangle.
Most major social site and search engines will use meta tags and code to block their property being displayed within an IFRAME.
You can try with this:
Placeholder code (body): <iframe src="https://www.facebook.com/imdb" width="100%" height="100%" frameborder="0" scrolling="no" name="facebook" id="facebook"><p>Your browser does not support iframes</p></iframe>
The correct way to use the Facebook Page Plugin is to select the style needed then click the Get Code button.
Create a Placeholder rectangle on your MouseOff layer.
Add
HTML code (head):
<divid="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 ='https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.12';
fjs.parentNode.insertBefore(js, fjs);
}(document,'script','facebook-jssdk'));</script>
HTML code (body):
<divclass="fb-page"data-href="https://www.facebook.com/facebook"data-tabs="timeline"data-small-header="true"data-adapt-container-width="true"data-hide-cover="true"data-show-facepile="true"><blockquotecite="https://www.facebook.com/facebook"class="fb-xfbml-parse-ignore"><ahref="https://www.facebook.com/facebook">Facebook</a></blockquote></div>
Technically, the head code should be in the Page HTML code (head) but it is cleans to have one Placeholder with everything together.
All you then do is resize and position the Placeholder and change the data-href to your page.
Acorn
Oh thank you! :-bd:-bd:DQuote:
Originally Posted by gwpriester
Oh you are a lifesaver :-bd:-bd:D:D:-bd I was at a loss as to what to do with the second part of the code. Me I know I need to sort out an iframe I can have a play. ( I've raised a ticket about having no templates or any resources in my xara 12 so hopefully can get to the bottom of why I have less resources on 12 than I had on basic 9 :-O )Quote:
Originally Posted by Acorn
Thank you for being so patient and your help.
Good Afternoon(happy Easter too!)
Finally found time today to try out what you suggested above, I've added a smart shape rectangle to my page but I've realised I have no idea how to create a placeholder? Or do I just paste the irframe code into the box? It just comes up as text though so doesn't work. (I've been told by xara since my licence had expired I have access to zero add ons plugins templates etc - which is mad as the my previous edition had at least some included with the software. Quite annoyed about that but still... I have little incentive to upgrade my premium if I have chunks of the software expire after a year. May as well buy the basic again.. but I digress..)
The fb page I'm trying to embed is :-
https://en-gb.facebook.com/TomBurkeOnline/
From fb plug in site
Step 1: Include the JavaScript SDK on your page once, ideally right after the opening body tag.
<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 = 'https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.12';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Step 2: Place this code wherever you want the plugin to appear on your page.
<div class="fb-page" data-href="https://en-gb.facebook.com/TomBurkeOnline/" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false"></div>
Iframe
Place this code wherever you want the plugin to appear on your page.
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fen-gb.facebook.com%2FTomBurkeOnline%2F&tabs=timeline& width=0&height=0&small_header=false&adapt_containe r_width=true&hide_cover=true&show_facepile=false&a ppId" width="0" height="0" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
You've explained where to put the java script but not sure where to place the iframe code.
Sorry if I'm being a bit thick. :)
Every Shape has Web Properties > Placeholder and the code sits in the body or the head.
Acorn
Acorn - Where in the placeholder does the script and iframe text go? I could not figure this out or get it to work.
Does the embedded page only show when the page is published?
It gives two separate sets of code, a JS SDK code and an iframe code. You can use either but not both. The iframe code route is the simplest as it only requires code placed in one place whilst the SDK code requires code to be applied to the Page Body and in a rectangular placeholder.
I can't get either Angie's codes to work but I could get it to work on a page I do.
...or Egg. Thanks Egg.Quote:
Acorn - Where in the placeholder does the script and iframe text go? I could not figure this out or get it to work.
Does the embedded page only show when the page is published?
Open https://developers.facebook.com/docs...s/page-plugin/.
Play around with the settings on the page to change the interactive example.
Press the Get Code button.
You have two tabs (JavaScrpt SDK and IFrame).
For a sinlge presentation, create a rectangle on your MouseOff layer.
Copy the IFrame code and paste into the rectangle Placeholder HTML code (body).
OR
Copy both parts of the JavaScript SDK into the Placeholder HTML code (body).
You should only pick this option if you are embedding more than one FB page on the same page or if it is across several pages in a Supersite.
The first block of code is only needed once so it could go into the Page HTML code (head) or the Placeholder HTML code (head).
It renders on Preview without having to publish so testing is easy.
Acorn
Thanks Egg, physically linked again.Quote:
Originally Posted by Egg Bramhill
Acorn
@Gary, how many Guardian Angels does you need?Quote:
Originally Posted by gwpriester
Do note both Egg and I are still quite young but when older, Egg can roost under my canopy any day.
Acorn
Quote:
Originally Posted by Acorn
Thank you all! :star:-bd:salute:
Will try this out :-bd
:)