I've been stuck on this problem for a few days, so I thought its best to ask the community.
So my problem is this, I'm trying to share a post. The post is generated dynamically. I'm using the addthis.com sharing toolbox. I also installed the SEO plugin by netsti and added the component on header
Now when I want to share, the image doesn't load on first share. I need to scrape the information through Facebook debugger.
I want to know if there is anyway to make a
So I'd like to know if there's anyway to set up the meta og image on head with functions like onStart or onEnd
Thanks
Yes why not you can add your own tags in layouts.
In your layout files or partial files where your <head> tag is, you can define something like this
{% if fbImage %}
<meta property="og:image" content="{{ fbImage }}" />
{% endif %}
Now in your page code section, you can define onStart method and add your fbImage
function onStart(){
// or you can get file object from your post or record
// and get its absolute path and use it `getPath()`
$imagePath = 'https://yoursite/image.jpeg';
$this['fbImage'] = $imagePath; // image absolute path
}
In this way you are telling page what image to display in "og:image" tag and for security we are checking its value if its not defined or blank we used if condition so "og:image" tag will not added.
If any issue please comment.
Related
I am trying to create a Facebook share option for my blog articles, and it works but it doesn't take the article text or image, but the first image and text on the (single page) website. How can I change my share code so that it will use the article's image and text from where I click the FB share button?
This is the template for the blog article, with the FB share code included:
<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>
<script type="text/javascript">function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script>
<h4 class="blue" style="margin-bottom:10px; margin-top:0;">[[+articleHeadline]]</h4>
<p class="datetext">[[+datetimeText]]</p>
<p class="readmoretext">[[+articleText]]</p>
<div class="divider"></div>
</div>
I hope you can help! Thank you!
It should be enough to make sure that the article page, ie the link that you are sharing, embeds the correct og:image and og:description. You only share the link with the share button, and facebook will embed the link and look in it for the proper data.
Update:
I guess you're not using the articles package to create the blog? If you are you already have individual pages even if you're not using them =) If you're not i assume you're using some sort of resource loop to create your entries.
After looking around in the facebook docs it seems you can specify the image (https://developers.facebook.com/docs/opengraph/using-actions/v2.0#params) when creating your share button using the javascript sdk (https://developers.facebook.com/docs/sharing/reference/share-dialog). Each article will need to call something like this instead of the current javascript share url functionality.
FB.ui({
method: 'share_open_graph',
action_type: 'og.likes',
action_properties: JSON.stringify({
image: "YourImageForThisRespectiveShare",
})
}, function(response){});
If you prefer to explore the method i mentioned in the comments it would go something like this:
Look in your code at u=location.href;, you'd want to try modifying that to u=location.href+'?articleid=[~[*id*]~]';. When you share you should hopefully see the appended article ID for each article.
You'll then need to make sure you can specify og:image and description for each article, i assume you somehow have resources set up that represent each article, in that case just create a couple of template variables for that resource type.
In your header you could then use the getResourceField package for example to retrieve the correct TV from the correct resource, as specified by the ?articleid= parameter in your URL.
To retrieve the parameter you'll need a simple snippet like return (!empty($_GET['articleid']) ? $_GET['articleid'] : $default);. Lets name the snippet: "getArticleId". I left the option to decide a default image when there is no &articleid specified.
You're using modx evolution from the look of your [~[*id*]~] tag, but there should be some equivalent of the getResourceField package for evolution. This is the revolution version of the code needed:
<meta property="og:image" content="[[!getResourceField?
&id=`[[!getArticleId? &default=`[[*id]]`]]` //Take the blog page's own image as a default
&field=`imageTV` //you'll of course have to change "imageTV" to whatever you call it
&isTV=`1`
]]" />
Repeat for og:title and og:description, with their respective TV names.
I have SPA that uses hash-tag URLs for identifying content (#/resource/id), I've added like button and it works, but how do I specify thumbnail, description etc?
From what I've read I should use
<meta property="og:image" content="http://www.example.com/site/preview.png"/>
but I have a static page without any back end + I need to change it depending on which content is loaded. What should I do?
UPDATE: I've found answer: Facebook Like Button refresh after AJAX-Load
In order to make your meta tags dynamic you will need to use backend code, such as PHP or ASP.
There really is no other way to make the header of the document dynamic.
PHP example:
<?php
if(isset($_GET['myparam']) && $_GET['myparam']==='big'){
echo '<meta property="og:image" content="http://www.example.com/site/preview_big.png"/>';
}else{
echo '<meta property="og:image" content="http://www.example.com/site/preview_little.png"/>';
}
?>
You're going to have to find a way to pass in a good URL to your image. Facebook takes this tag, goes to your site, and gets your image.
I am using the code from this page
https://developers.facebook.com/docs/share/
Update
I'm a php programmer but the solution is easy make different unique url addresses for a single page by using Get method look at this
example.com/index.jsp?name=akon&description=new%20song%20from%20Akon
you can set this as share button's url for first song
& second one
example.com/index.jsp?name=usher&description=new%20amazing%20song%20from%20Usher
Then make codes like this (I'm php programer but its easy to know what the code is doing)
<meta property="og:description" content="<?php echo $_GET['description']; //// This code gets information from url and shows them ?>" />
can you explain more ? you want to use some share buttons on a single page for different mp3's with unique urls?
I am using code found in http://www.facebook.com/share_partners.php/
It says to replace with the URL I want to share.
The page where the share icon is placed is NOT the URL I want to share. The URL I want to share I enter as
However, first it worked, but now it is pulling the meta value AND the URL from the actual page!
My concern is that it is grabbing the URL from the page, not what I input because of:
u=location.href;t=document.title
On the page (both the one with the share icon AND the actual shared page) I tried to define the preview image with:
<link rel="image_src"
This is located between the tags...doesn't seem to do anything.
Thoughts?
You can only change the title
everything else is fetched directly from the shared url.
i dont 100% understand what you want to do
<script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script>
Share
replace the u=location.href with u= and t=document.title with the given title. additionally replace in the href="" of the link with the correct url
any other info is fetched by the meta tags of the target url
<link rel="image_src" href="http://www.onjd.com/design05/images/PH2/WableAFC205.jpg" />
the href="" links to the correct image
the tag needs to be within those meta tags (in the area)
Is it possible to post a description/comment variable to the facebook sharer url? It's only possible for url and title as far as I can figure out.
The parameters that you can pass to the actual sharer.php are "u" and "t" which are url and title. You can add meta tags to your page to get more info to appear in the sharer. To quote the docs (make sure you click the advance partners link):
In order to make sure that the preview
is always correctly populated, you
should add the tags shown below to
your html. An example news story could
have the following:
<meta name="title"
content="Smith hails 'unique' Wable legacy">
<meta name="description"
content="John Smith claims beautiful football ..." />
<link rel="image_src"
href="http://www.onjd.com/design05/images/PH2/WableAFC205.jpg" />
As shown, title contains the preview
title, description contains the
preview summary and image_src contains
the preview image. Please make sure
that none of the content fields
contain any html markup because it
will be stripped out. For
consistency's sake, please use the
<meta> tag to provide text data for
the preview, and the <link> tag for
any source urls.
The title and summary tags are the
minimum requirements for any preview,
so make sure to include these two.
You can actually pass custom title, url, image and comment/description using:
http://www.facebook.com/sharer.php?s=100&p[title]=titlehere&p[url]=http://www.yoururlhere.com&p[summary]=yoursummaryhere&p[images][0]=http://www.urltoyourimage.com
As shown, title contains the preview title, description contains the preview summary and image_src contains the preview image. Please make sure that none of the content fields contain any html markup because it will be stripped out. For consistency's sake, please use the <meta> tag to provide text data for the preview, and the <link> tag for any source urls.
Facebook sharer use the description meta tag to add a description in your post for the pictures. I don't really know how it works but I think it uses this tag in your header:
<link rel='image_src' href='http://www.yourwebsite/dir1/dir2/picture.jpg' />