FaceBookページで1つのアプリを使って複数のWebサービスを読み込むの巻

sosyarettoWeb制作 - 全般
2013.09.06

FaceBookページ（個人用のアカウントじゃなくhttp://www.facebook.com/pages/create.phpから作るほう）にブログのエントリーやTwitter、Flickerやはてブなどなど・・いろんなWebサービスを連携するとなるとその都度専用の連携アプリを仕込んでいかないとだめなんですがこれをまとめて設定できるのがLiveDoor謹製「ソーシャレット」（http://www.facebook.com/apps/application.php?id=182139565160419）です。

Livedoorのソーシャレット

まずは先だってLivedoor（http://www.livedoor.com/）のアカウントを取得しログインした状態に、その後個人用のFaceBookアカウントでこのアプリを入れていただいてただくと下記のような画面が出ます。（Livedoorのアカウントは下段のメニューでここでも取れる）

ソーシャレットアプリ画面

この画面の「アイテム編集画面へ」メニューを選択。
ここでいちばん初めにFaceBookのアカウントと連携するボタンが出てるのでもちろん連携し

ソーシャレット認証画面

「FaceBookページ管理」タブをクリックし任意のFaceBookページの欄で「ソーシャレットで管理する」ボタンを押下しますです。

ソーシャレットで管理する

次に同画面の最下段「アイテムの追加」ボタンを押下し、任意のWebサービスを選択（事前に登録されたものに限る）サービスごとにURLやIDなどを登録します。

それが終わったら各FaceBookページに追加した「アイテム（Webサービス）」を表示するかチェックを入れて選択します。

ソーシャレットで表示するメディアを選択

今まではRSSはこのアプリTwitterは公式アプリをなどなど複数のアプリを入れて管理していましたが、これなら一括して管理できるので便利！

コメント

':'',ie6_fallback:!0,changepicturecallback:function(){if(viewDisabled){viewDisabled=!1;return}lastImage=$('#pp_full_res').find('img').attr('src');rl_view_image(script,lastImage);if(args.allowExpand){$('a.pp_expand').on('click',function(){viewDisabled=!0})}},callback:function(){rl_hide_image(script,lastImage)}});break;case 'fancybox':var lastImage='';$('a[rel*="'+selector+'"], a[data-rel*="'+selector+'"]').fancybox({modal:args.modal,overlayShow:args.showOverlay,showCloseButton:args.showCloseButton,enableEscapeButton:args.enableEscapeButton,hideOnOverlayClick:args.hideOnOverlayClick,hideOnContentClick:args.hideOnContentClick,cyclic:args.cyclic,showNavArrows:args.showNavArrows,autoScale:args.autoScale,scrolling:args.scrolling,centerOnScroll:args.centerOnScroll,opacity:args.opacity,overlayOpacity:parseFloat(args.overlayOpacity/100),overlayColor:args.overlayColor,titleShow:args.titleShow,titlePosition:args.titlePosition,transitionIn:args.transitions,transitionOut:args.transitions,easingIn:args.easings,easingOut:args.easings,speedIn:parseInt(args.speeds),speedOut:parseInt(args.speeds),changeSpeed:parseInt(args.changeSpeed),changeFade:parseInt(args.changeFade),padding:parseInt(args.padding),margin:parseInt(args.margin),width:parseInt(args.videoWidth),height:parseInt(args.videoHeight),onComplete:function(){lastImage=$('#fancybox-content').find('img').attr('src');rl_view_image(script,lastImage)},onClosed:function(){rl_hide_image(script,lastImage)}});break;case 'nivo':$.each($('a[rel*="'+selector+'"], a[data-rel*="'+selector+'"]'),function(){var attr=$(this).attr('data-rel');if(typeof attr==='undefined'||attr==!1){attr=$(this).attr('rel')}if(typeof attr!=='undefined'&&attr!==!1){var match=attr.match(new RegExp(selector+'\\-(gallery\\-(?:[\\da-z]{1,4}))','ig'));if(match!==null)$(this).attr('data-lightbox-gallery',match[0])}});var observerInitialized=!1;var changeAllowed=!0;var lastImage='';$('a[rel*="'+selector+'"], a[data-rel*="'+selector+'"]').nivoLightbox({effect:args.effect,clickOverlayToClose:args.clickOverlayToClose,keyboardNav:args.keyboardNav,errorMessage:args.errorMessage,afterShowLightbox:function(lightbox){var content=$(lightbox)[0].find('.nivo-lightbox-content');if(!observerInitialized){observerInitialized=!0;observeContentChanges(document.getElementsByClassName('nivo-lightbox-content')[0],!0,function(){if(changeAllowed){lastImage=content.find('.nivo-lightbox-image img').attr('src');rl_view_image(script,lastImage);changeAllowed=!1}})}},afterHideLightbox:function(){changeAllowed=!0;rl_hide_image(script,lastImage)},onPrev:function(element){changeAllowed=!1;lastImage=element[0].attr('href');rl_view_image(script,lastImage)},onNext:function(element){changeAllowed=!1;lastImage=element[0].attr('href');rl_view_image(script,lastImage)}});break;case 'imagelightbox':var selectors=[];var lastImage='';$('a[rel*="'+selector+'"], a[data-rel*="'+selector+'"]').each(function(i,item){var attr=$(item).attr('data-rel');if(typeof attr!=='undefined'&&attr!==!1&&attr!=='norl')selectors.push(attr);else{attr=$(item).attr('rel');if(typeof attr!=='undefined'&&attr!==!1&&attr!=='norl')selectors.push(attr)}});if(selectors.length>0){selectors=_.uniq(selectors);$(selectors).each(function(i,item){if(typeof event.pagination_type!=='undefined'){$('a[data-rel="'+item+'"], a[rel="'+item+'"]').each(function(){$(this).off('click.imageLightbox')})}$('a[data-rel="'+item+'"], a[rel="'+item+'"]').imageLightbox({animationSpeed:parseInt(args.animationSpeed),preloadNext:args.preloadNext,enableKeyboard:args.enableKeyboard,quitOnEnd:args.quitOnEnd,quitOnImgClick:args.quitOnImageClick,quitOnDocClick:args.quitOnDocumentClick,onLoadEnd:function(){lastImage=$('#imagelightbox').attr('src');rl_view_image(script,lastImage)},onEnd:function(){rl_hide_image(script,lastImage)}})})}break;case 'tosrus':var selectors=[];var lastImage='';$('a[rel*="'+selector+'"], a[data-rel*="'+selector+'"]').each(function(i,item){var attr=$(item).attr('data-rel');if(typeof attr!=='undefined'&&attr!==!1&&attr!=='norl')selectors.push(attr);else{attr=$(item).attr('rel');if(typeof attr!=='undefined'&&attr!==!1&&attr!=='norl')selectors.push(attr)}});if(selectors.length>0){selectors=_.uniq(selectors);$(selectors).each(function(i,item){if(typeof event.pagination_type!=='undefined'){$('body').find('.tosrus-'+item).remove();$('a[data-rel="'+item+'"], a[rel="'+item+'"]').each(function(){$(this).off('click.tos')})}var tos=$('a[data-rel="'+item+'"], a[rel="'+item+'"]').tosrus({infinite:args.infinite,autoplay:{play:args.autoplay,pauseOnHover:args.pauseOnHover,timeout:args.timeout},effect:args.effect,keys:{prev:args.keys,next:args.keys,close:args.keys},pagination:{add:args.pagination,type:args.paginationType},show:!1,buttons:!0,caption:{add:!0,attributes:["title"]},wrapper:{classes:'tosrus-'+item,onClick:args.closeOnClick?'close':'toggleUI'}});tos.on('sliding.tos',function(event,number){lastImage=$($(event.target).find('.tos-slider .tos-slide')[number]).find('img').attr('src');rl_view_image(script,lastImage)});tos.on('closing.tos',function(){rl_hide_image(script,lastImage)})})}break;case 'featherlight':var selectors=[];var lastImage='';$('a[rel*="'+selector+'"], a[data-rel*="'+selector+'"]').each(function(i,item){var attr=$(item).attr('data-rel');if(typeof attr!=='undefined'&&attr!==!1&&attr!=='norl')selectors.push(attr);else{attr=$(item).attr('rel');if(typeof attr!=='undefined'&&attr!==!1&&attr!=='norl')selectors.push(attr)}});if(selectors.length>0){selectors=_.uniq(selectors);$.extend($.featherlight.defaults,{openSpeed:parseInt(args.openSpeed),closeSpeed:parseInt(args.closeSpeed),closeOnClick:args.closeOnClick,closeOnEsc:args.closeOnEsc,afterOpen:function(event){lastImage=event.currentTarget.href;rl_view_image(script,lastImage)},afterClose:function(){rl_hide_image(script,lastImage)}});$(selectors).each(function(i,item){if(typeof event.pagination_type!=='undefined'){$('a[data-rel="'+item+'"], a[rel="'+item+'"]').each(function(){$(this).off('click.featherlight')})}if(/-gallery-/.test(item)){$('a[data-rel="'+item+'"], a[rel="'+item+'"]').featherlightGallery({galleryFadeIn:parseInt(args.galleryFadeIn),galleryFadeOut:parseInt(args.galleryFadeOut),previousIcon:'❮',nextIcon:'❯'})}else if(/-video-/.test(item)){$('a[data-rel="'+item+'"], a[rel="'+item+'"]').featherlight()}else{$('a[data-rel="'+item+'"], a[rel="'+item+'"]').featherlight()}})}break;case 'magnific':var selectors=[];var lastImage='';$('a[rel*="'+selector+'"], a[data-rel*="'+selector+'"]').each(function(i,item){var attr=$(item).attr('data-rel');if(typeof attr!=='undefined'&&attr!==!1&&attr!=='norl')selectors.push(attr);else{attr=$(item).attr('rel');if(typeof attr!=='undefined'&&attr!==!1&&attr!=='norl')selectors.push(attr)}});if(selectors.length>0){selectors=_.uniq(selectors);$(selectors).each(function(i,item){var subselector=$('a[data-rel="'+item+'"], a[rel="'+item+'"]');var element=$(subselector[0]);var media_type=element.data('magnific_type');var content_type=element.data('rl_content');if(typeof content_type!=='undefined')media_type=content_type;if(typeof media_type==='undefined')media_type='image';var fixedContentPos='auto';var fixedBgPos='auto';if(args.fixedContentPos==='true')fixedContentPos=!0;else if(args.fixedContentPos==='false')fixedContentPos=!1;if(args.fixedBgPos==='true')fixedBgPos=!0;else if(args.fixedBgPos==='false')fixedBgPos=!1;subselector.magnificPopup({type:media_type==='gallery'?'image':(media_type==='video'?'iframe':media_type),disableOn:args.disableOn,midClick:args.midClick,preloader:args.preloader,closeOnContentClick:args.closeOnContentClick,closeOnBgClick:args.closeOnBgClick,closeBtnInside:args.closeBtnInside,showCloseBtn:args.showCloseBtn,enableEscapeKey:args.enableEscapeKey,alignTop:args.alignTop,autoFocusLast:args.autoFocusLast,fixedContentPos:fixedContentPos,fixedBgPos:fixedBgPos,image:{titleSrc:function(item){var title=item.el.data('rl_title');var caption=item.el.data('rl_caption');if(!title)title='';if(!caption)caption='';return title+''+caption+''}},gallery:{enabled:subselector.length>1&&media_type==='gallery',navigateByImgClick:!0,preload:[0,1]},callbacks:{close:function(){rl_hide_image(script,this.currItem.src)},imageLoadComplete:function(){rl_view_image(script,this.currItem.src)}}})})}break}}})(jQuery);
タイトルとURLをコピーしました