Facebook Like: Dynamically setting og:title property with JS [duplicate] - facebook

I use ajax to render a content page with a Facebook Like Button plugin in it.
The problem is that when the user clics Like, Facebook will extract meta info but I don't know how to assign the meta with ajax.
I tried using append to head int FB.init but it seems to not work and the update isn't reflected when users like the page on Facebook
$('head').append("<meta property="og:title" content="The Rock"/>');

The problem is that facebook like will extract meta info but I don't know how to assign the meta with ajax.
I tried use append to head int FB.init but it seems not work.
Of course this does not work, because Facebook’s scraper requests your URLs from your server – and does not care about what the DOM might currently look like in any user’s browser.
You can not add Open Graph meta data client-side.

Actually you can use such script:
/// Append Meta tags
function setMT(metaName, name, value) {
var t = 'meta['+metaName+'='+name+']';
var mt = $(t);
if (mt.length === 0) {
t = '<meta '+metaName+'="'+name+'" />';
mt = $(t).appendTo('head');
}
mt.attr('content', value);
}
and call this function from body:
setMT('property', 'og:title', 'Title for Facebook');
I have similar on the News Site at http://www.livepage.info

be careful with using '.append()'.
According to the JQuery Docs, this method has a move effect (reads from source, copies to destination and removes the source).
A theoretical way is something like this:
headObj = $("head");
keywordObj = $(headObj).find("meta[name='keywords']");
newKeywords = $(keywordObj).attr("content");
newKeywords += myKeywords;
$(keywordObj).attr("content", newKeywords);
Download and install the plugin FireBug for browser FireFox, so you can check the changes at runtime.

Related

Is there a way to conditionally block a referer in Google Tag Manager?

We have an issue with GA where conversion sources are being lost after a user clicks on a link to our site, goes to the site, and then logs in using Facebook.
My understanding from GTM tips - implement referral exclusions is that our site sees the document.referrer as coming from Facebook and starts a new session, losing the original referrer. If we know the landing page on our site the user sees after logging into Facebook, is it possible to add code to exclude the FB referrer only for that page? I.e, on that one page we have something like (from the linked article):
function() {
var referrals = [
'facebook.com'
];
var hname = new RegExp('https?://([^/:]+)').exec({{Referrer}});
if (hname) {
for (var i = referrals.length; i--;) {
if (new RegExp(referrals[i] + '$').test(hname[1])) {
return null;
}
}
}
return {{Referrer}};
}
We can't simply add facebook.com to the GA exclusion list, as we have campaigns running on Facebook as well, so we'd still need visibility to organic traffic coming from Facebook.
You can copy GA tag and modify the copy with this code. Then fire that copy only on pages where you need to block referrer and block original GA tag on same pages.
If you don't want to have multiple GA pageview tags then use Lookup Table variable based on page paths. For some pages this variable should return your code as a Custom JavaScript variable and a default value should be {{Referrer}}.

How to display dynamic page description in a shared angularJS page (via google +1 for instance)

I am trying enable the metas in our app for google+ and facebook +1's and I get either nothing, the url of the page, or {{pageDesc}} in the post. Right now I am using a directive that dynamically sets the meta description:
HTML:
<meta meta-description>
DIRECTIVE:
app.directive('metaDescription', [ 'metaData', function(metaData){
return {
restrict: 'A',
replace: true,
template: '<meta name="description" content="{{description}}">',
link: function(scope,element){
scope.metaData = metaData;
scope.description = scope.metaData.pageDesc;
}
};
}]);
When doing this, the google api does not recognize the title and description and just sets the url of the current page and the url of the site as title/description.
I was poking around with prerender.io but I had to disable it because it made the +1 plugin crash.
You have to set those values in the HTML before you render the document. The Facebook/Google/etc bots that crawl the pages don't usually execute JavaScript.

Open ColorBox with link generated by hashchange event

Our company wants to include a LinkedIn Share Button in the news section of our website. It is relatively simple and consists of a carousel that open up the news items individually in Colorbox windows. We want the LinkedIn button to be within the Colorbox windows so that we can share the details of each news item.
So, I have successfully got the hashchange event to work when Colorbox is activated in order to show the correct url for each news item and the LinkedIn button does return the correct url when the news item is shared, however Colorbox doesn't open, it simply links to the index page of our site. My question is how do I fire up Colorbox from this shared link?
I have researched a lot of similar questions but cannot seem to get it working. Any help would be much appreciated. Thank you.
Below is my js and also a jsfiddle: http://jsfiddle.net/stegern/WvfsA/11/
$(document).ready(function()
{
//Carousel for news items
$('#news-carousel').show();
$('#news-carousel').jcarousel({
vertical:true,
scroll:true,
wrap:'circular'
}
);
$('.popup').colorbox({
title: function()
{
var url = $(this).attr('href');
return '#' + url;
},
onOpen:function()
{
window.location.hash = $(this).attr('href');
},
onClosed:function()
{
window.location.hash = "";
},
opacity: 0.7,
transition: 'fade'
}
);
//Attempt to open ColorBox when url is shared
$(function(){
var hash = window.location.hash;
if ('onhashchange' in window)
{
window.onhashchange = hashChanged;
}
else
{
setInterval(function(){
if (window.location.hash != hash)
{
hash = window.location.hash;
hashChanged();
}
}, 500);
}
var hashChanged = function(){
$.colorbox();
}
}
);
});
UPDATE
I have done some more research and discovered that I need to load my content in an iframe rather than using Ajax. I then need to add a querystring to my news item links and parse the parameters from the querystring in order to pass them to ColorBox.
However I am now getting a semantic issue with my js (line 8 Expected ')' token) which I don't know how to resolve. Can someone please explain.
Here is my html markup:
<ul>
<li>News Item One
</li>
<li>News Item Two
</li>
<li>News Item Three
</li>
And here is my js:
function getParameters() {
var
settingsObject = {},
hash,
hashes = location.search.substring(1).split(/&/),
i;
for (i = 0; i & lt; hashes.length; i++) {
hash = hashes[i].split('=');
settingsObject[hash[0]] = hash[1];
}
return settingsObject;
}
$('a.cb').colorbox($.extend({
iframe: true,
width: '800',
height: '600'
}, getParameters()));
I also have a jsfiddle setup at: http://jsfiddle.net/stegern/NtSvg/7/
Try putting some example code in a fiddle at http://jsfiddle.net/ then share here.
You posted your js, but we don't have the markup you're trying to use it on, so post the minimum necessary html code to make your example work in a fiddle.
It will help others visualize your problem much easier and quite possibly get you a solution a lot faster.
Ajax isn't loading because browsers typically disallow cross-origin file access for security reasons.Since the main code is hosted on jsfiddle, it forbids you to load pages from your site via ajax.
A quick workaround, if you're using Chrome, you can start it in a less secure mode, like indicated here: https://superuser.com/questions/593726/is-it-possible-to-run-chrome-with-and-without-web-security-at-the-same-time
I just tested now by opening a command prompt in the folder where chrome.exe is located and ran chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security
Then I opened http://jsfiddle.net/WvfsA/12/ , where I stripped down your js to the minimum. You'll see your content is now loaded via ajax by colorbox, however, you're doing something wrong with those paths, because the images can't be found.
I took a look at http://jsfiddle.net/WvfsA/13/ and I'm not sure exactly why you have 2 nested $(function () {}), I saw that in Framework & Extensions, ondomready is already selected, so you don't really need to wrap your main function(s) in anything.
Here's a quick screenshot as proof that it works:
http://i.imgur.com/jAiUW28.png?1
When you were developing, were you running your example through a server? You need to have a local server in order for anything ajax-related to work.
Install XAMPP http://www.apachefriends.org/en/xampp.html if you haven't already?
Edit: or you could develop on Chrome launched with that flag I mentioned, to bypass the need of a local webserver, but it's not a really good idea.

Facebook share to refer back traffic to the iframe page tab

SO here's what I am after. I have a FB page tab that runs the content of the site https://site.com/
I set up a FB share link to share a page aboutus.html. When I share it FB allows me to share this URL https://site.com/aboutus.html, but how can i send the traffic directly to the iFrame on the page tab? For example https://www.facebook.com/fan_page/app_331267943480920398/whatever_aboutus.html
I know it is possible because I saw it one day - cant remember now where.
Thanks.
You can't pass in filenames this way, that's only supported on Canvas Apps.
The best workaround to replicate this is using the app_data parameter. Basically, have your landing page (as defined in your app settings), be some kind of server side script which listens to the Signed Request, specifically the app_data parameter. Then you have that script load content based on the contents of that.
So as an example, let's imagine I want to load http://mybasedomain.com/foo.php or http://mybasedomain.com/bar.php. I direct users to https://www.facebook.com/PAGENAME/app_APPID?app_data=foo or https://www.facebook.com/PAGENAME/app_APPID?app_data=bar, then on my landing page, I have a simple if/else statement to parse that and render the relevant content -
<?php
// Assumes you have this parse_signed_request function - https://gist.github.com/872837
// And a $config array, which contains your app_secret
$signed_request = parse_signed_request($_REQUEST['signed_request'], $config['AppSecret']);
if ($signed_request['app_data'] === 'foo') {
include('foo.html');
} else if ($signed_request['app_data'] === 'bar') {
include('bar.html');
} else {
include('index.html');
}

Photos in the Facebook album not showing

I am using Facebook connect and JS client library to retrieve my photos in my Facebook account.
Below is my code:
<div id="photos_pics"></div>
<script type="text/javascript">
var widget_div = document.getElementById("photos_pics");
FB.ensureInit(function () {
FB.Facebook.get_sessionState().waitUntilReady(function() {
FB.Facebook.apiClient.photos_get('12345678', null, null, function(photos,e) {
var markup = "";
for (var i = 0; i < photos.length; i++) {
var photo = photos[i];
var photo_pid = photo.pid;
markup += '<fb:photo size="small" pid="'+photo_pid+'"></fb:photo>';
}
widget_div.innerHTML = markup;
FB.XFBML.Host.parseDomElement(widget_div);
});
});
});
</script>
The below method retrieves the photos:
FB.Facebook.apiClient.photos_get(uid, aid, null, result)
When I only specify uid which is my Facebook id, it works and photos (not in any albums) are returned. But when I specify one of my photo albums in aid, no results returned.
Anyone know what is the error I made? Thanks in advance.
I have recently been having a significant number of problems with retrieving photos from facebook lately as well. Almost always it is revolving around a recent change they have made to pid's. When viewing a photo in facebook you will see two query variables in your url pid and aid.
http://www.facebook.com/home.php#/photo.php?pid=9513212&id=672915455
although this is deceiving because the recent change that facebook made to pid's is that they are actually in the form id_pid so if I were to include the above photo in an fb photo tag it would look like the following
<fb:photo size="small" pid="672915455_9513212"></fb:photo>
Although I am having lots of problem with this because in more than one place facebook is being inconsistent with which form of pid it will return or is looking for.
So my first suggestion is to see which style pid you are receiving and which ones you are trying to use. This is most likely your current problem.
Your next problem is going to be the fact that there is a current bug in the xfbml version of the fb:photo tag. Currently the tag errors out when parsing the new style tags that have an "_" in them. To get around this we simply made a query for the direct url that facebook uses for the image, and display it using a simple html img tag